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!

Is there any particular reason why you are using `XMLHttpRequest`, etc, directly instead of a JS library? — Paul Grime, Apr 30 '13 at 22:11
I wouldn't otherwise see any issue with using the `XMLHttpRequest` directly, jQuery is already being used for manipulating the DOM so it is a little odd not to use the built in commands like [.ajax](http://api.jquery.com/jQuery.ajax/). I don't think that is causing the issue in this case though. — Turnerj, Apr 30 '13 at 22:22
@Paul: Nah, I used that code to only show an example. I indeed use jQuery for the purpose. But since I'm new to it, I avoid using it. However, even with using the jQuery, issue remains the same unsolved. — Sayed, Apr 30 '13 at 22:32
@PaulGrime: the three upvotes on your comment in three hours remind me of http://meta.stackexchange.com/a/48195 :) Seriously, a browser-specific question is easiest to answer when it doesn't use abstractions. — Nickolay, May 01 '13 at 01:44
@eddy: what's the status and readystate in Firefox? Have you checked the response from the server in Firebug? Do you have a live example? I have two guesses: cross-domain requests http://stackoverflow.com/questions/6818939/jquery-post-respond-with-readystate0-status0 and that the result may depend on how your server replies. — Nickolay, May 01 '13 at 01:52
@Nickolay - Nice link. I still feel a browser specific question is usually best answered, if possible, by pointing to a library(ies) that has been tested on dozens/hundreds of platforms and thousands of developers/customers over the course of years. Or are you saying `XMLHttpRequest` behaves in exactly the same way on all browsers/versions/OS? — Paul Grime, May 01 '13 at 07:09
Got solution to my problem. http://stackoverflow.com/questions/1980880/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. 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? Anyways, my problem solved so thank you everyone :) Got this link here — Sayed, May 01 '13 at 11:10
@eddy: I'm still curious what's the difference between Firefox and others in this case. Can you post the URL passed to xhr.open() and window.location.href? — Nickolay, May 01 '13 at 15:15
@PaulGrime: I feel the best answer (if jQuery fixed the problem) would be: "Firefox has a known problem handling this (bug NNN). You can work around this by YYY. By the way, jQuery's $.ajax() includes this workaround". — Nickolay, May 01 '13 at 15:17
@Nickolay - I didn't mention any library specifically, but if jQuery handles this issue then great. Sort of supports my point. — Paul Grime, May 01 '13 at 15:39
@Nickolay: I was using absolute url in XMLHttpRequest Object, like xmlhttp.open("post","http://example.com/index/index.php?mode=newpost",true); in script file residing in index directory. This was working correctly with chrome and other browsers but was creating error on Firefox. Using relative url fixed my issue. — Sayed, May 01 '13 at 17:33
@eddy: thanks for following up! What was the document's URL - `console.log(document.baseURI); console.log(window.location.href)`? Did SO remove the scheme before example.com in your previous comment or were you calling it like this? — Nickolay, May 01 '13 at 18:00
Nope. The URL was exactly the same as specified in the comment above except that in place of 'example.com', I had my site's URL. And hey, I'm not that expert so I don't think I could answer back your question properly. I hope you don't have anymore questions. — Sayed, May 01 '13 at 23:56

score 1 · Accepted Answer · edited May 23 '17 at 12:18

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?

Firefox issue with Javascript: Not updating status on form submission

1 Answers1