Monday, April 2, 2012

JQuery Tab Click Custom Event with Ajax load of contents

<div id="setup-tabs">
<ul>
<li><a href="/Admin/Setup/Sites" title="Setup Tabs Sites">Sites</a></li>
</ul>
<div id="Setup_Tabs_Sites"></div>
</div>

<script type="text/javascript">
$('#setup-tabs').tabs({
select: function (event, ui) {
//ajax loads the content from http://yourdomain/Admin/Setup/Sites
var url = $.data(ui.tab, 'load.tabs');

//retrieves the id of the tab clicked
var tabID = $(ui.panel).attr('id');

//format the function name and retrieve the object
var tabClick = window[tabID + "_Click"];

//checks if function exists
if(typeof tabClick == 'function') {
//executes the function
tabClick();
}
return true;
},
load: function (event, ui) {

}
});
function Setup_Tabs_Sites_Click()
{
alert('clicked!');
}
<script>

No comments:

Post a Comment