Question

According to jQuery’s .data() documentation you can use the .data() method to data prefixed attributes from a dom element. For example:

{# Include jquery.... #}
<div id='mydiv' data-foo='bar'></div>
<script>
    var foo = $('#mydiv');
    foo.data('foo');   // == 'bar'
</script>

That said, I’m curious how you set and pass boolean values in these dom objects. As far as I know, this does not work:

Throws a javascript error:

{# Include jquery.... #}
<div id='mydiv' data-foo=false></div>

Sets a string instead of a boolean:

{# Include jquery.... #}
<div id='mydiv' data-foo='false'></div>
<script>
    var foo = $('#mydiv');
    foo.data('foo');   // == 'false'
</script>

So, how do I set boolean values in the dom? Or, do I have to convert these string values to booleans in my javascript (which seems lame)?

Answer 1

Your example just works 🙂

http://jsfiddle.net/zerkms/pnsfL/

https://github.com/jquery/jquery/blob/master/src/data.js#L335

data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
jQuery.isNumeric( data ) ? parseFloat( data ) :
    rbrace.test( data ) ? jQuery.parseJSON( data ) :
    data;

So jquery guesses the boolean, null, numeric types and JSON (!!! that’s new for me)