CODEWITHSUNDEEP
javascriptjqueryajaxcross-browser
emma
emma

Reputation: 759

jQuery doesn't work on Firefox but works on Chrome

I have this jQuery code:

function action(action){
    event.preventDefault();
    var products = $("#check-list input:checkbox:checked").map(function(){
      return $(this).val();
    }).get();
    var string = JSON.stringify(products);
    var table = $('#table').val();

    if(products.length != '0' || action === 'old-all'){
        $.ajax({
            type: 'post',
            url: 'app/toolbar.php',
            data: {action:action, table:table, ids:string},
            success:function(data){
                localStorage.setItem('notify', data);
                location.reload();
            },
        });
    } else{
        notify('You must choose an element first');
    }
}

I'm using jQuery 3.3.1.

If i click a button without checking a checkbox i should get You must choose an element first but if i choose an element the toolbar.php should run and do the thing it has to be done(according to which button was pressed:

<button class="grey-btn" onClick="action('delete')">Delete</button>
<button class="grey-btn" onClick="action('update')">Update</button>

It works on Chrome perfectly but it doesn't work on Firefox. I was trying some answers that i found on some other similar 'works on chrome but not on firefox' questions but neither one of them worked :(

Upvotes: 2

Views: 1787

Answers (1)

epascarello
epascarello

Reputation: 207557

You do not define event so that is your problem. Get away from using inline event handlers and bind it with jQuery.

$("[data-action]").on("click", function (event) {
  event.preventDefault();
  var btn = $(this);
  var action = btn.data("action");
  console.log(action);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="grey-btn" data-action='delete'>Delete</button>
<button class="grey-btn" data-action='update'>Update</button>

If you really want to use inline event handlers than do

function action (event, method) {
  event.preventDefault();
  console.log(method);
}
<button class="grey-btn" onClick="action(event, 'delete')">Delete</button>
<button class="grey-btn" onClick="action(event, 'update')">Update</button>

Upvotes: 8

Related Questions