$.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 that data isn't even being posted to .php file and ajax is not starting at all. Anyone, please?

This is my jquery script:

$(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;
});
});

This is the content in my php file:

$kategorija = $_POST['kategorija'];
$si = $_POST['si'];
$hu = $_POST['hu'];
$de = $_POST['de'];
$an = $_POST['an'];
$hr = $_POST['hr'];

$dodaj_v_bazo = "INSERT INTO jedi (kategorija, si, hu, de, an ,hr) VALUES ('$kategorija', '$si', '$hu', '$de', '$an', '$hr')";
mysql_query($dodaj_v_bazo) or die(mysql_error());

Answer 1

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.