Question posted in
You can find the official documentation here.

Single quotes problems in jQuery ajax

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);
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search