Oh boy, yet another IE7 gotcha.

I wrote this piece of jQuery to code to deselect selected option(s) from a select element:

$("[ name = 'selectFieldName' ] option:selected ").attr( 'selected', '' );

Which works fine in Firefox, but then when the QA tested it, it doesn’t work for him and of course he tested in IE7 (which is a good thing).

So googled around a bit, find out this article on jQuery Google Group:

http://groups.google.com/group/jquery-en/browse_thread/thread/af73f2b57473ffb6

So I tweak the code to:

$("[ name = 'selectFieldName' ]").attr('selectedIndex', '-1');

And it works for both FF and IE7.

Bookmark It

Hide Sites

This doesn’t work in IE, in fact this was one of the problems that responsible for my staying late during the production release mentioned on the previous post.

For that particular project, we have a common user interface (UI) for both adding and editing a record. I use jQuery to change the interface depending on the mode. One of the UI elements that I need to change is the save button’s behaviour. Below is the expected behaviour:

• In add mode, the text is "Add new multi type" and the onclick value is set to something like: addEditMultiType( ‘add’, 5 ).
• In edit mode, the text is "Save multi type" and the onclick value is set to something like: addEditMultiType( ‘edit’, 5 ).

If I haven’t really dig jQuery, I would approach this requirement by creating 2 buttons inside 2 divs with display toggled block and hidden depending on the mode. However I was interested in trying this crazy idea, all of the event triggers (onClick, onChange, onBlur etc2)  in HTML element are in fact just attributes right? So I can in fact just create one button and use the awesome jQuery to change the button’s text and its onClick depending on the mode.

Below is an example of what I did:

Worked fine in Firefox, but not in IE7. It took me a long time to figure out this problem. After I figured out what the problem was, I had to go back the tried and tested solution, that is creating 2 buttons with 2 divs, perhaps not as elegant but guaranteed to work all the time. Lesson learned: don’t try to be too smart, sometimes simple solution is the best.

Bookmark It

Hide Sites

Still on cloud number 9 with jQuery, I thought of a new slogan for it:

jQuery - how short can you code?

Bookmark It

Hide Sites

What’s the most mundane and repeated code that you have to write in Javascript?

Most likely it is getting an element by id or getting some elements by name.

Getting element by id
Old school:

var theElem = document.getElementById('theElem');

jQuery:

var theElem = $('#theElem');

That’s basic enough, it’s pretty similar to Prototype. But worth noting, In Prototype, you don’t need to use the # sign. I’ve fallen into this couple of times when making the transition to jQuery.

Getting elements by name

Today I learned something new. I’ve found the jQuery’s equivalent to Javascript’s getElementsByName
Old school:

//assuming there's only one
//or we're interested in the first element found
var theElem = document.getElementsByName("theElem")[0];

jQuery:

var theElem = $('[name=theElem]');
//If iterating is neded
$('[name=theElem]').each( function() {
	//do stuffs
});

$(’[name=whatever]’) simply means find all elements that have attribute name equals to whatever.

Bookmark It

Hide Sites

Earlier this year, my manager asked me to research Javascript framework to be used in our applications.

I proposed jQuery since it seems to be getting lots of love around CF community. Another reason (quite selfishly) was: I want to learn another framework and growing my repertoire of skills (if I wanted to play it safe, I’d recommend Prototype and Scriptaculous since I have used them quite a lot on previous position).

I knew it was a good bet proposing jQuery but man, I just realized how amazing it is coding in jQuery.

Yesterday, I was re-writing a piece of javascript validation. Basically the code is meant to check a multi select field, it needs to find out whether the selected options is between 1 to 4. So below is the comparison on how would you find the number of options selected in a multi select using non framework approach and jQuery approach.

The old plain (read pain) javascript:

var CareerOne_type_id=document.getElementById('CareerOne_type_id');
var CareerOneTotal=0;

for (var i=0; i <e;CareerOne_type_id.options.length; i++) {
    if(CareerOne_type_id.options[i].selected) {
        CareerOneTotal++;
    }
}

The new code in jQuery:

var CareerOneTotal = $.map($('#CareerOne_type_id :selected'), functon(e) { return $(e).text(); }).length 

I love it! It’s so beautiful.. 

I almost wish that I do lot more jQuery and less ColdFusion

Bookmark It

Hide Sites