Single quotes problems in jQuery ajax

Question

This is the error I am facing about jquery & ajax

Uncaught SyntaxError: missing ) after argument list

sizeBig('${author}', '${quote}')
sizeBig('Bob Ross', 'Talent is a pursued interest. Anything that you're willing to practice, you can do.', 'translate blah blah');

Single quote in parameter causes the problem. How can I fix this?

This is the code.

function makeQuote(author, quote, translate, idnum, id) {
  let tempHtml = `<div class="card text-center">
    <div class="card-body">
      <span>#${idnum}</span>
      <h5 class="card-title">${author}</h5>
      <a href="javascript:void(0)" onclick="document.getElementById('id02').style.display='block'; sizeBig('${author}', '${quote}', '${translate}');">${quote}</a>
      <p class="card-text"><small class="text-muted">${translate}</small></p>
      <button class="deletebutton" onclick="deleteContent('${id}')" style="width:auto;">X</button>
    </div>
  </div>`
  $("#quotes-box").append(tempHtml);
}

Start here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals — Randy Casburn, Dec 02 '20 at 16:05
Does this answer your question? [When should I use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-should-i-use-double-or-single-quotes-in-javascript) — freedomn-m, Dec 02 '20 at 16:36

score 1 · Answer 1 · answered Dec 02 '20 at 16:12

Like this

Delegation and data attributes

$(function() {
  $(document).on("click",".card a[data-author]",function(e) {
    e.preventDefault();
    document.getElementById('id02').style.display='block'; 
    sizeBig(this.dataset.author,this.dataset.quote,this.dataset.translate);
  })
});



function makeQuote(author, quote, translate, idnum, id) {
  let tempHtml = `<div class="card text-center">
    <div class="card-body">
      <span>#${idnum}</span>
      <h5 class="card-title">${author}</h5>
      <a href="#" data-author="${author}" data-quote="${quote}" data-translate="${translate}">${quote}</a>
      <p class="card-text"><small class="text-muted">${translate}</small></p>
      <button class="deletebutton" onclick="deleteContent('${id}')" style="width:auto;">X</button>
    </div>
  </div>`
  $("#quotes-box").append(tempHtml);
}

If you may have double quotes, then encode the quotes before storing in the attributes

score 0 · Answer 2 · answered Dec 02 '20 at 16:09

You can tell something's up with based on the syntax highlighting (depending on if you can see the two colors). Notice how the coloring changes at the single quote in "you're"-- Since you started your string with a single quote, it thinks this is the end of the string.

Either use double quotes around this string or escape your single quote with a backslash:

'This string shows how to use a single quote in you\'re'

"This string shows how to use a single quote in you're"

It's best to select a standard string quote style for your project if you do dynamic manipulation, but that's up to you and your team.

Single quotes problems in jQuery ajax

2 Answers2