Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 826
Danno Avatar asked Feb 04 '09 15:02

Danno


People also ask

Does AJAX refresh the page?

Ajax refresh is used to refresh only certain parts of the screen, thus avoiding the loading and rendering of the whole page. In your case if you have the variable (binded to the checkbox) value set to True before you Ajax refresh it, the checkbox will be checked. Hope it helps.

How do I stop multiple AJAX calls from repeated clicks?

}); If isLoading is false, the AJAX call starts, and we immediately change its value to true. Once the AJAX response is received, we turn the value of that variable back to false, so that we can stop ignoring new clicks.

What causes AJAX errors?

Many pages send AJAX requests to a server. Because this relies on the cooperation of the server and the network between the client and the server, you can expect these AJAX errors: Your JavaScript program receives an error response instead of data; Your program has to wait too long for the response.

How do I stop jQuery from refreshing?

You can use event. preventDefault() to prevent the default event (click) from occurring. Is the same thing will apply for textbox on enter keypress? It should, whatever event is fired it prevents the default action.


2 Answers

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.

like image 140
Ben Scheirman Avatar answered Oct 01 '22 02:10

Ben Scheirman


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.

like image 44
tvanfosson Avatar answered Oct 01 '22 01:10

tvanfosson