Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Thursday, September 03, 2009

jQuery and checkboxes

Let's start with a simple checkbox like this:

<input type="checkbox" name="foo" value="bar" />

To check whether this checkbox is checked you can do either of the following two alternatives:

$('input[name=foo]').is(':checked')
$('input[name=foo]').attr('checked')

To check the checkbox we can use the attr() function

$('input[name=foo]').attr('checked', true);

And likewise to uncheck it

$('input[name=foo]').attr('checked', false);

Sunday, January 18, 2009

jQuery 1.3 upgrade & selector bug

I've just upgraded my website to jQuery 1.3. First thing that broke was the attribute selector. This was well documented in the jQuery 1.3 Release Notes - Upgrading as well as in the documentation. So this was easily fixed.

Another problem I had was with a selector matching <select> tags, such as

$('.size select')

For some reason it is no longer matching the <select> tag, but it's <option> tags instead. There is plenty of buzz about how jQuery switched to Sizzle.js selector engine and all the performance gains. I have not found any information pointing to the change that causes by selector bug. Navigating to the parent node solved the issue for me, but it's more like an ugly hack rather than expected behavior.

$('.size select').parent()

Anybody else noticed this problem?

Saturday, October 11, 2008

HTML id attribute valid values

Many (if not all) HTML tags can have id attribute. This attribute uniquely identifies the tag on a single HTML page. Web designers use ids when they design the page using CSS. Web developers use ids for retrieving DOM objects via JavaScript or functional testing of their sites.

Despite the wide use of id attribute, many of us get it wrong, the value of the id tag attribute to be precise.

According to the HTML 4.0 specification for basic types:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

This is a very basic rule and yet many of us get it wrong, not on purpose of course.

The most common mistake come with web applications that display data from a database. Most commonly a database record is uniquely identified in the database by a record id. This is number that is unique per database table. The common mistake is to use this (database) id as a value of the id attribute on a HTML page. The problem is that the database id is a number, but HTML ids cannot start with a digit. Remember HTML ids must start with a letter A-Z or a-z. Therefore the database id needs to be pre-pended with at least a single letter.

Even worse, I have seen web applications to use entity names as ids. These names are semi-unique, but may contain international characters, characters outside of A-Z and a-z range and even spaces.

If you are going to use a prefix before the database id and you want to separate the two, I strongly advise you to use underscore ("_"). My reasons are the following:

Don't use spaces (" ")! The reason for this is simple. Space character is not a valid for id or name attribute.

Don't use hyphens ("-")! If you intend to use an id with JavaScript in the form document.idname.value, you must use a name that is a valid JavaScript variable name. Hyphen (or minus) would break the JavaScript on your page.

Don't use colons (":") or periods (".")! These characters are valid, however if you decide to use CSS or some JavaScript library that uses CSS-like selectors (e.g. jQuery), periods will be mistaken for CSS class selectors and colons for pseudo-class selectors (e.g. :hover for links).

For the geeky ones, it is possible to start an id with a number (if you really want to) but you need to represent this number with its Unicode escaped character.


Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.