Javascript Quotes Problem When Dynamically Adding Content

Question

I'm trying to dynamically add content stored in a variable. However, single quotes are causing problems.

var dynamicelementcode = $("<div id='container'>" + data +  "</div>");
            dynamicelementcode.prependTo($('#wholecontainer')).hide().fadeIn(300).slideDown(1000);

If the data variable contains a single quote, it breaks my code. How can I solve this problem? The data variable gets its content from a serverside php script.

Any php/js/jquery solution appreciated

Edit:

PHP Code Serverside

$comment_body = "The boy's bicycle";

echo '{ "author": "'.$author.'", "message": "'.$comment_body.'","parentid": "'.$parent_id.'","currentid": "'.mysql_insert_id().'","timestored": "'.$timestampa.'" }';

Jquery Code, Clientside

var newrootcomment = $("<div class='comment'><div class='comment-holder'><div class='comment-body'>"+ data.message + "</div> <abbr class='timestamp' title=''>" + data.timestored + "</abbr><div class='aut'>" + data.author + "</div> <a href='#comment_form' class='reply' id='id"+ data.currentid + "'>Reply</a> </div> </div>");
            newrootcomment.prependTo($('#wholecontainer')).hide().fadeIn(300).slideDown(1000);

the question is how is data exactly set. Is it substituted or is it set in JavaScript with a value defined by PHP? — Raffael
– Raffael, Commented Feb 21, 2011 at 16:47

Alexey Lebedev · Accepted Answer · 2011-02-21 18:02:21Z

1

var dynamicelementcode = $('<div id="container">').text(data)

jQuery text function automatically escapes quotes for you.

UPD. Escaping only single quotes:

var dynamicelementcode = $('<div id="container">').html(data.replace(/'/g,'&#039;'))

UPD 2. If you look at the source of your page you'll see something like "message": 'The boy's bicycle' - that's a syntactic error.

Here's a better way to pass PHP data to JavaScript, works with quotes too:

$comment_body = "The boy's bicycle";
echo json_encode(array(
  'author' => $author,
  'message' => $comment_body,
  'parentid' => $parent_id,
  'currentid' => mysql_insert_id(),
  'timestamp' => $timestamp
));

edited Feb 21, 2011 at 18:02

answered Feb 21, 2011 at 16:44

Alexey Lebedev

12.2k4 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Hirvesh Over a year ago

still not working with var dynamicelementcode = $('<div id="container">').html(data.replace(/'/g,'''))

Alexey Lebedev Over a year ago

Hmm.. that's weird. Can you add a data example to your question?

Hirvesh Over a year ago

code added :) This has been driving me crazy and has made my work come to a screeching halt :(

Hirvesh Over a year ago

whenever there's a quote in the $comment_body var, and it transfers to JS, it breaks my code on my page.

Hirvesh Over a year ago

hey, how when it outputs the dynamically added content, it shows with a slash like this: /' How can i make it show only '

|

Álvaro González · Accepted Answer · 2011-02-21 16:47:01Z

1

jQuery already has methods to insert text, you don't need to concatenate strings or take care yourself of escaping. Use the .text() method:

var dynamicelementcode = $('<div id="container"></div>').text(data);

Reference and examples: http://api.jquery.com/text/#text2

answered Feb 21, 2011 at 16:47

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

2 Comments

Hirvesh Over a year ago

what if there are certain html tags which need to be allowed? Like <b>, <i>,

Álvaro González Over a year ago

Well, that's a slightly different question. Core jQuery cannot read <a> inside a string and tell out whether it's HTML or a literal <a>. I presume you are asking for some sort of customizable HTML parser, which can be trivial or terribly daunting depending on how reliable it needs to be.

Collectives™ on Stack Overflow

Javascript Quotes Problem When Dynamically Adding Content

2 Answers 2

15 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related