Question

jQuery UI Tabs – Content via Ajax shows what the Ajax tabs should look like:

<li><a href="ajax/content1.html">Tab 1</a></li>
<li><a href="ajax/content2.html">Tab 2</a></li>

But this Yii example code is for one Ajax and one static tab:

class ROrganizationTabs extends CJuiTabs {
    public $tabs = array(
        'Statistics'=>'content',
        'Main Data' => 
        array('ajax'=>array('user/dashboard.loadone','id'=>1)),
    );
}

Which gives me HTML code like this:

<li class=""><a href="#yw12_tab_0" title="#yw12_tab_0">Statistics</a></li>
<li class=""><a href="#yw12_tab_1" title="#yw12_tab_1">Main Data</a></li>

Both are static, not Ajax.

And I can’t find in the page code (HTML, and JavaScript) where Yii placed the Ajax URL for Ajax tab. Where is it?

Answer 1

As far as I can tell I would say the jQuery plugin does the Ajax and URL handling. Without a detailed look at the JavaScript code there, the man page of the plugin states:

Tabs supports loading tab content via
Ajax in an unobtrusive manner.

The HTML you need is slightly
different from the one that is used
for static tabs: A list of links
pointing to existing resources (from
where the content gets loaded) and no
additional containers at all
(unobtrusive!). The containers’ markup
is going to be created on the fly: […]

http://jqueryui.com/demos/tabs/#Ajax_mode

The complete tabs behaviour is just wrapped in this line

jQuery('#yw0').tabs({'collapsible':true});

Take a look at the Yii playground example: http://www.yiiplayground.cubedwater.com/index.php?r=UiModule/jui/ziiTab