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

Question

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>

score 4 · Accepted Answer · answered Apr 09 '12 at 22:06

4

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.

answered Apr 09 '12 at 22:06

AKX

152,115
15
115
172

I've tested it and it works! I'm a bit new to jQuery so to be clear on what your code does. The code checks on all the input checkboxes to see if the value is in the list and if so it checks the checkbox to true? – the_boy_za Apr 09 '12 at 22:52
Yes, it iterates through all of the checkboxes and compares the value you get from the JSON to the `value` of each checkbox. If they match, the `checked` attribute is set for that checkbox. – AKX Apr 10 '12 at 03:16

score 3 · Answer 2 · answered Apr 09 '12 at 22:06

3

$("[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");

answered Apr 09 '12 at 22:06

lunixbochs

21,757
2
39
47

I've tested this and it works as well! Haha I don't think i will have a input value like `Levi"s`. when using this method are there other special characters that i should avoid using? – the_boy_za Apr 09 '12 at 23:17

Pointy · Answer 3 · 2012-04-09T22:11:20.843

1

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.)

edited Apr 09 '12 at 22:11

answered Apr 09 '12 at 22:04

Pointy

405,095
59
585
614

why is it important to use `.prop()` instead of `.attr()` when using 1.6 and above? – the_boy_za Apr 09 '12 at 23:22
There's a difference between properties of DOM elements (that is, things that you can access by name as if the DOM elements were JavaScript objects; `somthing.name` or `something.tagName` or `something.onclick` etc). The jQuery guys made the decision to clearly distinguish between the two in 1.6, so in almost all cases now you generally want to use `.prop()` unless you **know** you want to access something via the attribute API of the DOM element. – Pointy Apr 10 '12 at 03:21

score 0 · Answer 4 · answered Apr 09 '12 at 22:19

0

The right piece of code should be:

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

This accepts single quotes as well as double quotes.

answered Apr 09 '12 at 22:19

Sebastián Grignoli

32,444
17
71
86

Starx · Answer 5 · 2012-04-09T22:27:39.523

0

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");

edited Apr 09 '12 at 22:27

answered Apr 09 '12 at 22:20

Starx

77,474
47
185
261

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

5 Answers5