Archive for the ‘javascript’ Category

IE modal dialog crash issues

August 16, 2007

Everyone who has worked with modal dialog windows, a feature of the IE browser knows the irritants of using it. JavaScript debugging is difficult, you cannot do ‘view source’ and plugins like the IE Dev Toolbar just do not work on the modal windows.

I needed to refresh a screen on a button event in a modal dialog. Rats! HTML form submit does not work on modal dialogs.

I redesigned it to close the current modal dialog on form submit and then open a new modal window again from the parent. How? I passed the window object from the opened modal Dialog to the parent by invoking a method.

for e.g.

function openNewModal(url) {

parentWindowObj.openNewModal(window, url);

}

In the parent, I did

function openNewModal(modalWindow, url) {

modalWindow.close();

window.showModalDialog(url, ..);

}

But this has a problem. On opening and closing modalDialogs by refreshing the screen multiple times, the browser just crashes. I found that this happens because IE does not release the memory of the modal dialog even on closing it until the method which opened it is complete. In other words, the opening and closing of modal windows needed to be completely disjointed.

To make the opening and closing of modal dialogs disjointed, I used events triggered by a timer 🙂 . For e.g.
var openModalInterval = setInterval(“fnOpenModal()”,1000);

Now, fnOpenModal will open a new modal dialog based on a global JS variable. like this.

function fnOpenModal(){

if(openmodal == true) {

window.showModal(url…);

}

}

This worked and IE releases the memory of the closed modal dialog since the events are disjointed 🙂

Advertisements

Thank You, W3Schools

May 21, 2007

I have been working on Ajax off late and obviously there has been a constant need to refer documentation on HTML DOM objects and JavaScript. One site which has constantly helped me is www.w3schools.com . It is a very comprehensive site on the HTML elements and the layout is very readable.

It even has a try it yourself Demos like this one – http://www.w3schools.com/js/tryit.asp?filename=try_nav_javaenabled where you can edit the HTML and Javascript and check how it is going to work. Very useful feature.

It also gives has a complete reference on every DOM object or Javascript built in objects that you can create.

Check out this one – http://www.w3schools.com/htmldom/dom_obj_tablerow.asp on the TableRow DOM object.

So, next time you need a Javascript/HTML DOM guide, you know where to go!

Firefox plugin for Javascript/Ajax debugging

May 6, 2007

Found a great plug – Firebug in for Firefox which is of great use to Javascript /Ajax developers.

Here are the features I like

1. Detects errors in HTML and the error messages are useful

2. Dynamically added HTML is shown too. – This feature is really a godsend for AJAX developers who more often than not, have to modify HTML using DOM. (For e.g. dynamically adding rows to an HTML table etc). Javascript debugging for such cases was very difficult because the normal ‘View Source’ does not show the newly added code and usually developers had to fill in alerts to identify the problem. But Firebug changes all that and we can see the dynamically changed HTML

3. Inspect mode – Pointing the mouse over the page highlights the code associated with that place and you can even modify the code.

The above 3 are the features I found most useful.

Others good features include

1. View DOM structure of an HTML

2. Measure Network activity – This is great to have if you make AJAX calls and you need to measure the response time.

This plug in has saved me hours trying to debug Javascript code and I recommend this as a godsend to all Web Developers.

UPDATE:  Internet Explorer too has a plugin for Javascript debugging. Not as feature some as Firebug but useful nonetheless. Get the plugin for IE here