CODEWITHSUNDEEP
ajaxtabsjquery-tools
OuzoPower
OuzoPower

Reputation: 278

jQuery Tools Tabs : how to trigger the Ajax loading of the pane content when the tab is selected programatically?

Problem solved

I hesitated to delete the question, but I leave it, with the hope it can help those facing the same problem. If interested, see my answer for a possible solution.

I have a working set of jQuery tools tabs, where the content of each pane is loaded dynamically when a tab is clicked.

The tabs list categories (e.g. Fishes, Fruits, Vegetables). When a page is loaded (e.g. Banana) is provides information about its category (e.g. Fruits) and the right tab is programatically activated.

Almost everything works:

The issue:

Likely, after intercepting the (programmatic) click on the <li> tab, jQuery Tools prevent it to propagate to its child <a> element.

So, I'm looking for a way to either modifify jQuery Tools so that a click on a <li> tab, after being processed by the tabs script, propagate to the child <a> element, or a way to hook some post-processing function to the jQuery tabs to supplement it with additional "to do" things.

Here are my code chunks. The order of the code extracts is respected.

The tabs:

 <ul id="categories" class="subtabs" style="margin-top:1em">
    <li id="category_tab_1"><a href="#">Fishes</a></li>
    <li id="category_tab_2"><a href="#">Fruits</a></li>
    <li id="category_tab_3"><a href="#">Vegetables</a></li>
 </ul>

The panes, for each tab, initially empty:

    <div id="pane_1" class="subpane" style="padding:0px" ></div>
    <div id="pane_2" class="subpane" style="padding:0px" ></div> 
    <div id="pane_3" class="subpane" style="padding:0px" ></div>

Making the tabs work, using jQuery Tools's native feature:

  jQuery("ul.subtabs").tabs(".subpane");   // make the tabs work

Loading data dynamically in the right pane when a tab is clicked (To be more precise, the anchor within it.).

  jQuery("ul#categories > li > a").click(function (event) {        
    // Detect which tab the anchor belongs to, and Ajax load data in the pane.
    jQuery.ajax({
      ...
    });
  });

Detects which category the page belongs to and set the active tab accordingly.

  <?php

    $tabindex = 0;  // default value
    
    switch ($this->CATEGORY){ // From category to tab index
      case 1 : $tabindex = 0; break;  // Fishes
      case 2 : $tabindex = 1; break;  // Stone fruits (go to Fruits tab)
      case 3 : $tabindex = 1; break;  // Pome fruits (go to Fruits tab)
      case 4 : $tabindex = 2; break;  // Vegetables
    };
      
    echo 'var api = jQuery("ul#category_tabs").data("tabs");';
    echo 'api.click('.$tabindex.');';
  ?>

Upvotes: 0

Views: 15

Answers (1)

OuzoPower
OuzoPower

Reputation: 278

Add

`echo 'jQuery("#category_tab_'.$this->CATEGORY.' > a").click()';`

at the end of the PHP chunk.

Upvotes: 0

Related Questions