Trouble trying to execute jQuery code using jQueryUI dynamic loaded Ajax tabs

Hi

I'm using jQueryUI tabs in index.php file

I have 4 tabs and 4 files. I load each tab content using the jQueryUI Tabs Ajax functionality

Each file has its own jQuery plugins and code, but my problem is that when I load (for example) contact.php in the Contact tab, the jQuery code in contact.php doesn't work or fire.

I've seen the 开发者_C百科.ajaxComplete() function, but it is "dirty", because it forces me to move back all the code from each file to the index.php file, and my point was to separate code and have everything more clean.

Also, google maps doesn't work when being loaded dynamically in jQueryUI Tabs...

As per http://docs.jquery.com

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
}
});

resizeMap() will call Google Maps' checkResize() on the particular map.