0

単一の AJAX URL を指すリンクがいくつかあります。パターンを持つリクエストごとに、単一の #DIV にロードできます: リンクごとにロードおよび削除します。必要なのは単一の URL だけなので、削除と再リクエストの手順を回避しようとしています。

私には2つのシナリオがありますが、まだ疑問があり、それらを処理するための提案がひどく必要です:

  1. この単一の URL を各 DIV にロードするときに競合しないように、別のコンテナー #DIVS を作成し、(破棄/削除せずに) 通常の非表示と表示に進みます。これは、各リンクが同じ URL を要求し、同じ AJAX を各コンテナー #DIV にロードすることを意味します。各リンクが同じ AJAX を何度もロードするため、消費量が非常に多い。

  2. #DIV を 1 つだけ作成し、この#DIVを別の .DIV (.ajax-container などの同じ包含クラス) に移動します。

ここで取得しようとしているのは、再利用可能で効率的なコードです。提案や例をいただければ幸いです。

更新、私の質問を明確にするためにこれまでに行われたことを追加しました：

    $('a.browse')
             .click(function(){
                   var t = $(this);
                   t.show();
                   t.parent().prev().find('input.tex').addClass('focus');

                   // @TODO, avoid using remove(), and move this into another .hasPicker class instead to REUSE the same content
                   $('#imgPicker,#closebox').remove();

                   $('.picker-on').removeClass('picker-on');
                   t.parent().prev().find('input.tex').after('<div id="imgPicker"></div>').parent().addClass('picker-on');

                   // @TODO,  Check if #tabs has been loaded somewhere, and try to append it into current link that calls it
                   if ($('#tabs').length) {
                     t.parent().prev().find('#imgPicker').append('#tabs');
                   } else {
                     t.parent().prev().doAjax(); // load the same AJAX content
                   }
                   t.hide();

                   return false;
             });

$('input.tex').wrap('<div class="hasPicker"></div>');

そして、ここに doAjax() のものがあります:

    $.fn.doAjax = function() {
  return this.each(function() {
        // Check for pending request & cancel it
        if (req) req.abort ();

        //showLoading();
        req = $.ajax ({
                url: "?ajax=1",
                method:'GET',
                cache: true,
                success: function (data) {
                        $('#imgPicker').html(data).show().after('<span id="closebox"></span>');
                        $('#closebox').show();
                        $("#tabs").tabs();
                        // reset request
                        req = null;
                },
                 error:function() {
                   alert('Fail to load image collection.');
                }
        });
   });
};

注: #imgPicker は #tabs の動的コンテナーです。以前は ui.dialog を持っていましたが、サイズを見て、リンクとそれを要求するフォームに対して絶対的な単純なカスタム ポップアップ位置だけでそれを実現しました。doAjax() は、同じコンテンツ (#tabs) をロードする単一のリクエストとして個別に処理されます。input.tex は、テキスト フィールド フォームのセット (#tabs 内のすべての項目/オプションを格納できる場所) であり、その後に同じ AJAX URL を介して同じ AJAX コンテンツを要求するリンクが続きます。

私が自分自身を明確にすることができることを願っています。

ありがとう

4

2 に答える 2

2

ですから、あなたが何をしようとしているのかわかりませんが、見てみましょう。

同じコンテンツを複数のコンテナにロードしようとしていますか？または、呼び出しごとに結果が変わりますか？（あなたが「非常に消費的」と言ったので、私は同じ内容を考えています）

そしてこれはjqueryとタグ付けされているので。

あなたはおそらく次のようなことをしています：

1.    $.ajaxSetup ({   
2.        cache: false  
3.    });   
4.    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   
5.       
6.//  load() functions   
7.    var loadUrl = "ajax/load.php";   
8.    $("#load_button").click(function(){   
9.        $("#someDiv").html(ajax_load).load(loadUrl);   
10.    });

だから試してみてください：

    $.ajaxSetup ({   
        cache: false  
    });   
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";   

//  load() functions   
    var loadUrl = "ajax/load.php";   
    $("#load_button").click(function(){   
        $("#someDiv").html(ajax_load)
          .load(loadUrl, null, function(responseText){   
            $("#otherDiv").html(responseText);
         });   
    });

これにより、結果が2番目の要素にも適用されます。

各リンクがクリックされたときにのみ同じコンテンツを表示しようとしている場合は、次のようにした方がよい場合があります。

  var showOnClick = function(){
       var cacheResult = "";
       var ajax_load = "<img src='img/load.gif' alt='loading...' />";
       return function(){

         var divId = "";
         if(this.id === "button1") { divId = "#Div1"; } 
         else if (this.id === "button2") {divId = "#Div2";}

         if(!!cacheResult){
           $(divId).html(ajax_load).load(loadUrl, null, function(responseText){
              cacheResult = responseText;
           });       
         } else {
           $(divId).html(cacheResult);
         }         
       }; 
    }();

    $("#button1").click(showOnClick);
    $("#button2").click(showOnClick);
于 2010-01-25T01:21:21.537 に答える
0

新しくリリースされた Jquery 1.4 を試すことができます。何を言おうとしているのかわかりませんが、jquery 1.4 で.detach()関数を使用できることがわかります。これにより、データが DOM から一時的に削除され、必要に応じて再び使用できるようになります。お役に立てれば。http://api.jquery.com/detach/

于 2010-01-25T03:13:49.603 に答える