StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Got this working. As @Sergey said I need to use 'shown' event. I gave ids to each tab to identify specific tab and load content. Here is the code</p> <pre><code><?php $this->widget('bootstrap.widgets.TbTabs', array( 'id' => 'mytabs', 'type' => 'tabs', 'tabs' => array( array('id' => 'tab1', 'label' => 'Tab 1', 'content' => $this->renderPartial('tab1', null, true), 'active' => true), array('id' => 'tab2', 'label' => 'Tab 2', 'content' => 'loading ....'), array('id' => 'tab3', 'label' => 'Tab 3', 'content' => 'loading ....'), ), 'events'=>array('shown'=>'js:loadContent') ) );?> </code></pre> <p>We have 3 tabs, the content will be loaded using loadContent javascript function.</p> <pre><code><script type="text/javascript"> function loadContent(e){ var tabId = e.target.getAttribute("href"); var ctUrl = ''; if(tabId == '#tab1') { ctUrl = 'url to get tab 1 content'; } else if(tabId == '#tab2') { ctUrl = 'url to get tab 2 content'; } else if(tabId == '#tab3') { ctUrl = 'url to get tab 3 content'; } if(ctUrl != '') { $.ajax({ url : ctUrl, type : 'POST', dataType : 'html', cache : false, success : function(html) { jQuery(tabId).html(html); }, error:function(){ alert('Request failed'); } }); } preventDefault(); return false; } </code></pre> <p></p> <p>Here we get the target, that should be the anchor element of the tab that we clicked, get the href value which should be the id that we configured. Decide the url based on this id, load content and update the div's. The id of div's are the same as href.</p> <p><strong>I haven't found way to load content of the initial active tab, there should be way to fire loadContent function, for now I have used renderPartial to get the content instead</strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload