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

Question

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?

Novak

Answer 1

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/

Junta

thanx andrew, life saver... my deadline was 2morro and this had stalled me. thanx again – Novak

anyway if you don't accept my edit)) The cache option is deprecated: jqueryui.com/upgrade-guide/1.9/… – Ossetic

@lvil: I didn't get a chance to review the edit (it's already been rejected), but thanks for the heads up--I'll edit that into the answer. – Junta

Now removed in favour of self-coding the functionality in the beforeLoad event jqueryui.com/upgrade-guide/1.9/… – Concord

Answer 2

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 );
    });
  }
});

Concord

Note that ui.jqXHR.success is deprecated and removed as of jQuery 3.0. Solution above must be modified to use the tab load event to set ui-tab.data('loaded',true) – Adolfoadolph

modified solution posted below – Adolfoadolph

Answer 3

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 );

Krol

caching my tabs works great... u musta misunderstood the question but the code has helped..voted up – Novak

I meant turn "on" caching --- hence the code; glad you figured it out. – Krol

Answer 4

Use a variable to store a boolean value. Initially set at false(ajax not loaded). When your ajax loads set the boolean to true and check the value before each ajax request.

Of course you would need to do a little more work to handle more than one tab.

Faviolafavonian

Answer 5

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/prettyPhoto/dark_square/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Twocolor

Answer 6

As of jQuery 3.0 jqXHR.success was removed, solution (modified form CheekySoft above) is now

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

Adolfoadolph

Answer 7

Wrap your AJAX calls within an if statement which checks for a previous AJAX call, i.e.:

var ajaxed = false

if ( ajaxed == false ) {
    // your ajax call
   $.ajax({
       type: "GET",
       url: "test.js",
       dataType: "html"
       success: function(data){
          // insert html into DOM
          ajaxed = true
       }
   });
}

Renascence

Answer 8

I found the solution for the same problem here is the perfect answer and please prefer the link below:

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

    ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
    });
}

});

Deprecated ajaxOptions and cache options added beforeLoad event

Bromide