javascript - Cache JQuery UI-Tabs Ajax loaded Content? - Stack Overflow

admin管理员组

文章数量:1323524

I use JQuery UI Tabs. What I do is load the content of each tab with Ajax as it is suggested here:

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?

I use JQuery UI Tabs. What I do is load the content of each tab with Ajax as it is suggested here: http://jqueryui./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?

• javascript
• jquery
• html
• jquery-ui
• jquery-ui-tabs

Share Improve this question Follow asked Oct 31, 2013 at 16:41 MichaelMichael 33.3k5050 gold badges223223 silver badges374374 bronze badges 2

• What's the exact AJAX code you are using? Unless you save the contents of the tab in your client side script, whenever they switch the AJAX request will always fire. Without seeing the exact code it is hard to tell whether the AJAX request is being properly cached or not. – thatidiotguy Commented Oct 31, 2013 at 16:46
• should be possible for GET with same URL. – Murali Murugesan Commented Oct 31, 2013 at 16:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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().

I have e 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.

$(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.");
            });
        }
    });
});

本文标签： javascriptCache JQuery UITabs Ajax loaded ContentStack Overflow