Subscribe via Feed

Quick dojo.query tip for Cross Browser compatibility.

Jeremy Hodge, Jun 15, 2010 9:16:00 PM

One big client side plus to dojo in XPages is the dojo.query function that can find an HTML element using CSS selectors.  For example to find a div tag with an ID attribute equal to "findMePlease", you can use the following code:

var myDiv = dojo.query('div[id="findMePlease"]')[0];

And you will get back the node you were looking for.

Where dojo.query really shines is with XPages. For example, when you created an xp:div in the XPages designer with an ID of 'findMePlease' .. the actual client side id is something like view:_id01:01:findMePlease.  Server side you can get the client side id with #{id:findMePlease} or #{javascript:getClientId('findMePlease')} ... but what if you are writing a client side script, and don't have access to anything that tells you want the generated ID is. Well, you use dojo.query with the CSS $= selector that selects elements that "end with" the query.

For example to select that same node client side, you can use:

dojo.query('div[id$="findMePlease"]')[0]

and you'll get the first (because of the [0] at the end) div whose id ends in "findMePlease".

Here's the tip:

If you need to access a FIELD such as an input or a hiddenInput ... don't use ID, use the NAME attribute.  IE 7/8 and Firefox 3.0.x have a problems locating fields using the ID attribute for some reason.

So intead of

dojo.query('input[id$="myField"]')[0]

use

dojo.query('input[name$="myField"]')[0]

and You'll get better cross browser compatibility.

 

Happy Coding!

 



0 responses to Quick dojo.query tip for Cross Browser compatibility.