CODEWITHSUNDEEP
javascriptjqueryjsonhtml-encodeapostrophe
the_boy_za
the_boy_za

Reputation: 287

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>

Upvotes: 3

Views: 3312

Answers (5)

Starx
Starx

Reputation: 78991

The problem is of the apostrophe, you have to escape it.

Here is a simply way to do so

function addslashes( str ) {
    return (str+'').replace(/([\\"'])/g, "\\$1").replace(/\0/g, "\\0");
}
$("[value='" + addslashes(this.merken) + "']").attr("checked","checked");

Upvotes: 0

Sebasti&#225;n Grignoli
Sebasti&#225;n Grignoli

Reputation: 33432

The right piece of code should be:

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

This accepts single quotes as well as double quotes.

Upvotes: 0

Pointy
Pointy

Reputation: 413757

Well you form a selector by wrapping your value in single quotes. The embedded single quote will cause it to be an invalid selector string.

I think it'll work to make sure embedded single quotes are quoted with a backslash, but I'll have to try it.

edit — try this:

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

Also, you should (almost certainly) be using .prop() instead of .attr() to set the "checked" property if you're using a newer-than-1.6 jQuery:

$("[value='" + this.merken.replace(/'/g, "\\'") + "']").prop("checked", true);

(No need to set the property to the string "checked", though you can if you like because the browser will just cast it to boolean anyway.)

Upvotes: 1

lunixbochs
lunixbochs

Reputation: 22415

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

When this.merken = "Levi's", the code will resolve to this:

$("[value='Levi's']").attr("checked","checked");

You can't use a single quote inside single quotes. An easy fix should be to change your code to create double-quotes, as long as you won't have a selector named Levi"s :)

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

Upvotes: 3

AKX
AKX

Reputation: 169062

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.

Upvotes: 4

Related Questions