Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery-ui tabs (ajax).... stop tab reloading url when tab is re-selected

I am using jquery ui tabs and im adding tabs dynamically using .tabs('add'...). The tabs load a url using ajax. The problem is that everytime i click on another tab then come back... the tab reloads the url. i want the url loaded once.... any ideas?

like image 499
Sir Lojik Avatar asked Feb 22 '11 00:02

Sir Lojik


3 Answers

Please note that the cache property of the tabs options was deprecated in jQueryUI 1.9 and removed in 1.10. See the jQueryUI 1.9 upgrade guide

The recommended way to handle this now, is to use the new beforeLoad event to prevent the XHR request from running.

$( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
    }

    ui.jqXHR.success(function() {
      ui.tab.data( "loaded", true );
    });
  }
});
like image 125
Cheekysoft Avatar answered Nov 13 '22 20:11

Cheekysoft


I think you're looking for the cache option (this defaults to false):

Whether or not to cache remote tabs content, e.g. load only once or with every click.

For example:

$("#tabs").tabs({ cache:true });

Here's a simple demo. Use Firebug or another tool to make sure that the content isn't being retrieved more than once per tab: http://jsfiddle.net/andrewwhitaker/D6qkW/

like image 14
Andrew Whitaker Avatar answered Nov 13 '22 20:11

Andrew Whitaker


Turn on caching on the tabs, or alternatively enable the globabl ajax cache option in jQuery, when something changes that requires a reload, dynamically append something like Math.Rand() to the end of the URL so that it won't cache the next load.

From the jQuery site for tab caching:


Code examples Initialize a tabs with the cache option specified. $( ".selector" ).tabs({ cache: true }); Get or set the cache option, after init. //getter
var cache = $( ".selector" ).tabs( "option", "cache" );
//setter
$( ".selector" ).tabs( "option", "cache", true );
like image 3
iivel Avatar answered Nov 13 '22 18:11

iivel