JQuery UI Tabs caching

JQuery UI Tabs caching

By : Side Effect
Date : January 10 2021, 01:47 PM
it should still fix some issue I recently had a use for this as well. Looking into the code, it uses "cache.tabs" with $.data to determine if a tab should be cached. So you just need to grab the element, and set $.data(a, "cache.tabs", false);
I created a quick extension to do just that, assuming the tabs are static. There may be unforseen issues, and can certainly be improved.
code :

Share : facebook icon twitter icon
jquery ui tabs caching conundrum

jquery ui tabs caching conundrum

By : Christy
Date : March 29 2020, 07:55 AM
this one helps. Ok... so it is a complete hack/workaround, but I have a solution. I would love to hear the RIGHT way to do it if someone can direct me, but here is what I did:
In each tab I pre-load a blank iframe.
UI jQuery Tabs - Create More than One Link to Tabs within Tabs on Same Page

UI jQuery Tabs - Create More than One Link to Tabs within Tabs on Same Page

By : user3067086
Date : March 29 2020, 07:55 AM
jquery tabs caching in IE 9

jquery tabs caching in IE 9

By : SandraD
Date : March 29 2020, 07:55 AM
it helps some times For the time being, I have put the following in place and it is working now. Due to changing of the random value, IE 9 now hits the action as well. I am still looking for a better solution and will update as soon as i have found one.
code :
TabsAjaxCall: function (tabToDisplay, isAppendJsRandom) {
        //$("ul.tabs").tabs("div.panes > div", { effect: 'ajax' });

        $("ul.tabs").tabs("div.panes > div", { effect: 'ajax', cache: false, ajaxOptions: { cache: false }, history: true,
            onBeforeClick: function (event, tabIndex) {
                var $tabProgress = $("#tabProgress");

                var $currentTab = $("ul.tabs").children('li').eq(tabIndex).children("a");

                //IE 9 fix
                JSGlobalVars.TabsHrefWithJsRandom($currentTab, isAppendJsRandom);


                var tabPanes = this.getPanes();
            onClick: function (event, tabIndex) {
                //to display specific tab on load
                if (tabToDisplay != "" && typeof tabToDisplay != "undefined") {
                    //remove tab, we only need it during load and not on subsequest loads
                    tabToDisplay = "";
                var tabPanes = this.getPanes();
    TabsHrefWithJsRandom: function ($currentTab, isAppendJsRandom) {
        //ie 9 issue fix
        if (isAppendJsRandom == "" || typeof isAppendJsRandom == "undefined" || isAppendJsRandom == "undefined" || isAppendJsRandom == null)
            isAppendJsRandom = false;
        if (isAppendJsRandom) {
            var href = $currentTab.attr("href");
            var radomVerb = "random";
            if (href != '' && href != '#') {
                var indexRandom = href.indexOf(radomVerb);
                if (indexRandom > 0) {
                    //remove random
                    href = href.substring(0, indexRandom);
                    //remove last index of & and ?
                    var nAnd = href.charAt(indexRandom - 1);
                    if (nAnd == "&" || nAnd == "?") {
                        href = href.substring(0, href.length - 1);

                //get and append random to href
                var random = Math.random();
                if (href.lastIndexOf("?") != -1)
                    href += '&'+ radomVerb + '=' + random;
                    href += '?'+ radomVerb + '=' + random;
                $currentTab.attr("href", href);
How can I have horizontal tabs nested under vertical tabs with jQuery.tabs()?

How can I have horizontal tabs nested under vertical tabs with jQuery.tabs()?

By : Ganesh S
Date : March 29 2020, 07:55 AM
Hope that helps The problem is in the CSS.
The CSS provided by the jQuery UI site doesn't select direct descendants. Their CSS is applying the vertical classes to all matches. To be able to have a nested horizontal tabs inside of vertical tabs, you need to modify the jQuery UI classes to only select direct descendants by applying >.
code :
.ui-tabs-vertical {
    width: 55em;
.ui-tabs-vertical > .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
    width: 12em;
.ui-tabs-vertical > .ui-tabs-nav li {
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
.ui-tabs-vertical > .ui-tabs-nav > li > a {
.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
.ui-tabs-vertical > .ui-tabs-panel {
    padding: 1em;
    float: right;
    width: 40em;
$(function () 

    $("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");

jQuery UI Tabs Caching v1.10.3

jQuery UI Tabs Caching v1.10.3

By : Abhinav Singh
Date : March 29 2020, 07:55 AM
Any of those help With default Ajax tab loading, every time you switch back to a tab it reloads the Ajax. The "cache" parameter was there to prevent that, but it's been deprecated now but as jQueryUI point out you can roll your own with beforeLoad.
You seem to be trying to get the browser to cache the Ajax itself. However the tab's contents are already there in the DOM, so really you don't need to make an Ajax request at all, when you return to a previously loaded tab.
Related Posts Related Posts :
  • posting to aweber with jQuery
  • Why does not Modal dialog work with latest version of Jquery?
  • Cancel draggable dragging
  • Validate subset of a form using jQuery Validate plugin
  • jquery how to make insertBefore work only once, on first click?
  • jquery appendTo form
  • Jquery code working in all browsers apart from FF
  • jquery syntax function(){mylongfunc();} vs. just mylongfunc();
  • jQuery.load doesn't execute javascript with document.write
  • Animate hidden hyperlink to display:block
  • jquery ajax call returning error when its not an error
  • Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists
  • Adding link with existing href
  • jquery cycle plugin divs always stacked problem
  • jquery toggle and fade in one function?
  • Drag and Drop into another div and move in the div only using jquery
  • Links in rounded boxes? In ALL browsers (yep included IE8)
  • How to change the content of the Span using jQuery?
  • jQuery; combine user click and :checked
  • jQuery - Finding the element index relative to its container
  • jQuery .each() function. Resetting the index?
  • jQuery storing settings
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk