0

我有几个指向单个 AJAX url 的链接。对于每个带有模式的请求，我可以将其加载到单个#DIV 中：为每个链接加载和删除。现在，由于我只需要一个 url，我试图避免删除和重新请求程序。

我有两种情况，仍然存在疑问并且非常需要建议来处理它们：

  1. 创建不同的容器#DIVS，以便在将单个 url 加载到每个 DIV 时它们不会发生冲突，并继续进行常规隐藏和显示（不破坏/删除）。这意味着每个链接都请求相同的 url 并将相同的 AJAX 加载到每个容器#DIV 中。非常消耗，因为每个链接一次又一次地加载相同的 AJAX。

  2. 只创建一个#DIV 并将这个#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);
         });   
    });

这也将结果应用于第二个元素。

如果您尝试仅在单击每个链接时显示相同的内容，则最好执行以下操作：

  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 回答