Chargement de plusieurs fragments avec jQuery .load()

Question

Je souhaite importer plusieurs fragments d'une page Web dans une div mais la seule façon de l'utiliser est d'utiliser plusieurs fonctions .load().

Existe-t-il un moyen de simplifier ce qui suit dans une requête html?

$('.quickview-dialog-left').load('/productlargetest .productlargeimage img'); 
$('.quickview-dialog-right').append('<div class="top"><div class="title"></div><div class="price"></div><div class="delivery"></div></div><div class="bottom"><div class="shortdescription"></div><div class="options"></div><div class="buttons"><div class="buy"></div><div class="viewmore">More Details</div></div></div><div class="close">[x] close</div>'); 
$('.quickview-dialog-right .title').load('/productlargetest .productrighttop h1'); 
$('.quickview-dialog-right .price').load('/productlargetest .productprice'); 
$('.quickview-dialog-right .delivery').load('/productlargetest .productrighttop .stock-delivery'); 
$('.quickview-dialog-right .bottom .shortdescription').load('/productlargetest .shortdescription'); 
$('.quickview-dialog-right .bottom .options').load('/productlargetest .productoption'); 
$('.quickview-dialog-right .bottom .buttons .buy').load('/productlargetest .productSubmitInput'); 

Answer 1

Pas avec une charge mais vous pouvez le faire avec un appel ajax. Vous pouvez charger les résultats de votre ajax (ou get/post) dans un nouveau document, puis retirez les pièces que vous souhaitez.

Regardez la source de la charge de jquery, à l'adresse: https://github.com/jquery/jquery/blob/master/src/ajax.js#L133

jQuery.fn.load = function(url, params, callback) { 
if (typeof url !== "string" && _load) { 
return _load.apply(this, arguments); 
} 

// Don't do a request if no elements are being requested 
if (!this.length) { 
return this; 
} 

var selector, type, response, 
self = this, 
off = url.indexOf(" "); 

if (off >= 0) { 
selector = url.slice(off, url.length); 
url = url.slice(0, off); 
} 

// If it's a function 
if (jQuery.isFunction(params)) { 

// We assume that it's the callback 
callback = params; 
params = undefined; 

// Otherwise, build a param string 
} else if (params && typeof params === "object") { 
type = "POST"; 
} 

// Request the remote document 
jQuery.ajax({ 
url: url, 

// if "type" variable is undefined, then "GET" method will be used 
type: type, 
dataType: "html", 
data: params, 
complete: function(jqXHR, status) { 
if (callback) { 
self.each(callback, response || [ jqXHR.responseText, status, jqXHR ]); 
} 
} 
}).done(function(responseText) { 

// Save response for use in complete callback 
response = arguments; 

// See if a selector was specified 
self.html(selector ? 

// Create a dummy div to hold the results 
jQuery("<div>") 

// inject the contents of the document in, removing the scripts 
// to avoid any 'Permission Denied' errors in IE 
.append(responseText.replace(rscript, "")) 

// Locate the specified elements 
.find(selector) : 

// If not, just inject the full result 
responseText); 

}); 

return this; 
}; 

Compte tenu de cette, note en bas où il charge (self.html(...)) utilise ensuite un sélecteur pour copier à partir du self temporaire au document final . Je ne suis pas sûr de savoir à quel point vous êtes compétent avec jquery, donc je ne suis pas sûr si vous avez besoin de moi pour épeler toutes les étapes ou si cela vous procure ce dont vous avez besoin.

Answer 2

Voici quelque chose à essayer. http://jsfiddle.net/ZWsLA/1/

//do a 'get' here ONCE, this will get your page as an HTML string 
$.get("/HEaUk/1/show/", function(data1){ 

    //store that HTML string in some hidden div local on the page. The reason that I store is locally in a DIV is because jQuery seems to be able to parse it much easier. 
    $("#everything").html(data1); 

    //now you can just use the 'find' method to grab whatever you want from your html and append, or insert into whatever you want. 
    $(".quickview-dialog-left").html(
     //use your normal jQuery selector here to 'find' the elements that you need 
     $("#everything").find('#productlargeimage').text() 
    ); 

    //here is an example with 'append', but at this point you can do whatever you want with your selectors 
    $(".quickview-dialog-right").append(
     $("#everything").find('#productrighttop').text() 
    ); 

});