Cache JQuery UI-Tabs Ajax loaded Content?

Question

I use JQuery UI Tabs. What I do is load the content of each tab with Ajax as it is suggested here: http://jqueryui.com/tabs/#ajax

Problem: If the user clicks on Tab A, then Tab B and then Tab A again, the content of Tab A is loaded twice.

Is it possible to cache the content of the JQuery UI Tabs?

Answer 1

Try using the beforeLoad event:

$(".selector").tabs({
    beforeLoad: function(event, ui) {
        // if the target panel is empty, return true
        return ui.panel.html() == "";
    }
});

---

beforeLoad( event, ui )

Triggered when a remote tab is about to be loaded, after the beforeActivate event. Can be canceled to prevent the tab panel from loading content; though the panel will still be activated. This event is triggered just before the Ajax request is made, so modifications can be made to ui.jqXHR and ui.ajaxSettings.

Note: Although ui.ajaxSettings is provided and can be modified, some of these settings have already been processed by jQuery. For example, prefilters have been applied, data has been processed, and type has been determined. The beforeLoad event occurs at the same time, and therefore has the same restrictions, as the beforeSend callback from jQuery.ajax().

Answer 2

I have come across this before.

Add a timestamp to the server side url. This way each time the page is reloaded and the server is contacted, there is a new timestamp. But when you are clicking around on the client side, IE doesn't reload the url since it is the same and only changes on page reloads/navigating away and back.

php:

$time = time();
$tabs = "<div id='tabs'>
<ul>
<li><a href='Home.php?viewIsActive=true&tab=true&timeStamp=" . $time . "'> Active </a></li>
<li><a href='Home.php?listAll=true&tab=true&timeStamp=" . $time . "'> List All </a>    </li>
</ul>
</div>"

So, for ajax requests that you only want loaded once per page refresh/navigation, use server side timestamp.

Answer 3

$(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/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(
                "Please Reload Page or Try Again Later.");
            });
        }
    });
});