Moving around jquery ajax loaded content to be reusable

Question

I have several links that points to a single AJAX url. I can load it into a single #DIV, for each request with patterns: load and remove for each link. Now since all I need is a single url, I am trying to avoid removal and re-request procedure.

I have two scenarios, still questioning and badly need suggestions to also handle them:

1. Create different container #DIVS so they won't conflict when loading this single url into each DIV and proceed with regular hiding and showing (without destructing/removal). This means each link request the same url and load the same AJAX into each container #DIV. Very consumptive, since each link loads the same AJAX again and again.

2. Create just a single #DIV and MOVE AROUND this #DIV into another .DIV (the same containing class, say .ajax-container).

So what I am trying to get is reusable and efficient code here. Any suggestions and examples would be very much appreciated.

UPDATE, added what has been done so far to clarify my question:

    $('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>');

And here is the doAjax() stuff:

    $.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.');
                }
        });
   });
};

Notes: #imgPicker is a dynamic container for #tabs. I used to have a ui.dialog, but seeing the size then I accomplished it with just a simple custom popup position absolute against the link and form requesting it. doAjax() is handled separately as a single request to load the same content (#tabs). input.tex is a set of textfield forms (where all items/options in #tabs can be stored.) followed by their link that request the same AJAX content via the same AJAX url.

Hope I can make myself clear.

Thanks

Answer 1

you can try the new released Jquery 1.4 I don't know what are you trying to say but all i can see is you can use the .detach() function in jquery 1.4. This remove temporarily the data from the DOM and you can use it again as you want. Hope this helps.http://api.jquery.com/detach/

Answer 2

So, I'm not sure I understand what you are trying to do, but let's see..

You are trying to load the SAME content into multiple containers? Or do the results change per call? (I'm thinking same content since you said "very consumptive")

And since this is tagged jquery..

You are probably doing something like:

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.    });  

So Try:

    $.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);
         });   
    });  

Which will apply the results to the second element as well.

If you are trying to only show the same content when each of the links are clicked, you might be better off doing:

  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);