Question

我有一个项目列表A，每个项目A都有一些项目B. A中项目B的视图类似于使用jQuery UI选项卡的选项卡。我正在使用控制器加载页面中的项目A的列表，并且相应项目A的每个项目B由AJAX加载（因为它们在数据库中的另一个表中，并且我需要传递项目A的每个ID）。如果您使用AJAX加载html内容显然无法应用UI选项卡，那么我将一个setTimout用于修复$（document）.ready。好吧问题是，如果我在列表中有很多项目A，我需要更多的时间在setTimeout中，我会尝试放在AJAX调用之后（以前用fancybox插件解决一些），并且工作所有选项卡都显示但是他们不工作。

注意：我有多个标签组。

我在每个项目A中调用的功能，用于显示列表o项目B，如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>

准备好的功能：

    <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>

非常感谢你！

Answer 1

我认为你做了一些不完全正确的假设。

首先，在我看来，整个问题可以用更好的SQL解决。当你说“我得不到B，直到我有一个来自A的ID”这听起来像是一个连接查询的主要案例。这本身就可以使整个问题变得更加容易。

所以：

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

关于设置超时问题，你是对的，你不能在不存在的DOM上加载标签。但是在Ajax调用本身中有一个更简单的解决方案 - 只需在ajax成功中实例化选项卡，您可以在其中获取选项卡本身的内容：

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 */              
            }
        });

同样，如果你必须做两个单独的查询，你可以嵌套ajax调用....所以你在A中查询数据作为Ajax调用，然后在A的成功中你为B做另一个Ajax调用。同样，我认为首选的方法是简单地在数据库级别获取数据进行连接（减少开销），但是如果需要，你当然可以堆栈ajax调用。

AJAX之后的jQuery UI选项卡

1 个答案: