We have a page that uses jQuery UI Tabs (i.e. we have a list of anchor tags, when one is clicked, a div with the same id is shown, and some other divs are hidden). Both the list of anchors and the divs are dynamically refreshed via an Ajax call (to filter the information shown in the tabs), but when the new content arrives (as HTML fragments), the functionality of the tabbed interface is broken (i.e. all the divs are shown, rather than a single one, and they don’t respond to the clicks on the anchors). It seems that the Ajax call destroys the tabs and they aren’t rebuilt by another call to the jQuery UI .tabs() function. Any ideas?
$('#btn_submit').click( function() {
$('#anchors').load('index.php/ajax/show_participants', {
'Gender': $('#gender').val(),
'Family': $('#family').val(),
'Social': $('#social').val(),
'Household': $('#household').val(),
'Age': $('#age').val()
},
function() {
$('#content_divs').load('index.php/ajax/show_details', {
'Gender': $('#gender').val(),
'Family': $('#family').val(),
'Social': $('#social').val(),
'Household': $('#household').val(),
'Age': $('#age').val()
});
});
$('#tabs').tabs();
});