AJAX之后的jQuery UI選項卡

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