CODEWITHSUNDEEP
javascriptjqueryajaxonclickjquery-events
Adib Aroui
Adib Aroui

Reputation: 5067

Stop the onclick event listenner till all actions after one click are totally completed

I have one anchor and one div. The anchor serves for loading, via ajax, a content and appending it on a div. In fact, the whole system works for pagination. an attribute of the anchor holds the page number and is changed according to the page loaded in the div.

The problem is that multiple successive clicks on the anchor create multiples ajax calls and a disaster. How can I stop the anchor from being an onclik event listener, till one ajax call is totally performed?

Your help is appreciated.

Edit: The my onclick listener looks like:

$('a.left_array_trigger').click(function(e){
        e.preventDefault();    
        var this_this= $(this);
        var idf=parseInt($(this).attr("id"),10);
        var current= idf -2;
        var followed_id=$(this).parent().parent().attr("id");

        load_articles(followed_id,current+1);// ajax call

        $(this).attr("id",current+3);
        $(this).parent().next().next().children().attr("id",current+1);

        var maxi= current +2;
        var mini= current -2;

        $.when(get_number_of_posts(refresh_left_arrow,followed_id)).done(function(){
          if(maxi===this_number_of_pages)  this_this.css('display', 'none');
          else this_this.css('display', 'block');
        });

        if(mini!==0) $(this).parent().next().next().children().css('display', 'block' );

        return false;
   });

Upvotes: 1

Views: 842

Answers (3)

Nicolas Chenet
Nicolas Chenet

Reputation: 66

To avoid a variable you can do the following:

$('#foo').on('click', function(){

   // The anchor is locked, return
   if ($(this).data('locked')) 
      return;

   // Let's lock the anchor
   $(this).data('locked', true);

   $.ajax('/foo/bar/').always($.proxy(function(){

      // Unlock the anchor
      $(this).removeData('locked');

      // Do whatever you need to do here <3

   }, this));
});

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

With using specific data to anchor clicked:

$('a.left_array_trigger').click(function (e) {
    var this_this = $(this);
    if (this_this.data('unclickable')) return;
    this_this.data('unclickable', true);
    e.preventDefault();
    //...
    $.when(get_number_of_posts(refresh_left_arrow, followed_id)).done(function () {
        if (maxi === this_number_of_pages) this_this.hide();
        else this_this.show();
    }).always(function () {
        this_this.data('unclickable', false);
    });
    //...
});

But you should find better variable name for this_this as e.g $this or $self

Upvotes: 1

John Green
John Green

Reputation: 13435

There are several ways to do this, but toggling listeners can be a pain. Just use a flag.

var pDiscard = false;

$('#foo').on('click', function(){
   if (pDiscard) return; // prevent multiple clicks.
   pDiscard = true; // temporarily ignore.
   $.ajax('/foo/bar/').always(function(){
      pDiscard = false; // unignore.
   });
});

Upvotes: 3

Related Questions