Elizabeth Elizabeth -4 years ago 85
HTML Question

How to properly escape double quotes in jquery

update: by deleting the space between the comma, I successfully got rid of one of the random equal signs/"s. However, it seems to be inserting " ="" " whenever there is a space in the string, which the user name returns(firstName lastName). Any idea why it would be doing that? And it also still inserts " ="" " right before ">join...", which is strange considering there is no space there.....

$("#ride").append('<div class= "style"><img src = "'
+ snapshot.val().id
+ '" style="width:68px;height:68px;"/><p>'
+ snapshot.val().user
+ '</p><ul class = "styling"><li>'
+ snapshot.val().when
+ ' '
+ snapshot.val().from
+ ' - '
+ snapshot.val().to
+ '</li><li>'
+ snapshot.val().comments
+ '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'
+ snapshot.val().user
+ '\",\"'
+ snapshot.val().reference
+ '\")\">join this ride</button></ul></div>');


I'm using jquery to write dynamic HTML content.

data.forEach(function(snapshot) {
$("#ride").append('<div class= "style"><img src = "'
+ snapshot.val().id
+ '" style="width:68px;height:68px;"/><p>'
+ snapshot.val().user
+ '</p><ul class = "styling"><li>'
+ snapshot.val().when
+ ' '
+ snapshot.val().from
+ ' - '
+ snapshot.val().to
+ '</li><li>'
+ snapshot.val().comments
+ '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"'
+ snapshot.val().user
+ '\" , \"'
+ snapshot.val().reference
+ '\")">join this ride</button></ul></div>');
});

console.log('ID : ' + $("#ride").html());
});


These are the divs created by my jquery code. Currently, I get a "Uncaught SyntaxError: Unexpected token }" message when I click either of the buttons in this div:

<div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
<p>Liz</p>
<ul class="styling">
<li>Wed Mar 29 2017 07:00 AM - 09:00 PM</li>
<li>test 2 </li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsqld0eras9ri4v9es ")"="">join this ride</button></ul>
</div>
<div class="style"><img src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg" style="width:68px;height:68px;">
<p>Liz</p>
<ul class="styling">
<li>Thu Mar 23 2017 02:00 AM - 05:30 AM</li>
<li>TEST THREE</li><button type="button" class="btn btn-outline-info" onclick="initMessenger(" liz="" smith "=" " ,=" " "-kfsvhs6q-x-bdhz8jfk ")"="">join this ride</button></ul>
</div>


Why does my initMessenger call all these random equal signs everywhere and added quotation marks? How do I get rid of them?

Answer Source

To avoid the escape nightmare one might use new ES6 Template literals

Like so

$("#ride").append(`
<div class="style">
    <img src="${snapshot.val().id}" style="width:68px;height:68px;"/>
    <p>${snapshot.val().user}</p>
    <ul class="styling">
    <li>${snapshot.val().when} ${snapshot.val().from} - ${snapshot.val().to}</li>
    <li>snapshot.val().comments</li>
    <button type="button" class="btn btn-outline-info" onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')">join this ride</button>
    </ul>
</div>`);

Now there's no need to escape any characters, see for instance: onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download