Magento’s Product Management GUI in back-end has Tabbed Navigation. There are two types of Tabs implemented there. One type of Tab is normal tab, loading content on page load while other type of tab has its content loaded by “Ajax”. Another interesting thing to note is that once the Ajax loaded tab’s content is loaded it will not “recall” Ajax to load its content, rather earlier loaded tab content is show. If are “confused” then just see how the “Categories” tab of the Product Management works. I successfully used the same “behavior” of tabbed navigation in “front-end”, was easy at the end (always with Magento, when you get it), but I was struggling at the start. So, like my other posts, to share here’s how I used the same type of tab in Magento’s Front-end. First thing is add the Tab’s Java-script file. You can either include by layout or in PHTML file. If you want to do from layout then, [source language=”xml”] <reference name="head"> <action method="addJs"><script>mage/adminhtml/tabs.js</script></action> </reference> [/source] Next thing is to create Tab’s Menu inside UL & LI. Here’s the structure. (Self Explanatory) [source language=”html”] <!– TAB MENU STRUCTURE –> <ul id="page_tabs"> <!– NORMAL TAB –> <li> <a id="normaltab" name="normaltab" class="tab-item-link" href="#"> NORMAL TAB </a> <!– NOTE: class has to be tab-item-link–> <div id="normaltab_content"> Normal Tab HTML</div> <!– NOTE: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –> </li> <!– NORMAL TAB END–> <!– AJAX LOADED TAB –> <li> <a id="ajaxtab" name="ajaxtab" class="tab-item-link ajax notloaded" href="http://example.com/magento/module/controller/action"> AJAX TAB </a> <!– NOTE 1: class has to be tab-item-link ajax notloaded –> <!– NOTE 2: Since this is Ajax Loaded Tab its Anchor should have href value = SOME URL –> <div id="ajaxtab_content"></div> <!– NOTE 1: See the id of this div content it has id equal to its anchor’s (<a>) id + Underscore + content –> <!– NOTE 2: Since its innerHTML will be loaded by by Ajax you can set its innerHTML "blank" –> </li> <!– AJAX LOADED TAB END –> </ul> <!– TAB MENU STRUCTURE END –> <!– TAB CONTENT CONTAINER DIV–> <div id="tabcontainer"></div> <!– TAB CONTENT CONTAINER DIV–> [/source] Now its the time to use the Tabs JS included, like below. [source language=”js”] <script> // Form Key Required for POST AJAX Method var FORM_KEY="<?php echo Mage::getSingleton(‘core/session’)->getFormKey() ?>"; // Set this to false, Guess used for some other purpose in backend, not really required in frontend. var varienGlobalEvents=false; // Initiallizing Varien Tabs /** * @param 1 : UL Menu ID * @param 2 : Target Tab Content ID * @param 3 : Initially Loading Tab’s Id * @param 4 : Don’t know yet, just use as it is (LOL) */ frontend_tabsJsTabs = new varienTabs(‘page_tabs’, ‘tabcontainer’, ‘normaltab’,[]); </script> [/source] Done! You must now have a functioning Tab loading by Ajax and Normal, but yes tab would look good if you add CSS to your Tabs. :P Here is how it works.

1. On load it first copies the tab_content div inside the Target Tab Content ID div.
2. On tabbed menu clicked it checks its class name and if it class name does not have “ajax” it simply shows the its_content div.
3. If the menu clicked has “ajax” then it checks for another class name “notloaded”. So if its ajax and notloaded it then makes an Ajax request and updates the responseText to itsid_content div and then removes the “notloaded” class name for the menu. After that it then displays the itsid_content div, hiding previous ones.
4. If you re-click the “Ajax” typed menu, it will not find “notloaded” class in its menu, then it just shows its_content div.

A good trick, I thought while doing this, using class name to restrict the Ajax call.