ignore previous ajax request

Question

Code Updated

This is my js

destroy.js.erb

$('.delete_loop').on('ajax:success', function () {
  $(this).closest('tr').fadeOut();
  var loopNumber = $('.form-loop-number').html()
  $('.form-loop-number').html(loopNumber - 1)
  });

my ajax is called with rails :remote => true helper

index.html.erb:

= link_to calendar_video_ad_schedule_path(schedule.id), method: :delete, :remote => true, data: { confirm: 'Êtes vous sûr ?' }, :class => 'delete_loop' do
    i.icon-trash style='color:grey; font-size: 1.2em'

When I delete an item I want the number of my .form-loop-number in the html to decrease. It works the 1st time, but if I call the method twice or more, the number decreases more than once.

1st time I remove item: loopNumber - 1

2nd time I remove item: loopNumber - 2

3rd time I remove item: loopNumber - 3

etc...

My controller responds sur js format

controller:

def destroy
  @schedule = Schedule::VideoAd.find(params[:id])
  @schedule.destroy

  respond_to do |format|
    format.html
    format.js
    end
end

I only want it to decrease 1 each time. How can I do this ?

Answer 1

Your

$('.delete_loop').on('ajax:success', function () {
...
});

event assignment is inside the code invoked during "delete" operation. Every time you delete, you add a new 'ajax:success' event handler. All these event handlers are executed on subsequent "delete"s. Move the above event assignment inside

$(document).ready(function() {
...
});

Answer 2

Rather than using the global ajax:success event handler, try using the success handler for your specific ajax call. I can't see the rest of your code, but if there's any other ajax it could be hitting this handler.

function deleteMyStuff(){
    $.ajax({
        url: '/delete-my-stuff/',
        success: function(response) {
            $('.delete_loop').closest('tr').fadeOut();
            var loopNumber = $('.form-loop-number').html();
            $('.form-loop-number').html(loopNumber - 1);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
}

Also, from the docs: http://api.jquery.com/ajaxSuccess/

As of jQuery 1.8, the .ajaxSuccess() method should only be attached to document.

So attaching it to the .delete_loop element could be causing unwanted behavior.