Reload tab every time it is clicked

[Jianwei]

I know this question has been asked before, however, I didn't see a good answer for it.  Basically, I want my  tab to fire ajax call to get fresh content every time the tab is changed, not just the first time. Is there a configuration or recommended way that I can achieve this?

Jianwei

[Petur Subev]

Hello,

Did you try to achieve it through the reload method of the TabStrip?

var ts = $(tabstrip).data().kendoTabStrip;
ts.tabGroup.on('click','li',function(e){
     ts.reload($(this));
})

Kind regards,
Petur Subev
the Telerik team

[Josh]

I've tried this and it does work.  However now the first click executed the load twice.  Is there a way to determine if content has been loaded before calling reload?

[Petur Subev]

Hello again,

What you can do to avoid multiple requests is to check if the content element is an empty one. Here is a runnable example:

http://dojo.telerik.com/@pesho/ehUne/2

Regards,
Petur Subev
Telerik

 

 

[Josh]

Thanks.  I'll keep this in my back pocket.  I ended up with this which seems to work at the moment,

var tabStrip = $("#defaultMenuItems").data("kendoTabStrip");
for (var idx = 0; ; ++idx) {
    var tab = tabStrip.contentElement(idx);
    if (tab == null)
        break;
    if (tab == e.contentElement) {
        //current tab logic - just let it go
    }
    else {
        //all other tabs
        $(tab).html("");
    }
}

[Josh]

Thanks.  I'll keep this in my back pocket.  I ended up with this which seems to work at the moment,

var tabStrip = $("#defaultMenuItems").data("kendoTabStrip");
for (var idx = 0; ; ++idx) {
    var tab = tabStrip.contentElement(idx);
    if (tab == null)
        break;
    if (tab == e.contentElement) {
        //current tab logic - just let it go
    }
    else {
        //all other tabs
        $(tab).html("");
    }
}