0

アイテムAのリストがあり、各アイテムAにはいくつかのアイテムBがあります。AのアイテムBのビューは、jQueryUIタブを使用したタブのようなものです。コントローラーを使用してページ内のアイテムAのリストをロードしており、それぞれのアイテムAの各アイテムBはAJAXによってロードされます(データベース内の別のテーブルにあり、アイテムAの各IDを渡す必要があるため)。AJAXを使用してhtmlコンテンツをロードすると、明らかにUIタブを適用できないため、$(document).readyに修正するためのsetTimoutを配置します。問題は、リストにアイテムAがたくさんある場合、setTimeoutにもっと時間が必要なことです。これは、AJAX呼び出しの後に入れてみます(以前はfancyboxプラグインで解決しました)。すべてのタブが表示されますが、それらは機能しません。

注:タブのグループが複数あります。

タブのようにアイテムBのリストを表示するために各アイテムAで呼び出す関数。

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

同様に、2つの別々のクエリを実行する必要がある場合は、ajax呼び出しをネストできます。したがって、AのデータをAjax呼び出しとしてクエリし、Aが成功すると、Bに対して別のAjax呼び出しを実行します。私の考えでは、結合を実行してデータベースレベルでデータを取得する(オーバーヘッドが少ない)方法をお勧めしますが、必要に応じてajax呼び出しをスタックすることもできます。

于 2012-06-08T21:28:44.443 に答える