Magento: Tab click event

Question

Anyone knows a way to listen for clicks on magento tabs with javascript on the backend, say you want to do something everytime someone clicks a tab on the edit customer page. adminhtml/tabs.js has this:

    tabMouseClick : function(event) {
    var tab = Event.findElement(event, 'a');

    // go directly to specified url or switch tab
    if ((tab.href.indexOf('#') != tab.href.length-1)
        && !(Element.hasClassName(tab, 'ajax'))
    ) {
        location.href = tab.href;
    }
    else {
        this.showTabContent(tab);
    }
    Event.stop(event);
},  

But no use, anyone has any idea? I also tried using standard prototype js observer:

Event.observe("product_info_tabs", "click", function () 
{ alert(1); 
});  

Did not do anything either. The solution should not modify the core, since this would add many problems with upgrades and maybe future magento versions.

Answer 1

To listen for clicks on Magento tabs (varienTabs) in the backend, you only need to add your custom observers to the existing ones. Using your example ("edit customer page" in backend) this would be:

var myTabs = $$("#customer_info_tabs li a.tab-item-link");
for (var i = 0; i < myTabs.length; i++) {
    Event.observe(myTabs[i], "click", function (event) {
        var tab = Event.findElement(event, "a");
        // insert your custom code here
        alert(tab.id);
        Event.stop(event);
    });
}

To implement custom observers without changing the core files (breaking upgradability), you could override the appropriate admin controller action.

For example, override Mage_Adminhtml_CustomerController::editAction():

<!-- app/code/local/My/Adminhtml/etc/config.xml -->
<config>
    <modules>
        <My_Adminhtml>
            <version>0.1.0</version>
        </My_Adminhtml>
    </modules>
    <admin>
        <routers>
            <adminhtml>
                <args>
                    <modules>
                        <My_Adminhtml before="Mage_Adminhtml">My_Adminhtml</My_Adminhtml>
                    </modules>
                </args>
            </adminhtml>
        </routers>
    </admin>
</config>

Next, define your custom admin controller:

// app/code/local/My/Adminhtml/controllers/CustomerController.php
require 'Mage/Adminhtml/controllers/CustomerController.php';
class My_Adminhtml_CustomerController extends Mage_Adminhtml_CustomerController
{
    public editAction()
    {
        // copy of Mage_Adminhtml_CustomerController::editAction() code here
    } 
}

Finally, in the overridden action, create an additional text block containing your custom observer script and append that block to the layout. For example at the end of editAction insert something like this:

    :
    $this->loadLayout();
    $oBlock = $this->getLayout()->createBlock('core/text')->setText('
         <script type="text/javascript">
            var myTabs = $$("#customer_info_tabs li a.tab-item-link");
            for (var i = 0; i < myTabs.length; i++) {
                Event.observe(myTabs[i], "click", function (event) {
                    var tab = Event.findElement(event, "a");
                    alert(tab.id);
                    Event.stop(event);
                });
            }
         </script>
    ');
    $this->getLayout()->getBlock('left')->append($oBlock);
    $this->renderLayout();
    :