How to make Jquery nested Ajax tabs

Question

Could anybody help me out to get nested tabs through ajax calls.

Description: I am having Jquery Tabs with ajax option

CODE:

$( ".has_ajax_tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html("<h3>OOPS...Something went wrong!</h3> Couldn't load this tab at this time. Please try again later.");
            }
        },
        spinner: "Loading...",
        fxSlide: true
    });

HTML CODE:

 <div id="tabs" class="has_ajax_tabs">
                                 <ul>
                                     <li><a href="#tabs-1">Profile Details</a></li>
                                     <li><a href="nestedTabsLink.php">Users</a></li>
                                 </ul>

 <div id="tabs-1">  Profile Details form here </div> </div>

nestedTabsLink.php loaded by Ajax call

<div id="tabs-nested" class="has_ajax_tabs">
    <ul>
        <li><a href="#tabs-inner1">Inner Tab1</a></li>
        <li><a href="#tabs-inner2">Inner Tab2</a></li>
    </ul>
    <div id="tabs-inner1">
        Nested Tabs1
    </div>
    <div id="tabs-inner2">
        Nested Tabs2
    </div>
</div>

ERROR: The loaded nestedTabsLink.php file also having tabs which is not working if loaded by Ajax. Without Ajax it works perfect. Can anybody help me to get the code snippet/guidelines?

Thanks

score 0 · Answer 1 · answered Nov 08 '11 at 13:53

0

So if you would op the nestedTabsLink.php file you would also have a tab-setup right?

Using ajax, the javascript inside the requested page isn't parsed. The best way to solve this is by adding a function that runs after the page was loaded. So you could copy the code for the tabs inside nestedTabsLink.php and paste it inside the complete-event of the ajax call.

answered Nov 08 '11 at 13:53

Stijn_d

1,078
9
20

I hope repetition of code is not a good idea. There should be some workaround there. Any idea? Thanks – Nov 09 '11 at 06:04
You could try to user eval() to parse the javascript, by running trough all the – Stijn_d Nov 09 '11 at 09:07

score 0 · Answer 2 · answered Nov 08 '11 at 13:54

0

First of all, you'd better increase your accept rate.

If I understand right, you are not loading scripts that perform "tabs magic" on the second group of tabs. There are an option to make it work of course, but I would suggest revising an overall architecture. You shouldn't load HTML markup via AJAX calls, as it's redundant. Load just the data needed and than render the data with JS as you need.

answered Nov 08 '11 at 13:54

J0HN

26,063
5
54
85

1

Second of all, nested tabs is bad UI-design http://homepage.mac.com/bradster/iarchitect/tabs.htm – JP Hellemons Nov 08 '11 at 14:09
Agreed. but in my case page is so lengthy that have to be divided into two sections for better accessibility and load balance through ajax. So I would like to keep tabs to load through ajax. And also it is only two tier tabbed structure. – Nov 09 '11 at 06:02

How to make Jquery nested Ajax tabs

2 Answers2