CODEWITHSUNDEEP
jquerytwitter-bootstrap
Spufferoo
Spufferoo

Reputation: 127

Bootstrap ajax tab refresh current

I'm trying to implement a bootstrap ajax tab where a tab is shown the content in this tab refreshes every minute or so, however when I select another tab the first interval continues to refresh and never resets to the newly clicked tab. 

$('#myTabs a').on('shown.bs.tab', function (e) {
  var myVar;
  var current_tab = e.target;
  clearInterval(myVar);
    myVar = setInterval(function(){
     $.ajax({ 
     url: current_tab 
     , cache: false
     , success: function(html) {    
     $("#ajax-content").empty().append(html);   
   }
  });
 }, 60 * 1000);
});

Upvotes: 2

Views: 911

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

Whenever you click on a tab you re-declare the variable:

var myVar;

In this way you will loose the old value and so you cannot clear the timeout.

Define the variable outside the function.

A different solution with no global variables

Instead to use a global variable it's possible to save the value as a data value related to the ancestor UL and to the current anchor.

Let's assume we have to handle only the first tab. We may attach to the first anchor the interval time:

<a data-interval="3000" .....

In this way, instead to fix it in the code we have the possibility to dynamically change it.

In the event handler we can get/set the interval ID from the UL ancestor and use this value.

In order to do those operations you can use:

.data() and .removeData().

In the following a simple snippet:

$('#myTabs a').on('shown.bs.tab', function (e) {
    //
    // get current intervalId if any
    //
    var myVar = $(e.target).closest('ul').data('intervalid');
    if (myVar !== undefined) {
        //
        // clear it
        //
        clearInterval(myVar);
        $(e.target).closest('ul').removeData('intervalid');
        console.log('interval ' + myVar + ' cleared!!')
    }
    var current_tab = e.target.href;
    //
    // get current interval duration if any
    //
    var intervalDuration = $(e.target).data('interval');
    if (intervalDuration === undefined) {
        //
        // with no interval duration .... no action
        //
        return;
    }
    myVar = setInterval(function(){
        console.log('interval ' + myVar + ' running!!')
        $.ajax({
            url: current_tab
            , cache: false
            , success: function(html) {
                $("#ajax-content").empty().append(html);
            }
        });
    }, intervalDuration);
    //
    // save interval ID..
    //
    $(e.target).closest('ul').data('intervalid', myVar);
    console.log('new interval ' + myVar + ' saved!!')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" id="myTabs">
        <li role="presentation" class="active"><a data-interval="3000" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">home</div>
        <div role="tabpanel" class="tab-pane" id="profile">profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">messages</div>
        <div role="tabpanel" class="tab-pane" id="settings">settings</div>
    </div>
</div>

Upvotes: 2

Related Questions