jQuery's ajax is causing a full page refresh i

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

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 3

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 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.

Answer 5

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.