how to reload jtable content when clicking tab

Question

I am using jtable jquery plugin and got everything working for a given tab. But when I click on a different tab, it appears that jquery or jtable caching the URL it's sending to the server, so it gets the same response.

I am trying to pass the dynamic tabId to the URL so it'll load appropriate content for that given tab. But it keeps sending whatever the first tab that gets clicked on.

With the code as shown below, when I click on Tab1, I'd like it to hit the url comparison/tab1 and when I click on tab2 I'd like to see the url comparison/tab2. However, if it keeps sending comparison/tab1 (looking at network in debug chrome and the access log on the server). When I put the alert into the click function, the tabId is displayed correctly.

<div id="myTab">
     <ul>    
       <li><a id="tab1" class="tab" href="#dataTable">Tab1</a></li>
       <li><a id="tab2" class="tab" href="#dataTable">Tab2</a></li>
       <li><a id="tab3" class="tab" href="#dataTable">Tab3</a></li>
     </ul>
     <div id="dataTable"></div>
 </div>

Javascript:

 $(".tab").on("click", function(event) {
      var tabId = $(this).attr("id");

      $('#dataTable').jtable({
                  title: 'My Table',
                  actions: {
                      listAction: 'comparison/' + tabId
                  },
                  fields: {
                      column1: {
                          key: true,
                          list: true,
                          title: 'Name'
                      },
                      column2: {
                          title: 'Column1',
                          width: '30%'
                      },
                      column3: {
                          title: 'Column2',
                          width: '20%'
                      },
                      column4: {
                          title: 'Column3',
                          width: '30%'
                      }
                  }

              });

            $('#dataTable').jtable('load');
   });

Any help would really be appreciated.

Regards Tin

Answer 1

If you think it is a jquery cache issue then try to disbale the cache globally

jQuery.ajaxSetup({
        // Disable caching of AJAX responses 
        cache: false
    });