1

ajaxを使用してタブ選択でユーザーコントロールをレンダリングしています。

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();

            $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
        }
    });

タブがクリックされるたびにタブがリモートコンテンツを再度ロードしないようにするにはどうすればよいですか。

4

5 に答える 5

1

ajaxの読み込み期間を停止するか、コンテンツが変更されるかによって異なります。以下は、新しいコンテンツのみをロードする例です。それ以外の場合は、varハッシュなしで関数が以前に呼び出されたかどうかをチェックするJSに置き換えてください。

結果をハッシュしてそのローカルを保存し、成功ハンドラーでそれと照合することができます。

JavaScript MD5

var __lastHash = "";
$("#tabs").tabs({
    ajaxOptions: { cache: true },
    spinner: 'Loading ...',
    cache: true,
    select: function(event, ui) {
        var text = $(ui.tab).text();
        __lastHash = MD5Hash(test); //call a hashing API, 
                              //several to choose from, see link above  
        $.ajax({
                type: "POST",
                url: "abc.aspx/GetData",
                data: "{'tabType':'" + text + "'}",
                cache: true,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                        if(__lastHash != MD5Hash(response)) //load if different
                        { 
                            $('#tabsResult').html(response.d);
                        }
                      },
                failure: function(msg) {

                }
            });
    }
});
于 2012-07-26T12:41:49.237 に答える
1

最も簡単な方法は、フラグを使用して、タブがロードされているかどうかをタブに通知することです。たとえば、$（'＃tabsResult'）。html（）を使用します。

$("#tabs").tabs({
        ajaxOptions: { cache: true },
        spinner: 'Loading ...',
        cache: true,
        select: function(event, ui) {
            var text = $(ui.tab).text();
            if(!$('#tabsResult').html())
            {
              $.ajax({
                    type: "POST",
                    url: "abc.aspx/GetData",
                    data: "{'tabType':'" + text + "'}",
                    cache: true,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(response) {
                           $('#tabsResult').html(response.d);
                          },
                    failure: function(msg) {

                    }
                });
            }
});
于 2012-07-26T12:42:58.423 に答える
0

タブコンテンツを1回だけロードする場合は、Ajax経由でロードするのではなく、すぐにHTMLに含めることをお勧めします。

于 2012-07-26T12:39:15.107 に答える
0

jQueryUI AjaxのものでjQueryUIタブを使用したことはありません。MSAjaxを使用して、タブコントロールのペインである更新パネルをロードします。ですから、私の提案は直接役に立たないかもしれませんし、あなたのためにそれを簡単にチェックすることはできません。でも...

jQueryUIタブには、タブが読み込まれたかどうかを通知するフラグが既にあります。フラグは各タブのDIVにあり、ステータスは「false」、「loaded」、「loading」、「error」などです。HTMLですぐに確認できます。または、次のように引き出します。私はこれらのフラグを使用して、タブを「ダーティ」などとして再マークします。ステータスは、タブの最初のロードで「ロード中」であり、その後「ロード済み」です。

show: function (event, ui) {
   var $target = $('#tabs > div:eq(' + ui.index + ')');
   console.log('tab id=' + $target.attr('id') + ' loaded=' + $target.attr('loaded'));
}
于 2012-07-26T13:36:45.270 に答える
0

コードを読みやすくするためだけに、この方法を使用するのが好きです。ui.indexを直接オンにすることもできますが、「どのインデックスがXXXタブですか？」を覚えておく必要があります。これはわずかに遅くなる可能性がありますが、私の意見ではコードの可読性が大幅に向上します

tabM = $('#tabs-detail').tabs({
    'select': function (event, ui) {
      var tabId = $($('>ul li a', this)[ui.index]).attr('href');
      switch (tabId) {
        case '#tabs-detail-sales':
          //no action needed
          break;
        case '#tabs-detail-activities':
          //need to populate a table with related activities
          if ($('#table-activities tbody tr').length === 0) {
              //load code goes here
          }
       }
    }
});
于 2012-07-26T13:49:34.403 に答える