Thursday, September 25, 2008

Some Javascript Tips

I have been doing a lot of JavaScript these days. Each day I learn newer things and each day I am starting to like it more and more.

I am going to compile a few queries where I broke my head.

Q) If I do window.open('anotherPage.html'), How can I change the DOM of the parent window.
This problem arrived when I was trying to add more rows to a table from another window itself.
Problem: Firefox allows it. But IE doesn't allow.
Solution: Use cloneNode() for FF. For IE , create the row again by attachRow()
Now for each cell, loop through it and do insertCells() and then copy the innerHTML to it.
All this is done in a simple loop through the table.

Q I have 3 frames on a page, I want to submit requests to page 2 and 3 at the same time
Do: document.forms[2].functionName();
yes, its as easy as this...
in your functionName(), you can add code to submit the form.submit();

Q Recursive Ajax calls.
Problem: To keep refreshing content of a page through Ajax.
One might typically use setInterval() but what if setInterval fires while a request from your ajax is coming back?
Solution: Use a global variable called "lock". Everytime you make a request set this lock, the call back function should release the lock.
When setInterval fires your ajax request function it should exit if its locked.

Q. getElementById('idname'). Don't use it too often, Try to traverse though the DOM by your code.

Q. Always give IDs to your form. Someday you'll find that this is very useful. You can submit a form from anywhere if you do this by getting the refrence of the form and then yourform.submit()

Q. Try to avoid excess IDs, This will occupy more browser memory interms of DOM parsing.
For example, If you have a table, don't give ID to each row. instead give the id to the table and then traverse the table.

Q. Do overuse Ajax and submit multiple requests simultaneously. Browser might allow this, but your database will not. Specially when you're doing connection pooling. In connection pooling , you have the same connection object and multiple execution of sql queries on the same object from different clients will result in failed transactions.

Q. attaching events is a good idea , but beware, IE and FF behaves differently. The API is completely different.

Q. Always use a common Javascript Browser detection Module. Make the detected browser global and then customize your scripts that way.

Q. Often while debugging we use alert("debug msg here.."); and waste time in commenting and uncommenting it. Instead use a global variable called "debug=true". And use if (debug) alert("");
You wont have to comment or uncomment it all the time.

Q. There are some good Javascript debuggers. Use them. The simplest one is FF error console. But what about IE? Yes, now you can use FF error console to debug IE related Errors too.. Install the FF IE tab plugin and have fun.

Q. Another great FF extension is Firebug. MUST MUST have for all you JS guys....

No comments: