CODEWITHSUNDEEP
javascriptjqueryajax
Imad uddin
Imad uddin

Reputation: 147

Ajax is doubling the requests on each click?

I have 3 tabs and on 3rd tab click I'm loading data into the 3rd tab, but once the data is loaded and i click the 3rd tab it loads data twice i.e send request 2 times and when I click the tab 3rd time it doubles the request and send 4 requests and so on.

My Code:

// Separate Ajax call for coach stylish view Data
    $(document).on( "click", '.ajaxTab' , function( e ){
        e.preventDefault();
        var $this = $(this),
            loadUrl = $this.attr('data-href'),
            target = $this.attr('data-target');

        $.get(loadUrl, function(data) {
            $(target).html(data);
        });

        $this.tab('show');
        return false;
    });

Tab link:

<li><a class="ajaxTab" data-toggle="tabAjax" href="#" 
    data-href="<?php echo $this->CxHelper->Route('eb-admin-get-coach-stylish-view') ?>?userId={{userId}}" 
  data-target="#coach-view-stylish-ajax" 
 rel="tooltip">Coach View (Stylised)</a>
</li>

Upvotes: 0

Views: 58

Answers (3)

Flash
Flash

Reputation: 1125

Perhaps the click is being called in an incremental value, i usually see that when i set click listeners in an ajax success method.

you might want to unbind events from the .ajaxTab

  $(document).on( "click", '.ajaxTab' , function( e ){
        $('.ajaxTab').unbind();
        .........//the other logic
});

unbind removes click listeners from the element

Upvotes: 1

Chayan
Chayan

Reputation: 614

Use one instead of on. [http://api.jquery.com/one/][1] 

$(document).one( "click", '.ajaxTab' , function( e ){
            e.preventDefault();
            var $this = $(this),
                loadUrl = $this.attr('data-href'),
                target = $this.attr('data-target');

            $.get(loadUrl, function(data) {
                $(target).html(data);
            });

            $this.tab('show');
            return false;
        });


  [1]: http://api.jquery.com/one/

Upvotes: 1

Nisfan
Nisfan

Reputation: 746

jQuery off method to remove existing click event handler http://api.jquery.com/off/

 $(document).off().on( "click", '.ajaxTab' , function( e ){
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('data-href'),
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});

Upvotes: 1

Related Questions