jQuery's ajax is causing a full page refresh in FireFox

Question

I\'m making an ajax call with jQuery. The ajax call works fine in IE 7, but FireFox 3 always does a full page refresh when making this call. The ajax call is POSTing to an

Answer 1

Also, if your input is type="submit"...you can change it to type="button". Then it is not trying to submit a form...only doing your "click" event.

Answer 2

Is this call inside a click event? If it is, make sure the end of the click event has a "return false". Just a thought. I know that's pretty old-hat, but, I thought I'd mention it anyways.

Otherwise, your call looks fine from what I can tell.

Answer 3

How are you invoking the AJAX method? It could be as simple as canceling the event that initiates the AJAX request if it is also going to cause a submit on the form.

<input type="submit" onclick="doAjaxSubmit();return false;" value="Update" />

Adding the "return false;" will cause the typical submit action to be cancelled. If it is coming from a text box, then you'll want to add e.preventDefault to the handler for the keypress (or whatever) handler that is set up to do the AJAX.

Answer 4

I had a similar issue with Firefox using Ajax. I had several input elements within a form tag. However, the form tag was causing the page to refresh, even when I replaced my tag with a button tag instead. I replaced the form tag with a div and the problem went away.

I also tried e.preventDefault(), as mentioned above. That also solved the problem, while allowing me to continue to use the form tag.

Answer 5

return false is what you need, however if a javascript error occurs before you hit that line, then the browser will continue on carrying out a link-click or button-click event happily.

you can try try surround potential problem areas with try/catch blocks.

Alternatively you might try this:

e.preventDefault as the first statement in your handler. This is supposed to stop the default event from happening, and i think you can call this up front... I just haven't tried it.

Edit: I'd also like to add that the ajax error: handler only traps errors that come from the server... like a 403 or 500. You should still wrap the ajax call in a try/catch.