En ajoutant un deuxième paramètre à la méthode load(), il est possible de limiter le chargement de données en utilisant un sélecteur jQuery :
load('URL sélecteur', function() {
//une ou plusieurs instructions exécutées après le chargement des données
});
Où URL est l'URL de l'élément à charger et sélecteur est un sélecteur jQuery sans le signe $ et sans les parenthèses.
Exercice
En partant du code de l’exemple précédent (load.htm), insérer trois boutons dans le corps du document et associez-leur un gestionnaire d’événement qui charge les parties #p1, #p2 et #p3 de ce document (texte2.htm) :
<!DOCTYPE html>
<html>
<head>
<title>Texte</title>
</head>
<body>
<p id="p1">
<font size="3"><i>Lorem <b>ipsum</b> dolor sit amet, consectetur adipiscing elit. Sed non
risus. Lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
ligula massa, varius a, semper congue, euismod non, mi. Proin
porttitor, orci nec nonummy molestie, enim est eleifend mi, non
fermentum diam nisl sit amet erat. Duis semper.</i></font>
</p>
<p id="p2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.
</p>
<p id="p3">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</body>
</html>
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chargement AJAX avec load()</title>
<style>
#zone {
width: 300px;
height: 315px;
border-style: solid;
border-width: 3px;
border-color: black;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<button id="charge-texte1">Charger le texte #p1</button>
<button id="charge-texte2">Charger le texte #p2</button>
<button id="charge-texte3">Charger le texte #p3</button>
<div id="zone"></div>
<script>
$(function() {
$('#charge-texte1').on('click', function(){
$('#zone').load('texte2.htm #p1');
});
$('#charge-texte2').on('click', function(){
$('#zone').load('texte2.htm #p2');
});
$('#charge-texte3').on('click', function(){
$('#zone').load('texte2.htm #p3');
});
});
</script>
</body>
</html>