Search jQuery

jQuery Forum

Using Tabs With A Single Content Container

in Using jQuery UI • 10 years ago

Basically what I have is a JavaScript driven application that makes extensive uses of Web service calls and jTemplates (I don't condone such a thing, but it was out of my hands). It doesn't really make sense in a lot of cases for us to load all of the tabs up. That basically requires a Web service call per tab, and can be quite expensive both in networking IO and in DOM objects. What makes better sense is for the service call to be made when the tab is opened, for the template to be processed when the service call returns, and for all invisible tabs to be removed from the DOM.

I'm basically trying to use the tab 'select' event to fire off the Web service and load the contents. jQuery UI doesn't seem pleased with this though and the tabs don't seem to function properly. I can't just use an AJAX request in the href attribute as documented because there the templates are client-side and there is pre-processing done to them before being rendered.

I have written a contrived demo on jsfiddle.net: http://jsfiddle.net/X6Ne4/4/

I'll inline it for convenience and site independence (note, you'll need to fill in the blanks for jquery.js, jquery-ui.js, and jquery-ui-theme.css):

<html>
<head>
<title>HALP!!1</title>
<style type="text/css">
.hide { display: none; }
</style>
<link rel="stylesheet" type="text/css" src="jquery-ui-theme.css">
</head>
<body>
<div class="tabs">
<ul>
<li>
<a class="Foo">Foo</a>
</li>
<li>
<a class="Bar">Bar</a>
</li>
</ul>
<div class="contents"></div>
<div class="Foo hide">
<h1>Foo</h1>
<p>All dynamic template filled with AJAX and jTemplates.
</div>
<div class="Bar hide">
<h1>Bar</h1>
<p>All dynamic template filled with AJAX and jTemplates.
</div>
</div>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery-ui.js">
<script type="text/javascript">
Bam = {
'callService' : function(name) {
// Contrived example. No AJAX for brevity.
jQuery("div.tabs div.contents")
.html(jQuery("div." + name).html());
}
};
jQuery(function() {
jQuery("div.tabs").tabs({
'select' : function(event, ui) {
Bam.callService(ui.tab.cssClass);
}
});
Bam.callService("Foo");
});
</script>
</body>
</html>

The problem is basically that the tabs don't function. Does jQuery UI not support this functionality [yet]? I can't think of any workarounds just using #hash-ids or URL hrefs...

Replies(2)

kbwood.au

Re: Using Tabs With A Single Content Container

10 years ago

Can you let the tabs work as expected and fill in the appropriate panel with the Web service content? Something like this:

<script type="text/javascript">
Bam = {
callService: function(id, name) {
jQuery('div.tabs > div').not(id).empty(); // Clear other tabs
jQuery.ajax({url: ..., data: {name: name}, // Fill this tab
success: function(content) {
jQuery(id).html(content);
}});
}
};
jQuery(function() {
jQuery('div.tabs').tabs({
select: function(event, ui) {
Bam.callService(jQuery(ui.tab).attr('href'), ui.tab.cssClass);
}
});
Bam.callService('#Foo', 'Foo');
});
</script>
<div class="tabs">
<ul>
<li><a href="#Foo" class="Foo">Foo</a></li>
<li><a href="#Bar" class="Bar">Bar</a></li>
</ul>
<div id="Foo" class="Foo hide">
<h1>Foo</h1>
<p>All dynamic template filled with AJAX and jTemplates.
</div>
<div id="Bar" class="Bar hide">
<h1>Bar</h1>
<p>All dynamic template filled with AJAX and jTemplates.
</div>
</div>

bambams

Re: Using Tabs With A Single Content Container

10 years ago

Thank you for the response. That looks like it should work just fine.

Once I realized that jQuery UI just isn't designed to do what I wanted directly I decided to workaround it with unused placeholder elements. Basically this:

<script type="text/javascript">
Bam = {
'callService' : function(name) {
jQuery.ajax({
'url' : "...",
'data' : { 'name' : name },
'success' : function(content) {
jQuery(".contents").html(content);
}
});
}
};
jQuery(function() {
jQuery('div.tabs').tabs({
'select' : function(event, ui) {
Bam.callService(ui.tab.cssClass);
}
});
Bam.callService('Foo');
});
</script>
<div class="tabs">
<ul>
<li><a href="#Foo" class="Foo">Foo</a></li>
<li><a href="#Bar" class="Bar">Bar</a></li>
</ul>
<div id="Foo"></div>
<div id="Bar"></div>
</div>
<div class="contents"></div>

I only had a chance to test this with one of the use-cases before I left j0rb, but it seemed to work as intended at first glance (in Firefox). It may be that that your solution is better though. I'll have to weigh them against one another in code to see what works most reliably and cleanly.

Thanks. :)

Top Reply

Response title

Attachments

jQuery Forum

Using Tabs With A Single Content Container

Replies(2)

Re: Using Tabs With A Single Content Container

Re: Using Tabs With A Single Content Container

Statistics

Tags

Actions