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

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.