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