This is a message.

Loading tab contents with ajax

This is the first demo that shows the built-in effect framework in action. We use an effect called ajax to load the pane contents from an external page:

standalone demo

Of course the loaded content can be any HTML, not just simple text and images as shown here. You can also place script tags in your loaded pages which can possibly initialize other jQuery Tools such as scrollables or overlays. The script tag should be placed below the HTML elements not inside the document.ready() event because that event is not fired for the pages that are loaded with AJAX.

HTML coding

This time we have only a single pane available because we use this same pane for all AJAX requests. This pane does not have any initially content - it is loaded using AJAX. 

<!-- tabs -->
<ul class="css-tabs">
  <li><a href="ajax1.htm">Tab 1</a></li>
  <li><a href="ajax2.htm">Second tab</a></li>
  <li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>
 
<!-- single pane. it is always visible -->
<div class="css-panes">
  <div style="display:block"></div>
</div>

HTML

The above pane structure could just have been a single div element but our CSS file is built so that it depends on a wrapping .css-panes div element.

JavaScript configuration

JavaScript configuration is easy. Just define the effect property: 

  $("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax'});

JavaScript

If you want your page to only be loaded the first time it is opened, then you should tweak your server's HTTP header settings to enable caching.

Alternate configuration

This same effect could have been achieved with a onBeforeClick callback as the second argument which will perform the required activity. This gives you the possibility to use a different effect such as "fade". You can view such a standalone demo here.