CODEWITHSUNDEEP
jqueryajaxtabsreset
davidofyork
davidofyork

Reputation: 1

How do I prevent Ajax tabs from reloading each time?

There are a number of questions on this topic but they seem to want the opposite of what I am looking for!

I have implemented jQuery Tabs with adding and removing (similar to this: http://jqueryui.com/tabs/#manipulation), but with the content of each page pulled via Ajax (similar to this: http://jqueryui.com/tabs/#ajax).

This is working fine but I would like to swap between open tabs without the content being reloaded and essentially resetting each time. The reason for this is that the content of each tab includes a text highlighting feature (different checkboxes highlighting different words) and I would like the selected checkboxes to remain when the tab is deselected.

Is there any way of swapping tabs without reloading each time?

//Tab variables
var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
documentTabCounter = 0,
entityTabCounter = 0,
tabs = $( "#tabs" ).tabs();

//On document load, generate the tabs
$(document).ready(function() {
tabs.tabs();
});         

function addDocumentTab(document_id, document_name) {
var nameToCheck = document_name;
var numberOfTabs = 0;
var targetTab = 0;
var tabNameExists = false;

//Loop through the open tabs to check whether the tab is already open (by comparing names) 
$('#tabs ul li a').each(function(i) {
    numberOfTabs++;
    if (this.text == nameToCheck) {     
        tabNameExists = true;
        targetTab = numberOfTabs;   
    }
}); 
//If the tab is not already open, then open a new tab
if (!tabNameExists){
    var label = tabTitle.val() || document_name,
    id = "tabs-" + documentTabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, js_base_url+'document/'+document_id).replace( /#\{label\}/g, label ) );
    tabs.find( ".ui-tabs-nav" ).append( li );
    tabs.tabs( "refresh" );
    tabs.tabs( "option", "active", documentTabCounter);
    documentTabCounter++;
}
//If the tab is already open, then make it active
else {
    tabs.tabs( "option", "active", targetTab-1);
}       
};`

Upvotes: 0

Views: 812

Answers (2)

iConnor
iConnor

Reputation: 20189

Just hide the other tabs and show the new one like this for example

$('.tab-buttons').on('click', function(){

   $('.tabs').hide();

   // Show the tab you wan't
   $('.the-tab-to-show').show();

   // Or depending on your layout
   $(this).find('.tab').show();

});

Also if you still need to prevent the ajax request then

  1. Add data-loaded="true" to the element when the ajax is done
  2. Only run the ajax request on the tab if it has not got the data-loaded="true" attribute

Upvotes: 2

taylorc93
taylorc93

Reputation: 3716

You could store the information that you pull from AJAX in a variable or hidden html element and only make an AJAX call when there is no information stored in that.

Upvotes: 0

Related Questions