Wednesday, December 3, 2008

Javascript debugger to the rescue

Well, well, well, i want to start this post saying that the world of browser is a jungle! I was doing a web application and i face the problem of non compatibility DOM from a browser to another. Let me explain the problem. First of all, i will explain the functionality of part of my web application. I have an ajax call that query a database and give back an xml result. So far so good! Then i have the display result placed between
as a links list of result. My idea was to make each link react to the mouse event so i have put the typical onclick and mouseover in each links href elements of the list. The effect of the mouse over a link should get a second ajax call back to fill in a form beside the list result so the user doesn't need to click on the link and open a new window for THAT!! Then came the real problems!
Javascript + DOM + browsers = problems!
The DOM methods to get the node name are different for IE and FF. For FireFox, the 'tagName' method isn't working for IE (+6). For IE i had to use 'nodeName'. Wierd but that's how is it!
The xml is similar to:

<?xml version="1.0"?>

<root version="-live-" date="2008-11-21T14:45:24">





To fill the form field name 'field1' with the xml ajax response object 'resp' (XMLHttpRequest) above,
  • for IE: document.getElementById("form").field1.value=resp.getElementsByTagName('root')[0].childNodes[1].nodeName;
  • for 'other' browsers: document.getElementById("form").field1.value=resp.getElementsByTagName('root')[0].childNodes[1].tagName;
The php to ajax lookup is like:


var url="livesearch.php"





function stateChanged()


if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")


document.getElementById("anyId"). innerHTML=xmlHttp.responseText;



A nice thing that i didn't heard about since yesterday was to use Javascript debugger! And this was my salvation. I put a link where i found the useful information:


No comments:

Post a Comment