Jquery Tabs and ajax

Drako

Hi,

im trying to add some tabs (loading pages with ajax) to make it easier to navigate through my pages that mostly will contain datatables that are also using ajax to get their data.

i tried this simplest solution, but only the first tab would load the table and also the page was loaded with wrong margins, besides other things, it simply didnt work..

is there any way to do this? i have several pages and i use cookies to validate user input so it would be impossible to put everything on just one page.

thanks!!!

[code]
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Error" );
}
}
});
});




Table1
Table2
Table3
Table4



[/code]

zscally

I'm having the same problem... I can get the correct data to load but the page has to be refreshed twice... from what I can tell you have to bdestroy = true so it clears from the dom but im still getting the wrong result...

zscally

Anybody have a suggestion on this... I've been banging my head on the keyboard for 5 days now... my other option is to actually make the tabs sub pages and refresh the entire page....

GregP

I can't see where dataTable() is being called on the tables. Standard AJAX retrieval of scripts (assuming your script for DataTables is actually returned inside page2, page3, etc) will not execute them, it will only put them into the DOM.

*Personally*, I would consider re-engineering the approach rather than trying to figure out how to then execute the script on retrieval.

Have your 4 tabbed areas ready with empty tables. If there's a bunch of stuff on your page1, page2 etc. pages, you could always fetch them with your tab solution or via PHP includes. But the key is that you don't bother including the scripts on those includes, and the tables are just empty.

The scripts live on the parent page, and you write a new function that is triggered when a tab is clicked. On tab click, switch to the new tab and run dataTable() on the corresponding table. You could include functionality that will detect which tab is active (if the tabs are opened based on cookies, for example), or fire .click() on the tab you need to. There are a bunch of different ways you could work out the actual logic.

That's just the way I would approach it.

---

Whether you pursue something along the lines of what you're already doing, or whether you decide to give my idea a try, remember that you cannot have the same ID for each of your 4 tables.