Mettre à jour deux zones avec une seule requête ajax

Il est aisé avec jQuery (par exemple) de faire une requête ajax pour mettre à jour une portion de la page dynamiquement. On peut vouloir mettre à jour deux zones de la page. C'est facile en faisant deux requêtes. Faire cela en ne faisant qu'une seule requête n'est pas beaucoup plus complexe.

Imaginons la page suivante avec deux div ayant les identifiants div1 et div2. La page contient aussi un lien avec un identifiant update qui déclenchera la mise à jour. On souhaite ajouter du contenu dans les deux div. Le contenu à ajouter dans le div#div1 proviendra du div ayant la classe div1 dans la page ajax.html et le contenu à ajouter dans le div#div2 proviendra du div ayant la classe div2 dans la même page.

Si on voulait insérer tout le contenu de la page ajax.html dans le div#div1, le code javascript correspondant ressemblerait à ça :

$(function() {
   $('#update').click(function(e) {
      e.preventDefault();
      $.get($(this).attr('href'), function(data) {
            $(data).appendTo('#div1');
      });
   });
});

Pour mettre à jour deux zones, il suffit d'utiliser la fonction filter sur le contenu récupéré :

$(function() {
   $('#update').click(function(e) {
      e.preventDefault();
      $.get($(this).attr('href'), function(data) {
         $(data).filter('.div1').appendTo('#div1');
         $(data).filter('.div2').appendTo('#div2');
      });
   });
});

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.