Double click jquery ajax button by clicking?

Question

I have an Employee page that shows a list of editable employees. When you click the edit button, jquery-ajax used to retrieve data from the server. The problem is that when I click the edit button, the event fires twice.

I use a separate js file and link to the file on the main page. The script worked fine until I moved it to a separate js file.

Jquery script

  //ajaxGet on edit button click $(document).on('click', '.editRole', ajaxGet); var ajaxGet = function (e) { var spinner = $(this).parent('div').find('.spinner'); var href = $("#editMenuSettings").data("url"); var menuRoleId = $(this).data('id'); spinner.toggle(true); var options = { type: "GET", url: href, data: { menuRoleId: menuRoleId } }; $.ajax(options).success(function (data) { spinner.toggle(false); $(".modal-body").html(data); $(".modal").modal({ backdrop: 'static' }); }); $.ajax(options).error(function (data) { spinner.toggle(false); toastr.error("Oops..Some thing gone wrong"); }); return false; }; 

Answer 1

You call $.ajax .

In lines

 $.ajax(options).success(function(data)... $.ajax(options).error(function(data)... 

you are actually making two different AJAX calls — one with a success callback and the other with an error callback.

In your case, your call should look like this:

 var options = { type: "GET", url: href, data: { menuRoleId: menuRoleId } }; $.ajax(options) .success(function (data) { spinner.toggle(false); $(".modal-body").html(data); $(".modal").modal({ backdrop: 'static' }); }) .error(function (data) { spinner.toggle(false); toastr.error("Oops..Some thing gone wrong"); }); return false; 

It will set both callbacks to a single AJAX call and execute it.