0

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

注意：我有多个标签组。

我在每个项目 A 中调用的函数用于显示项目 B 的列表，如选项卡。

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

太感谢了！

4

1 回答 1

2

我认为你做了很多不完全正确的假设。

首先，在我看来，整个问题都可以用更好的 SQL 来解决。当您说“在我从 A 获得 ID 之前我无法获得 B”时，这听起来像是连接查询的主要情况。这本身可以使整个问题变得容易得多。

所以：

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 调用。

于 2012-06-08T21:28:44.443 回答