Friday, June 15, 2007

Ajax Loader Generator

Well, I have been bit lazy these days by not posting regularly...well actually earlier i was quite busy and now i m very free on a leave from office so dont feel like Starting my PC.

Some weeks ago i found this interesting stuff for all you guys for whom AJAX has become a norm in your web applications...

Got bored of simple "loading..." text or also bored of simple circular loader...then its time to check this site out.

Here you can use/customize any loading image based on your web apps design.

I wont please speak much bout it coz this site is really very useful ;P

Saturday, June 2, 2007

IE DOM Issue

Recently I had an issue wherein I had to create new HTML element via DOM.And these HTML elements needed to have some properties as well HTML events like onClick(), onMouseOver(), etc.

While doing so my code worked perfectly fine in FireFox, but in IE the new elements created did not behaved in desired manner.
After a bit research I found that setAttribute() function doesnt work always in IE (actually it is suppose to not work at all ;)..).

Substitue for using setAttribute() is to use innerHTML
eg.TR1.innerHTML = "";

In my case innerHTML didnt worked as i had too many parameters to pass wherein I was out of combinations for using single and double quotes.

Below were the different ways I tried.
Not one of the following examples worked in IE:

TD1.setAttribute('onclick', 'doThis(' + param + ');');
TD1.onclick = 'doThis(' + param + ');';
TD1.onclick = new Function('doThis(' + param + ');');
TD1.onclick = function() { doThis(param); };
TD1['onclick'] = 'doThis(' + param + ');';
TD1['onclick'] = new Function('doThis(' + param + ');');
TD1['onclick'] = function() { doThis(param); };

The hack for making onClick work for you in IE via DOM

TD1.onclick = function() {
var temp = new Function("dostuff('"+myvar+"')");

The above code works well with both IE and Mozilla.
The same technique is to be used for calling any function for any HTML Events(onMouseOver).

NOTE: The above code can be simplified only when the function you are calling (dostuff) does not have any parameters to pass.

TD1.onclick = function() { dostuff(); }

Some more interesting hacks for making your DOM work in IE are


blah.className = 'myCSS'; <-- This line needs to be added

blah.setAttribute('valign', 'top'); This wont work as IE is case-sensitive
blah.setAttribute('vAlign', 'top');

Reference: Why IE Sucks