aaron_karp
asked on
Line breaks and strings in dynamic javascript code
I'm building an AJAX-based site where all the content is dynamically fetched and then written to the page. Only problem is, I'm not a javascript wizard.
In this particular problem, I'm trying to build a text area with a Gmail-style Save / Discard Changes option. This text area gets written to the page, dynamically by editing the innerHTML property of a blank container as follows:
// noteID and noteText are already retrieved by making an AJAX request
// to a PHP script. The PHP script returns the noteText variable with all
// html special characters encoded, so that the quotes won't be any trouble
var qv = $('noteQuickView' + noteID);
var newInnerHTML = "<br/><div style='margin-top:2px'><im g src='images/buttons/blue_b lock/Save_ and_Close. png' alt='Save and Close' onclick='quickSave(" + noteID + ")' /> <img src='images/buttons/blue_b lock/Disca rd_Changes .png' alt='Save' onclick='quickDiscardChang es(" + noteID + ",\"" + noteText + "\")' /></div>";
qv.innerHTML = newInnerHTML;
When the noteText variable does not contain any line breaks, everything works perfectly. But when there are line breaks and I press the "Discard Changes" button, I get a javascript error. Firefox / webdev toolbar says "Unterminated string literal" but I can't figure out why. Maybe the line break is splitting the javascript code, even though it's dynamic. Is there an easy way around this? Maybe some way to escape the line breaks without messing up the data that shows up in the textarea?
In this particular problem, I'm trying to build a text area with a Gmail-style Save / Discard Changes option. This text area gets written to the page, dynamically by editing the innerHTML property of a blank container as follows:
// noteID and noteText are already retrieved by making an AJAX request
// to a PHP script. The PHP script returns the noteText variable with all
// html special characters encoded, so that the quotes won't be any trouble
var qv = $('noteQuickView' + noteID);
var newInnerHTML = "<br/><div style='margin-top:2px'><im
qv.innerHTML = newInnerHTML;
When the noteText variable does not contain any line breaks, everything works perfectly. But when there are line breaks and I press the "Discard Changes" button, I get a javascript error. Firefox / webdev toolbar says "Unterminated string literal" but I can't figure out why. Maybe the line break is splitting the javascript code, even though it's dynamic. Is there an easy way around this? Maybe some way to escape the line breaks without messing up the data that shows up in the textarea?
ASKER
I don't understand what you're suggesting.
In any PHP variables, or in the final newInnerHTML variable, replace all "\n" and "\n\r" with "<br />", before using qv.innerHTML =
For a PHP script enclosed in Javascript:
https://www.experts-exchange.com/questions/21887155/print-php-variable-with-javascript.html Web Development: print php variable with javascript
For pure Javascript:
<script type="text/javascript">
function nToBR(myString){return myString.replace(/\n/g, "<br />");}
qv.innerHTML=nToBR(newInne rHTML);
</script>
(Ref: http://www.codeguru.com/forum/archive/index.php/t-350597.html, http://javascript.programmershelp.co.uk/scrolltext.php
For a PHP script enclosed in Javascript:
https://www.experts-exchange.com/questions/21887155/print-php-variable-with-javascript.html Web Development: print php variable with javascript
For pure Javascript:
<script type="text/javascript">
function nToBR(myString){return myString.replace(/\n/g, "<br />");}
qv.innerHTML=nToBR(newInne
</script>
(Ref: http://www.codeguru.com/forum/archive/index.php/t-350597.html, http://javascript.programmershelp.co.uk/scrolltext.php
ASKER
But then the <br/> tags show up inside the textarea :-/
Any way around this?
Any way around this?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hmm, that does fix the problem of the Javascript errors, but now the textarea shows "Testing Testing\n\nHello World!"
In other words, now the line breaks are escaped, so they're visible characters inside the textarea.
In other words, now the line breaks are escaped, so they're visible characters inside the textarea.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hold on, I found the answer. Back in <30 minutes.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
or have the php urlencode the ajax response and just do
'quickDiscardChanges(" + noteID + ",unescape(\""+ noteText +"\"))'
'quickDiscardChanges(" + noteID + ",unescape(\""+ noteText +"\"))'
ASKER
I actually solved the problem in a different way altogether; Instead of trying to encode/escape the \n characters somehow, I simply removed the second argument from quickDiscardChanges() and then retrieve it manually from inside the function.
Still, a lot of you guys had some excellent ideas. Thanks.
Still, a lot of you guys had some excellent ideas. Thanks.
I think the line break must be in " ".
Bonmat86.