CODEWITHSUNDEEP
javascriptjqueryajax
vbotio
vbotio

Reputation: 1674

Why is my ajax request is performing multiple times?

I'm doing a ajax request to change a data-status in one of my divs. I don't know why, it is performing multiple times when I click in one of my buttons.

Here is my code:

$(document).on("click", ".check", function(){
    var status = $(this).closest("td").data("status");
    var avatarID = $(this).closest("td").data("id");

    if (status === 1) {
        $("#alert-unpublish-status").addClass('is-visible');
        $("#alert-unpublish-status").on("click", function(e){
            e.preventDefault();
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        });
    }
})

What is wrong ? How can I improve it ?

Thanks!

Upvotes: 0

Views: 75

Answers (2)

Barmar
Barmar

Reputation: 782498

Take the click binding for #alert-unpublish-status out of the click handler for .check. You can use variables in a common scope to communicate which .check was clicked on last.

$(document).ready(function() {
    var status, avatarID;

    $("#alert-unpublish-status").on("click", function(e){
        e.preventDefault();
        if (status == 1) {
            $.ajax({
                url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/'+avatarID+'/unpublish',
                type: 'POST',
                contentType: "application/json; charset=UTF-8",
                xhrFields: {
                    withCredentials: true
                },
                success: function() {
                    Materialize.toast("Avatar unpublished", 2000, "green darken-1");
                    $("#alert-unpublish-status").removeClass('is-visible');
                    setTimeout(loadPage, 500)
                }
            });
        }
    });

    $(document).on("click", ".check", function(){
        status = $(this).closest("td").data("status");
        avatarID = $(this).closest("td").data("id");
        $("#alert-unpublish-status").toggleClass('is-visible', status == 1);
    });
});

Upvotes: 0

mpallansch
mpallansch

Reputation: 1194

You've added the click handler inside another click handler, so each time the .check element is clicked, more handlers will be added. Try creating a variable to track whether the handler has already been added. Like this:

//variable to track handler status initially false
$("#alert-unpublish-status").data("handler-added", false);

$(document).on("click", ".check", function() {
  var status = $(this).closest("td").data("status");
  var avatarID = $(this).closest("td").data("id");

  if (status === 1) {
    $("#alert-unpublish-status").addClass('is-visible');
    
    //check if handler is already added before adding again
    if (!$("#alert-unpublish-status").data("handler-added")) {
      $("#alert-unpublish-status").on("click", function(e) {
        e.preventDefault();
        $.ajax({
          url: 'https://www.legiaodossuperpoderes.com.br/chronus/api/adm/avatar/' + avatarID + '/unpublish',
          type: 'POST',
          contentType: "application/json; charset=UTF-8",
          xhrFields: {
            withCredentials: true
          },
          success: function() {
            Materialize.toast("Avatar unpublished", 2000, "green darken-1");
            $("#alert-unpublish-status").removeClass('is-visible');
            setTimeout(loadPage, 500)
          }
        });
      });
      
      //sets variable so handler will not be added next time
      $("#alert-unpublish-status").data("handler-added", true);
    } 
  }
})

Upvotes: 1

Related Questions