Search code examples
javascriptjqueryjsonhtml-encodeapostrophe

Why is my jQuery code not able to read an apostrophe?


I have a web form that automatically checks the checkboxes when the page loads based on the data stored in the MYSQL database. Everything works just fine with the exception of data that contains an apostrophe. Here's my code:

JSON:

 [{"pkFavorietemerken":"1","merken":"Adidas"},{"pkFavorietemerken":"2","merken":"Boss"},{"pkFavorietemerken":"3","merken":"Burberry"},{"pkFavorietemerken":"4","merken":"Christian Dior"},{"pkFavorietemerken":"5","merken":"D&G"},{"pkFavorietemerken":"6","merken":"Diesel"},{"pkFavorietemerken":"7","merken":"Dolce & Gabanna"},{"pkFavorietemerken":"8","merken":"Emporio Armani"}]

JQUERY:

   $.getJSON("jason.php", function(data) {

      $.each(data, function(){


     $("[value='" + this.merken + "']").attr("checked","checked");


       });

   });

HTML:

    <form name="form1" method="post" action="something.php">                        
    <ul>
        <li><input type="checkbox" name="merk[]" value="Adidas"/>Adidas</li>
        <li><input type="checkbox" name="merk[]" value="Airforce"/>Airforce</li>
        <li><input type="checkbox" name="merk[]" value="Armani"/>Armani</li>
        <li><input type="checkbox" name="merk[]" value="Asics"/>Asics</li>
        <li><input type="checkbox" name="merk[]" value="Bikkemberg"/>Bikkemberg</li>
        <li><input type="checkbox" name="merk[]" value="Bjorn Borg"/>Bjorn Borg</li>
        <li><input type="checkbox" name="merk[]" value="BlueBlood"/>BlueBlood</li>
        <li><input type="checkbox" name="merk[]" value="Boss"/>Boss</li>
        <li><input type="checkbox" name="merk[]" value="Brunotti"/>Brunotti</li>
        <li><input type="checkbox" name="merk[]" value="Burberry"/>Burberry</li>
    </ul>

THIS DOESN'T WORK:

    <li><input type="checkbox" name="merk[]" value="Levi's"/>Levi's</li>

Solution

  • For Levi's, the resulting selector ends up being "[value='Levi's']". I guess the selector engine chokes on it. I'm not sure if it supports escaping (Levi\'s) -- if it doesn't, you can do something like

    var merken = this.merken;
    $("input:checkbox").each(function(){
        if(this.value == merken) this.checked = true;
    });
    

    instead.