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 ASP.NET page method.

Is there a problem in jQuery or am I just missing some setting?

$.ajax({
async: false,
type: "POST",
url: "Default.aspx/DoSomething",
data: "{" + parms + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(data) { succesfulPost(data); },
error: function(XMLHttpRequest, textStatus, errorThrown) { errorPost(textStatus, errorThrown); }

});

The call is being made from an html button onclick event. I tried the 'return false;' in the method that is making this ajax call, but the full refresh in FireFox continues.

I've tried setting async = true, but that doesn't seem to work. FireFox just keeps going and doesn't wait for the backend to return a response. FireFox (in js) actually is generating an error in the ajax call. As you can see above, the error function is defined and this is triggered when I set async = true.

Answer 1

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 2

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 3

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.

Answer 4

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.