16

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.

Martin54
  • 1,349
  • 2
  • 13
  • 34
Danno
  • 933
  • 4
  • 13
  • 30
  • I'd keep async=true, and debug from there. Do you have Firebug installed? If so, open Firebug, and click on the "Net" tab, and see what is called when you click on the button. You should see the request to Default.aspx/DoSomething and any parameters being passed. See if there's weirdness there. – Carl Feb 04 '09 at 16:38

5 Answers5

14

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.

tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • Exactly what I was wondering. So, maybe I'm not too off base if someone else was thinking the same thing ;) – Carl Feb 04 '09 at 16:01
  • This fixed my issue, thanks for the solution. Was working fine in Chrome but not FF or IE. Another +1 for Chrome, even though technically it was my fault Chrome handled it well. – ToddBFisher Jul 13 '12 at 16:37
  • Chrome no longer seems to handle this well. – Nosajimiki Apr 09 '20 at 20:14
14

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.

Ben Scheirman
  • 40,531
  • 21
  • 102
  • 137
  • 1
    The event.preventDefault did the trick. I set async to true and added the above and now everything seems to behave. – Danno Feb 04 '09 at 17:29
  • if you could add specific code examples here it would be nice. – codea Jun 24 '14 at 13:23
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.

Jay Corbett
  • 28,091
  • 21
  • 57
  • 74
  • This led me in the right direction. I had a button in a form that had no specific type. It kept triggering a page reload when I submitted an ajax call. Setting the button type to type="button" role="button" fixed the issue for me – MichaelH Apr 28 '16 at 19:33
  • Be careful with this method. If the button is on a form a person can still hit enter which seems to have the same effect as pressing a submit button. – Nosajimiki Apr 09 '20 at 20:15
1

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.

Adam
  • 1,755
  • 20
  • 31
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.

Carl
  • 1,706
  • 1
  • 17
  • 25