readystate stuck on 2 in Firefox but IE7 works fine

[techtheatre]

I have a page that calls an ajax function "ajaxFunction();" with an onLoad call when the page first is opened. This populates part of the page with external data. Then the user may click an "edit" link that opens a popup window. Upon completion in that window, they click a link that closes the window and "refreshes" the ajax content (from the same URL as the initial page load):

 

<a href="#" onclick="window.opener.ajaxFunction();self.close();return false;">close this window</a>

 

This works fine in IE7, but Firefox starts the new ajax request but gets stuck at readystate == 2. For troubleshooting, I have a mouseover link on the "main" (window.opener) page that i can use to manually trigger my ajaxFunction() script, and that link successfully refreshes the content in Firefox, so the problem has something to do with calling it remotely and then closing out the window (i think). This is the link (in the main window) that works fine:

 

<a href="#" onmouseover="ajaxFunction();">RELOAD (mouseover)</a>

 

Here is my (very generic) AJAX scripting:

 

 

<!-- AJAX BEGIN -->
     <script language=\"javascript\" type=\"text/javascript\">
     <!-- 
     //Browser Support Code
     function ajaxFunction()
     {
          var ajaxRequest;  // The variable that makes Ajax possible!
          
          try
          {
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
          }
          catch (e)
          {
               // Internet Explorer Browsers
               try
               {
                    ajaxRequest = new ActiveXObject(\"Msxml2.XMLHTTP\");
               }
               catch (e)
               {
                    try
                    {
                         ajaxRequest = new ActiveXObject(\"Microsoft.XMLHTTP\");
                    }
                    catch (e)
                    {
                         // Something went wrong
                         alert(\"Your browser broke!\");
                         return false;
                    }
               }
          }
          
          // Create a function that will receive data sent from the server
          ajaxRequest.onreadystatechange = function()
          {
               if(ajaxRequest.readyState == 4 || ajaxRequest.readystate == 'complete')
               {
                    if (ajaxRequest.status == 200)
                    {
                         // SUCCESS                                   
                         // the next line inserts retrieved data into a DIV area called <AjaxContentDiv>
                         document.getElementById('AjaxContentDiv').innerHTML=ajaxRequest.responseText;
                    }
                    else
                    {
                         // this might be a 404 if the page is missing (or other error number)
                         document.getElementById('AjaxContentDiv').innerHTML = '<strong><font color=\"red\">ERROR: Unable to access source data.</font></strong>';
                    }
               }
               else
               {
                    // readyState has changed but <> 4
                    document.getElementById('AjaxContentDiv').innerHTML = '<img src=\"images/ajax_loading.gif\"> LOADING...'+ajaxRequest.readyState;
               }

          }
          
          var lookupRequest = 'ajax_display_options.php?OpdId=$OpdId';
          ajaxRequest.open(\"GET\", lookupRequest, true);                  
          ajaxRequest.send(null); 
     }
     
     //-->
     </script>
<!-- AJAX END -->

 

Any ideas why Firefox (and maybe Safari/Opera...i don't have those) is unhappy and what I can do to resolve this? Thanks!

 

:-\

 

 

[js_280]

Works under my Firefox with substituted url.  Use Firebug extension on Firefox to see if you're getting a reply from your script.

[techtheatre]

Well...unfortunately i am new to the firebug add-in (i have heard about it for a while, but never installed it).  i have it now (and it is very cool)...but i don't know where to look for whatever i am looking for.  I did get an error under the "console" tab when i made the request, so i assume that this has to do with the problem at hand...but the message doesn't begin to mean anything to me:

 

[Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: http://xxxxx.xxxxx.com/admin/prod_opt_manage.php?ProdId=257 :: anonymous :: line 106"  data: no]

http://xxxxx.xxxxx.com/admin/prod_opt_manage.php?ProdId=257

Line 106

 

I looked at line 106 in my script, and in the outputted HTML...and there is nothing even related to this on either of those lines...???

 

Any idea what the above means or where to look for the problem?  Why is it working fine in IE but Firefox is finding this error?

 

THANKS!!

[techtheatre]

Okay...I found line 106 (in firebug's line numbering)...an excerpt follows:

(the line numbers are not in the original posting...but are left here for clarity)

 

102 ajaxRequest.onreadystatechange = function()
103 {
104 if(ajaxRequest.readyState == 4 || ajaxRequest.readystate == 'complete')
105 {
106 if (ajaxRequest.status == 200)
107 {
108 // SUCCESS
109 // the next line inserts retrieved data into a DIV area called <AjaxContentDiv>
110 document.getElementById('AjaxContentDiv').innerHTML=ajaxRequest.responseText;
111 }
112 else
113 {
114 // this might be a 404 if the page is missing (or other error number)
115 document.getElementById('AjaxContentDiv').innerHTML = '<strong><font color="red">ERROR: Unable to access source data.</font></strong>';
116 // alert("ERROR: Page status is " + ajaxRequest.status);
117 // return false;
118 }
119 }
120 else
121 {
122 // readyState has changed but <> 4
123 document.getElementById('AjaxContentDiv').innerHTML = '<img src="images/ajax_loading.gif"> LOADING...'+ajaxRequest.readyState;
124 }
125
126 }

 

So, now that this bit of info is cleared up...what does it all mean?  My best guess (and remember i am a noob at this and really am just shooting in the dark) is that the ajaxRequest.status value is somehow not defined.  This seems odd, since in order to get to that line of code at all, the ajaxRequest.readyState is supposed to equal 4 (or "complete"), which my screen output indicates is not happening...it stalls out at 2...but that may just be that it is skipping 3 and has not yet gotten to the line that would display the new output...it breaks too soon.  Anyway, it seems that the need for a return value of 200 (which i added in because i read it online somewhere that it is necessary for error checking) is causing the problems.  How do i ensure that a valid page response code is returned (or is this not even the problem)?  Thanks!

[techtheatre]

Okay...i have some new info (but still need help)...

 

First of all, here is the line that is called in the popup that triggers the ajax reload in the main window and also closes the popup at the same time:

 

onLoad="window.opener.ajaxFunction();self.close();return false;"

 

Here is why that matters...it all works (still) in Internet Explorer 7.  It still does not work in Firefox.  I have discovered that the problem is that the popup closes before the ajax call function completes.  If I remove the self.close() command from my popup window, the main window refreshes its content with no problem.  Unfortunately, I need to have the popup close itself...so this is not a solution.  Is there a way to tell the ajaxFunction() to execute and not care if the code that initially told it to execute sticks around?  I know i could build in a delay on the self.close() but that is not really the solution i am looking for either.

 

Hopefully someone knows what i can do to solve this for Firefox.  THANKS!

:-\