$.ajax post working in Chrome, but not in Firefox

Question

Okay, I\'ll be short. I have this script which is putting values in database. It\'s working perfect in Chrome, Safari, but can\'t make it work in Firefox or IE. It seems tha

Answer 1

The Firefox missing the $ajax async call has been fixed in the Firefox v49.0.2 and above.

$(document).ready(function(){
$("#dodaj").click(function(){
  event.preventDefault();
  var kategorija = $("#kategorija option:selected").val();
  var si = $("#si").val();
  var hu = $("#hu").val();
  var de = $("#de").val();
  var an = $("#an").val();
  var hr = $("#hr").val();

$.ajax({
    type: "POST",
    url: "dodaj_v_bazo.php",
    data: {"kategorija": kategorija, "si": si, "hu": hu, "de": de, "an": an, "hr": hr},
    success: function(data){
        alert( "Jed uspešno dodana."+data);
    }, 
});
return false;
});
});

The above code will work when you upgrade to Firefox v49.0.2 or above.

Answer 2

Async call might not work in FF if you it triggered on form submission. You can add async:false to your ajax call and it will work. It is either that or the fact that you have cross domain call that you will have to fix through CORS.

Answer 3

You didn't define event as parameter of the event handler, hence in

event.preventDefault();

the browser tries to look up event in the global scope. Chrome happens to provide the event object in global scope (hence no error) but Firefox doesn't (hence an error).

I'd suggest to add the event parameter to the event handler:

$("#dodaj").click(function(event){
    event.preventDefault();
    // ...
});

There is an additional difference: If you don't define the event parameter, event will refer to the native event object in Chrome, which is different than the event object which jQuery passes to the handler.

To learn more about event handling with jQuery, I recommend to go through these articles.