Question

Just started a new job, working with the zend framework, the project is essentially complete its all patch work and adding onto the existing. However I came across a problem recently. The people who initially developed this project just seem to have bolted everything on top of everything on top of everything. So its messy, and its a major task in it of itself to find something to alter it in some way shape form or another.

What my current problem is, is the project is using datatables and jQuery UI. In this particular case I am working with a page that is "Tab" based. And I have multiple datatables on the page one under each tab. Problem is the datatable has to be redrawn on the tabs that are initially hidden on the page load as the tables don’t conform to the element they reside in.

So the original developers have it somewhere in this system where? I can’t find.. where they some how dynamically add $(#element).tabs({}) onto the page on a per page basis. Like I said its rather messy and overtly complicated the way they built this thing. So with that in mind I can’t find the particular tabs function originally being called earlier in the page load so I can alter it to redraw the table on load.

So what I am wondering is, is there a way to catch a tabs event, that when it shows the tabs content I can just trigger off that event without having to alter the original call to tabs()?

Answer 1

I think the event you want to bind to is:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
 ...
    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab
});

from JQuery UI