 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
By : user3067086
Date : March 29 2020, 07:55 AM
may help you . I think I would handle this differently using the href on the link itself, perhaps with a class to indicate that it is an intra-tab link, to determine which tab to load and setting up the handlers in the tabs create event. code :
$('#tabs').tabs({
create: function(event,ui) {
$('a.intra-tab',ui.panel).unbind('click').click( function() {
var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
$('#tabs').tabs('select',id);
return false;
});
}
});
<div id="tabs">
<ul>
<li><a href="#tabs-1">Home</a></li>
<li><a href="#tabs-2">Alarms</a></li>
<li><a href="#tabs-3">Access Control</a></li>
<li><a href="#tabs-4">Services</a></li>
<li><a href="#tabs-5">Contact Us</a></li>
</ul>
<div id="tabs-1">
<p><span class="bodytext"><a href="#tabs-4" class="intra-tab">Check our services</a></span></p>
</div>
...
$('#tabs').tabs();
$('a.intra-tab').live( 'click', function() {
var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
$('#tabs').tabs('select',id);
return false;
});
|
 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);
jLoaderShow($currentTab);
var tabPanes = this.getPanes();
},
onClick: function (event, tabIndex) {
jLoaderHide();
//to display specific tab on load
if (tabToDisplay != "" && typeof tabToDisplay != "undefined") {
JSGlobalVars.TabOnLoadIndexPerPassedValue(tabToDisplay);
//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;
else
href += '?'+ radomVerb + '=' + random;
$currentTab.attr("href", href);
}
}
},
|
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 {
display:block;
}
.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 ()
{
$("#htabs-outer").tabs();
$("#vtabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#vtabs > ul > li").removeClass("ui-corner-top").addClass("ui-corner-left");
$("#htabs-inner").tabs();
});
|
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.
|
code :
Related Posts :