je suis en train de suivre le cours sur jQuery et je débute la partie avec Ajax.
J'ai Wamp d'installé et il fonctionne bien, il est vert (quand j'ouvre l'index.html d'apache, cela affiche bien "It Works").
Mon problème vient du faite que je n'arrive pas à faire fonctionner la fonction "load()".
ma page : charger-contenu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>charger contenu avec Ajax</title>
<style type="text/css">
div { width: 400px; height: 300px; float: left; margin: 5px; }
#premier { background-color: #F6E497; }
#troisieme { background-color: #CAF1EC; }
#quatrieme { background-color: #F1DBCA; }
img {
height: 200px;
width: 295px;
}
</style>
</head>
<body>
<button id="majPremier">Mise à jour première zone</button>
<button id="majDeuxieme">Mise à jour deuxième zone</button><br /><br />
<div id="premier">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="deuxieme">
<img src="image_1.jpg">
</div>
<div id="troisieme">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="quatrieme">
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.
</div>
<script src="jquery.js"></script>
<script>
$(function() {
$('#majPremier').click(function() {
$('#premier').load('maj1.html', function() {
alert('La première zone a été mise à jour');
});
});
$('#majDeuxieme').click(function() {
$('#deuxieme').load('maj2.html', function() {
alert('La deuxième zone a été mise à jour');
});
});
});
</script>
</body>
</html>
Ma page maj1.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
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?
</body>
</html>
Donc normalement lors du click du premier bouton je devrais avoir le contenu de mon premier div qui devrait être changé avec le contenu de ma page maj1.html
Pareil pour l'image, qui devrait être changée par l'image de la page maj2.html lors du click sur le deuxième bouton.
Les alerts fonctionnent bien mais le contenu n'est pas changé.
Les pages sont bien toutes dans le même répertoiret situé dans "htdocs"
Si quelqu'un pouvait m'aider à savoir pourquoi ça ne marche pas.
