Having trouble passing text from MySQL to a Javascript function using PHP

Question

So here's the problem. I have data in a MySQL DB as text. The data is inserted via mysql_real_escape_string. I have no problem with the data being displayed to the user.

At some point I want to pass this data into a javascript function called foo.

// This is a PHP block of code
// $someText is text retrieved from the database

echo "<img src=someimage.gif onclick=\"foo('{$someText}')\">";

If the data in $someText has line breaks in it like:

Line 1
Line 2
Line 3

The javascript breaks because the html output is

<img src=someimage.gif onclick="foo('line1
line2
line3')">

So the question is, how can I pass $someText to my javascript foo function while preserving line breaks and carriage returns but not breaking the code?

===========================================================================================

After using json like this:

echo "<img src=someimage.gif onclick=\"foo($newData)\">";

It is outputting HTML like this:

onclick="foo("line 1<br \/>\r\nline 2");">

Which displays the image followed by \r\nline 2");">

One solution would be to use [json_encode](http://php.net/manual/en/function.json-encode.php). [More info](http://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-including-escaping-newlines) — savinger, Apr 03 '12 at 22:46
Duplicate of http://stackoverflow.com/questions/168214/pass-a-php-string-to-a-javascript-variable-including-escaping-newlines — Basti, Apr 03 '12 at 22:47

Cal · Accepted Answer · 2012-04-03T23:30:16.917

2

json_encode() is the way to go:

$json = json_encode($someText); # this creates valid JS
$safe = HtmlSpecialChars($json); # this allows it to be used in an HTML attribute
echo "<img src=someimage.gif onclick=\"foo($safe)\">";

You can see a demo here: http://codepad.org/TK45YErZ

edited Apr 03 '12 at 23:30

answered Apr 03 '12 at 22:51

Cal

7,067
25
28

I've updated the question after using json. Any suggestions for the problem that is occurring? – Nate Apr 03 '12 at 23:22
Updated with the bit you're probably missing - quotes inside quotes need to be html escaped too. – Cal Apr 03 '12 at 23:25
That was what I needed Cal. Thank you very much. As soon as I have 15 reputation I will vote this up. Thanks again! – Nate Apr 03 '12 at 23:34
One more question if you're still around. Now that it has passed to my script, I'm having the data display in a textarea to the user, however I don't want the data to be shown with
etc, is there a javascript equivalent to json_decode()? – Nate Apr 03 '12 at 23:39
it sounds like you're storing the '
' in your database, which is probably not what you want to be doing. you could solve it a few ways, but an easy hack would be to do `document.getElementById('my-textarea').innerHTML = the_data;` so that the browser decodes the HTML for you. – Cal Apr 03 '12 at 23:44
alternatively, you could fix this in PHP before generating the HTML, using `str_replace('
', "\n", $in);` - http://codepad.org/4BBc77B3 – Cal Apr 03 '12 at 23:46

score 0 · Answer 2 · answered Apr 03 '12 at 22:48

0

If I'm not interpreting badly you may do this:

// This is a PHP block of code
// $someText is text retrieved from the database

echo "<img src=someimage.gif onclick=\"foo('{".trim( preg_replace( '/\s+/', ' ',$someText ) )."}')\">";

answered Apr 03 '12 at 22:48

0plus1

4,475
12
47
89

This will remove any kind of new line and effectively alter `$someText`. – Basti Apr 03 '12 at 22:49

score 0 · Answer 3 · answered Apr 03 '12 at 23:26

You'll save yourself a lot of headaches by pulling the JavaScript out of the HTML:

<img id="myImage" src="someimage.gif"/>
<script type="text/javascript">
    var str = <?php echo json_encode($json); ?>;
    document.getElementById('myImage').addEventListener(
        'click',
        function() {
            foo(str);
        }
    );
</script>

Or something similer...

score 0 · Answer 4 · answered Apr 03 '12 at 23:38

0

Only json_encode() is enough to escape the new line

echo "<img src=someimage.gif onclick=\"foo(".json_encode($newData).")\">";

answered Apr 03 '12 at 23:38

Starx

77,474
47
185
261

Having trouble passing text from MySQL to a Javascript function using PHP

4 Answers4