CODEWITHSUNDEEP
jquery-ui
user256034
user256034

Reputation: 4369

jQuery-UI tabs - load just once

I'd like the load content of my tabs thru AJAX, but only on the first tab click. Now the tabs gets loaded every time I click on any tab. Is this possible ?

My html

<div id="tabContainer">
<ul>
<li><a href="/Home/Tab1">Tab1</a></li>
<li><a href="/Home/Tab2">Tab2</a></li>
<li><a href="/Home/Tab3">Tab3</a></li>
</ul>
</div>

EDIT

I cannot use the Cache option,because the content in the tabs may change..

Upvotes: 5

Views: 4774

Answers (4)

Touhid
Touhid

Reputation: 303

$(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.done(function() {
                    ui.tab.data( "loaded", true );
                });
                ui.jqXHR.fail(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });

Upvotes: 11

xinyuan
xinyuan

Reputation: 31

The option "cache" may resolve the problem . 

$( ".selector" ).tabs({
  cache: true 
  //some other options 
});

http://docs.jquery.com/UI/Tabs#option-cache

Upvotes: 3

CeejeeB
CeejeeB

Reputation: 3114

I think you can catch the event, check if the tab already has content and stop the ajax if it does .

e.g.

$('#example').tabs({
    select: function(event, ui) {
         if($('#' + ui.panel.id).html() != ''){
            return;
         }
    }
});

Upvotes: 0

jjclarkson
jjclarkson

Reputation: 5954

You could hide() or remove() the link after performing the load(). Or if you want to allow multiple refreshes of the tab contents you could remove whatever was loaded the first time and re- load().

You could also change the id of the link tag and add a secondary behavior to fall back on.

Upvotes: 0

Related Questions