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