jQuery/AJAX - Comment charger plusieurs divs et titre de page?

Question

J'ai essayé ce code (cela fonctionne, mais lorsque l'on clique 3-4 fois, mes frezzes navigateur, peut-être en raison de variables énormes):

var elements = [ "content", "menu" ]; 
$.get(
    url, 
    function(data) 
    { 
     // Elements 
     var resp = $("<div></div>").html(data); 
     $.each(
      elements, 
      function(i, v) 
      { 
       var content = resp.find("#"+v); 
       $("#"+v).html(content); 
      } 
     ); 
     // Title 
     var regexp = /<title>(.*)<\/title>/i; 
     document.title = data.match(regexp)[1]; 
     // Change URL 
     history.pushState({ page: url }, url, url); 
     // Hiding loading div 
    } 
); 

testé sur Firefox 6.0, Chrome et Safari 5 ...

Je pense que je peux utiliser la fonction .load(), mais je ne peux pas charger plusieurs divs avec une seule charge ...

Et le code suivant ne fonctionne pas:

var resp = $("<div></div>").load(url+" #content, #menu"); 
var content = resp.find("#content"); 
$("#content").html(content); 
var menu = resp.find("#menu"); 
$("#menu").html(menu); 

Merci pour votre aide!

Answer 1

J'ai trouvé un indice pour résoudre mon problème ...

En ajoutant un « temps () '(Fonction PHP) dans le #menu div, j'ai remarqué que parfois, jQuery charge la page plusieurs fois sans aucune raison: c'est pourquoi mon navigateur est laggy pendant les chargements ...

Est-ce que quelqu'un a une idée sur la façon de résoudre ce problème?

Merci.

EDIT: Je pense avoir corrigé mon problème! Je ne fermerai pas cette question jusqu'à ce que je suis sûr que :)

Le problème est l'utilisation de plusieurs ID comme:

<div id="content"> 
    <div id="content"> 
    </div> 
</div> 

Lorsque je charge mon contenu. Alors maintenant, le code est:

$.get(
    url, 
    function(data) 
    { 
     // Elements 
     //var resp = $("<div></div>").html(data); <-- EDIT 
      var resp = $(data); 
     $.each(
      elements, 
      function(i, v) 
      { 
       var content = resp.find("#"+v).html(); // HERE IS THE CHANGE, I ADDED .html() 
       $("#"+v).html(content); 
      } 
     ); 
     // Title 
     var regexp = /<title>(.*)<\/title>/i; 
     document.title = data.match(regexp)[1]; 
     // Change URL 
     history.pushState({ page: url }, url, url); 
     // Hiding loading div 
    } 
); 

Answer 2

tourner le cache sur

$.ajaxSetup({ 
    cache: true, 
}); 

reste du code tel qu'il est

var elements = [ "content", "menu" ]; 
$.get(
    url, 
    function(data) 
    { 
     // Elements 
     var resp = $("<div></div>").html(data); 
     $.each(
      elements, 
      function(i, v) 
      { 
       var content = resp.find("#"+v); 
       $("#"+v).html(content); 
      } 
     ); 
     // Title 
     var regexp = /<title>(.*)<\/title>/i; 
     document.title = data.match(regexp)[1]; 
     // Change URL 
     history.pushState({ page: url }, url, url); 
     // Hiding loading div 
    } 
);