jQuery UI tabs after AJAX

Question

i have a list of items A and each item A have some items B. The view of the items B in A are like tabs using jQuery UI tabs. I'm loading the list of the items A in a page using a controller and each item B of the respective item A is loaded by AJAX (because they are in another table in the database and i need pass each ID of item A). If you load html content with AJAX apparently the UI tabs cannot be apply, so i put a setTimout for fix that in $(document).ready. well the problem is that if i have a lot of items A in the list, i need more time in the setTimeout, i will try put after the AJAX call (that solve some with fancybox plugin before), and works all tabs are displayed but they don't work.

Note: i have multiple groupd of tabs.

The function that i call in each item A for display the list o items B like tab.

    <script type="text/javascript">
        function cargar(id) {
            jQuery.ajax({
                url: "index.php?controller=trabajo",
                data: "id="+id,
                dataType: "HTML",
                type: "POST",
                success: function(datos) {
                    $('#orden-'+id).html(datos);                
                }
            });
        }
    </script>

The ready function:

    <script type="text/javascript">
    $(document).ready(function() {
        setTimeout(
            function() {        
                var $tabs= $('.tabs')
                    .tabs({ 
                        collapsible: true,
                        selected: -1                        
                    })
                    .scrollabletab({
                        'closable':true,
                    });
                $('#addTab').click(function(){

                });

                $('.ui-tabs-close').click(function(){

                });
            },
            500 //This time must be more big if there is more content.
        );
    });     
    </script>

Thank you so much!

bpeterson76 · Accepted Answer · 2012-06-08 21:28:44Z

2

I think you're making quite a few assumptions that aren't entirely true.

First of all, it seems to me like this whole issue would be solvable with better SQL. When you say "I can't get B's until I have an ID from A" that sounds like it is a prime case for a join query. That itself could make this whole issue much easier.

So:

Select ITEMS FROM TableA INNER JOIN TableB ON TableA.id = TableB.Aid

As to the set timeout issue, you're right that you can't load tabs on DOM that doesn't exist. But there's a MUCH easier solution in the Ajax call itself-- simply instantiate the tabs in the success of the ajax where you get the content for the tabs themselves:

jQuery.ajax({
            url: "index.php?controller=trabajo",
            data: "id="+id,
            dataType: "HTML",
            type: "POST",
            success: function(datos) {
                $('#orden-'+id).html(datos);  
                $('.tabs').tabs();   /*  This is where you'd instantiate the tabs */              
            }
        });

Similarly, if you have to do two separate queries, you can nest ajax calls....so you query for the data in A as an Ajax call, then in the success of A you do another Ajax call for B. Again, the preferred method in my mind is to simply get the data at the Database level doing a join (less overhead) but you certainly can stack ajax calls if necessary.

answered Jun 8, 2012 at 21:28

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

glrodasz Over a year ago

ok, i will try that, i will tell you what happens. Thank you.

glrodasz Over a year ago

Well, i prefer works without the JOIN. Putting the $('.tabs') after the call of AJAX is good, the problem is that i'm working with another plugin called jQuery UI Scrollable Tabs, if i put that selector after AJAX too that plugin doesn't work. .scrollabletab, here is the pag: link

bpeterson76 Over a year ago

@Garethderioth, how you build your queries is certainly your choice, but by avoiding joins you're cutting your site's performance in half every time that query is made. I'd certainly be willing to talk you through that query if you're having trouble understanding how to do it.

Collectives™ on Stack Overflow

jQuery UI tabs after AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related