Firefox issue with Javascript: Not updating status on form submission

Question

It's many a times now that I've been trying to send my form data through Ajax to my server script without making the page refresh (using the onSubmit event of form). It all works fine with all the browsers (Chrome, IE, etc.) but when it comes to Firefox, the processing just keeps going on. I mean, even if the data has been sent to server side (yes, at many a times, I've got the data at the server side but the client is still under processing), the client doesn't respond to the consecutive calls.

For Example, consider one of my example codes:

Here is the Javascript

function submitComment(id)
{
 //id is the id of the postbox
 var content=$("#"+id).val();
 var xmlhttp;
 if(window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
 else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

 xmlhttp.onreadystatechange=function()
 {
  if(xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   //action taken in response to the script from server in response to this form submission, eg, enabling back the submit button
   $('input[type="submit"]').removeAttr('disabled');
  }
 }

 $('input[type="submit"]').attr('disabled','disabled');
 xmlhttp.open("POST",host+"comment.php?mode=newpost",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("post="+content);
 $('#status').html('Posting your comment. Please wait...');//shows this status as long as gets no response from server
 return false;
}

And here is its HTML:

<form id='newpostform' method=post action='' onSubmit="return submitComment('post')" >
 <textarea id='post' name='post'></textarea>
 <input type=submit value=Post>
 <span id='status' style='padding:10px; font-size:12px; color:black; font-family:cambria, segoe ui;'>
 </span>
</form>

So, In all the browsers, other than Firefox, the submit button is disabled for a while until the script communicates the post to server and when the server responds back, submit button is activated back and the status is updated.

Problem arises exactly here in Firefox. The status bar never changes its status even if the data has been communicated to the server!

Answer 1

The answer from the comment on the question:

Got solution to my problem. XMLHTTPRequest.status returns 0 and responseText is blank in FireFox 3.5

It was only due to the fact that I was using absolute path. Using relative path solved my problem.

Excellent!

---

As for your additional question:

However, I'm still confused with the fact that I've to use relative path like this: index/index.php in the path attribute of the script file residing in the index directory itself. Why? I mean, simply using 'index.php' should have solved the problem, isn't it?

As I understood it, you have your HTML at http://example.org/test.html with

<script src="subdir/main.js>

...which resolves to http://example.org/subdir/main.js, which calls XMLHttpRequest:

xhr.open("POST", "index.php", true);

This requests http://example.org/index.php, not http://example.org/subdir/index.php

This is because the relative URLs in XMLHttpRequest (as in many other cases) are resolved against the document's base URL, not the script's URL.

If the relative URLs were resolved against script's URL it might turn out very confusing: Imagine you have jQuery at /lib/jquery.js, which calls XMLHttpRequest and your own code at /main.js calling jQuery.ajax(... "data.txt" ...) . Should this request /data.txt or lib/data.txt?