3

最初の2つがajaxでロードされ、最後の2つが静的である4つのタブがある場合、デフォルトで2つのajaxタブをプリロードするにはどうすればよいですか？

今のところ、最初のタブのみが自動的にロードされ、クリックすると2番目のタブがロードされます。2つ目をクリックしたときにコンテンツが既に読み込まれるように、両方を読み込む必要があります。次のように、2番目のタブでloadイベントを呼び出そうとしました。

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 1);
});

これにより2番目のタブが読み込まれますが、奇妙な理由により、最初のタブはまったく読み込まれません。別のタブをクリックして最初のタブをクリックしても、ロードされません。

それから私はこのようなことを試みました：

$(document).ready(function () {
    $("#main-tabs").tabs({
        cache: true
    });

    $("#main-tabs").tabs("load", 0);
    $("#main-tabs").tabs("load", 1);
});

同じ結果、2番目のタブが読み込まれ、最初のタブは読み込まれません。

それらすべて（ajaxのもの）を自動的にロードするにはどうすればよいですか？

4

1 に答える 1

7

問題の原因

2つの事実：

  • jQueryがそのloadメソッドでタブをロードするときに、別のAJAXロード要求が進行中の場合、これは中止されます（おそらく、1つのタブを選択し、AJAXによってロードしてから、ロードする別のタブをすばやく選択した場合、jQueryはあなたがロードしないと想定します両方をロードしたい-最後の1つだけ）。
  • AJAXによってロードされる最初のタブを設定する.tabs("load",0)と、デフォルトで呼び出されて最初のタブにデータが入力されます。

これらの2つの事実を組み合わせると、何が起こっているのかがわかります。load最初に呼び出されて最初のタブにデータが入力され、次に再度呼び出されて2番目のタブにデータが入力されます。2番目のロードは最初のロードをキャンセルします。

考えられる解決策

load同じタブメニューで同時に複数のを発行することはできないため、別の方法を見つける必要があります。このソリューションでは、タブのloadオプションを使用して、各タブを順番にロードします。つまり、1つのロードが終了すると、次のロードが開始されます。それが終了すると、次のものをロードします。

//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];

var loadNextTab = function() {
    if (indexesToLoad.length == 0) return;
    var index = indexesToLoad.shift();
    $("#main-tabs").tabs("load",index);
};

$("#main-tabs").tabs({
    cache: true,
    load: loadNextTab
});

この方法の可能な改善：

  • ロードするインデックスを指定する代わりに、どのタブがAJAXタブであるかを把握し、それらをロードします。
  • loadNextTabを複数のタブ付きメニューで同時に使用できるようにします
  • 他のロードコールバック関数と統合可能にする（それが単語の場合）

何が悪いのかをどうやって見つけたのですか？

firebugを使用する。これはFirefoxのアドオンです。Firebugは、コンソールにすべてのAJAXリクエストを表示します。スクリーンショットが示すように、何が起こっているのかを理解するのはそれほど難しくありませんでした:)私は本当にそれをお勧めします。（ほとんどの主要なブラウザに同様のツールがあります-ChromeまたはF12iIEでctrl+shift + jを押します。）

ajaxリクエストを表示するFirebugコンソールのスクリーンショット

于 2010-09-10T22:55:38.963 に答える