Question

I have a page that uses jQuery UI Tabs that has both static and dynamic content. I am attempting to cache the tab content after the tab has been loaded, so if the user closes out of the tab and then wants to get back in, I don’t have to make another trip back to the server, and can make the tab show up at the end of the tab listing. This works great in FF, Chrome, Safari, Opera, and IEs 8 and 9. IE7, however, is giving me trouble.

Here is a jsFiddle that I have made that demonstrates the issue. The issue, from what I can tell, seems to be that the beforeLoad function is being called even after the content has been loaded once. I know that I should use the cache: true option for caching, but since the user can close a tab and then try to come back to it, I thought that this might be a little more graceful.

To replicate the problem:

1. Click the Dynamic 1 button. A new tab will appear, Dyn 1, with some content in it
2. Leave the tab (either by closing it, or clicking into a different tab)
3. Click back into the Dyn 1 tab. The content will now show unable to load dynamic tab

This happens both when using jQuery UI’s cache: true option and when altering the tab’s href attribute in the load function, as I have done.

Has anyone had an experience similar to this and/or know what I may have done wrong to cause this?

Thank you. Your help is always appreciated.

Answer 1

I was never able to get an answer as to why this behavior was happening. I did, however, finally find a solution that worked. In case anyone else happens to stumble across this answer with the same issue, this is how I fixed it:

Change:

beforeLoad: function(evt, ui) {
    ui.jqXHR.error(function(jqXHR) {
        ui.panel.html('Unable to load application');
    });
}

To:

beforeLoad: function(evt, ui) {
    ui.jqXHR.error(function(jqXHR) {
        if(jqXHR.statusText !== 'canceled') {
            ui.panel.html('Unable to load application');
        }
    });
}

Why the beforeLoad method is being called even though cache: true OR changing the href of the tab has happened, I am still unsure. I will submit this to the jQuery bug forum and see what they say. If it is a bug, I will try to update this post with the ticket.