Firefox - 'undefined' error

[pravinasp]

I have a page with table layout which has an AJAX request sent on body onLoad event, during this time the table cells show static text like "Loading". The table cells are later updated with the AJAX response. So when I try to move out of the page once the AJAX request is sent by clicking on a link for exmple, the "Loading" changes to "undefined". I read that innerHTML is not supported by firefox for table cells so i started using div inside the table cell yet no result. However IE and Opera seems to work fine. could anyone please tell me where am going wrong ?? Thanks a ton

[acoder]

Post your code so we can see where the problem might lie.

[pravinasp]

Thanks for your reply, The ajaxrequest is triggered by the following functions

function getReportStatus(geturl)
{
   var columnvals;
   var filtervals;
   url = geturl;
   xmlObj = null;
   xmlObj = GetXmlObj(); 
// This function is to choose the right xmlhttp object according to the browser
   xmlObj.onreadystatechange=stateChanged;
   xmlObj.open("GET", url , true);
   xmlObj.send(null);
 
}
 
function stateChanged()
 {
     if (xmlObj.readyState==4 || xmlObj.readyState=="complete")
     {
         data = xmlObj.responseText;
         var data_split = data.split("|");
 
          document.getElementById("citystate").innerHTML= data_split[0];
          document.getElementById("progress").innerHTML = data_split[1];
          document.getElementById("function").innerHTML= data_split[2];
 
         // All the ids above are div element ids which are inside individual <td> elements
 
     }
/*
     else if(xmlObj.readyState==1)
     {
        document.getElementById("citystate").innerHTML = "HEY";
        document.getElementById("progress").innerHTML = "Loading";
        document.getElementById("function").innerHTML = "Loading";
     }
     else if(xmlObj.readyState==3)
     {
        document.getElementById("citystate").innerHTML = "HEY";
        document.getElementById("progress").innerHTML = "Loading";
        document.getElementById("function").innerHTML = "Loading";
     }
*/
  }
 

Please let me know if you need any other piece of code as well.


Cheers

[acoder]

I'll also need to see the relevant HTML code. If the code is too much and you have a test site link, post that instead.

[pravinasp]

Is it possible i can email you my test site?? I dont want it to be public

Thanks again

I'll also need to see the relevant HTML code. If the code is too much and you have a test site link, post that instead.

[acoder]

PM me instead.

[acoder]

I've had a look, but I am unable to reproduce the problem.

Can you give me some exact steps to trigger the error.

[pravinasp]

once you click the button 'Create Report' you will be inside the report center. Once you are are inside the report center, click on any link just to navigate away from the page. When you click on the link the the table cells which were saying 'Loading' would disappear and you will see 'undefined' appearing in those cells for a very brief time before you end up in the next page.Please let me know if you were able to reproduce it this time. Thanks for your efforts again.

[pravinasp]

hey were you able to reproduce error now??

[acoder]

Yes, it seems it's only triggered if you leave the page.

I'm not sure what might be triggering it, but perhaps you need to abort the request onunload.

[pravinasp]

Cool, thanks a lot. I would have a go at it and let you know. Appreciate the time you had spent on this.

Cheers

[Plater]

I have noticed on FF a lot when using the FireBug addon that it shows various javascript functions as "undefined" when you attempt to navigate away from a page, that might have pending javascript code running.

[pravinasp]

I dont think FireBug is the issue in my case, as it shows 'undefined' even in other boxes with no firebug on.

[acoder]

Yes, it seems it's only triggered if you leave the page.

I'm not sure what might be triggering it, but perhaps you need to abort the request onunload.

The XMLHttpRequest object has an abort() method which you can use or set the variable to null. Just make sure that the request hasn't already finished. If it has, then there's nothing to worry about anyway.

[Plater]

Well I get the undefined error for other functions that have no relation to the xmlhttprequest stuff. They shouldn't even be being accessed, but firebug still likes to throw errors for it.

[pravinasp]

I tried nulling the xmlhttp object, but still remains the same. I dont really understand how the error gets triggered. Not all the table cells show undefined, only two columns does that. The other column which is also updated with the AJAX response goes blank instead of saying undefined. There are no differences between these columns though. I cant think of a reason why firefox would do it... any suggestions??

[Plater]

If you try to call a method/function on an object that doesn't support it, you frequently are returned "undefined"
Like trying to use TOSTRING() vs toString() and such.

[pravinasp]

Problem sorted,

" xmlObj.readyState == "4" || xmlObj.readyState=="complete" "

This is the line that had the problem. The readyState receives only a numeric response and no string. So this was breaking the script here when i compare readyState to "Complete" and was returning an empty responseText all the time. So when i tried to split responseText and add it to the div elements the first element went null and the others were saying undefined.

Any explanation on why this would break in firefox alone would be appreciated.


Thanks for all your help guys

Cheers

[Plater]

IE "doesn't care"?
Also, I notice that in IE, the ready state will be set to a winsock error code number when such events arrive (like host not found), whereas FF throws a javascript exception. So be sure to use try/catch statements.

[acoder]

Did you have it as:
xmlObj.readyState == "4" (string) or
xmlObj.readyState == 4 (integer)?

[pravinasp]

sorry my bad, i have it as an integer not like the previous post.

xmlObj.readyState == 4
(integer).

[acoder]

I'm not sure which browsers require "complete", but you should also add in a check for status, i.e.

if (xmlObj.readyState == 4 || xmlObj.readyState == "complete") {
    if (xmlObj.status == 200) { // OK
        // now it's ready...

[pravinasp]

exactly now i have added status check and its working fine now.

Thanks for your help, much appreciated.

Cheers

[acoder]

You're welcome. Glad it's all working fine now. A simple solution in the end.