[AJAX] Un menu épuré au max, mais qui ne marche pas !

Version imprimable

Hello tous !

J'ai développé un site en php et pour changer un peu j'aimerai bien transformer mon menu pour que les liens puissent charger le corps de ma page sans recharger entièrement la dite page.

Bref, Ajax est mon ami.

J'ai lu pas mal de tutos et testé beaucoup d'exemples (renvoyant généralement les données dans des textbox) mais quand, sûr de moi, j'ai voulu enfin me lancer dans le développement du menu... ça coince ! C'est frustrant.

Pourtant j'ai trouvé un script tout simple, que j'ai un peu modifié :

Ma page index.html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> <title>Mon premier menu AJAX</title> <script src='ajax.js'></script> </head> <body> <div id='menu'> <ul> <li><a href="javascript:void(0);" onClick='check_content("page.php?id=index")'>Accueil</a></li> <li><a href="javascript:void(0);" onClick='check_content("page.php?id=contact")'>Contact</a></li> </ul> </div> <div id='content'> Conteneur </div> </body> </html>
Ma page ajax.js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 function makeObject(){ var x; if (window.ActiveXObject) { x = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { x = new XMLHttpRequest(); } return x; } var request = makeObject(); var the_content; function check_content(the_content){ request.open('get', the_content); request.onreadystatechange = parseCheck_content; request.send(''); } function parseCheck_content(){ if(request.readyState == 1){ document.getElementById('content').innerHTML = 'Loading...'; } if(request.readyState == 4){ var answer = request.responseText; document.getElementById('content').innerHTML = answer; } }
Ma page page.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <?php $id = $_GET['id']; if ($id == 'index'){ echo "Cette page est l'index"; } else if ($id == 'contact'){ echo "Page des contacts"; } else{ echo "Erreur - Page innexistante"; } ?>
Ce code me semble parfaitement logique mais ne marche pas.
Quand on clique sur un lien, on distingue le chargement du readyState quelques secondes puis rien ne s'affiche...

"the_content" ne contiens rien...
Une idée de la cause ?

Ce script, s'il est corrigé, pourra aider pas mal de personne qui débutent comme moi car il offre une base solide pour commencer à comprendre les mécanismes d'Ajax et je n'ai pas trouvé d'équivalent avec google.

Vous voyez la grosse bourde commise dans ce script ?

merci !

21/05/2009, 15h25
Bovino
Salut,
Code:

1 2 3 4 5 6 var the_content; function check_content(the_content){ request.open('get', the_content); request.onreadystatechange = parseCheck_content; request.send(''); }
Tu as une variable (qui vaut undefined) et un paramètre de ta fonction qui ont le même nom... il ne faut pas croire que passer l'un en paramètre affecte la valeur de ta variable !
21/05/2009, 17h10
DrWilly

Parfait ! Il suffisait donc de supprimer cette déclaration de variable qui était complètement hors contexte !

Mais pour bien comprendre le fonctionnement... pourquoi ça ne marchait pas ?
Cette déclaration était inutile mais en quoi elle empêchait le paramètre de la fonction de prendre la bonne valeur ?

Etant déclaré en global, c'est elle qui avait la priorité par rapport au paramètre et donc l'instruction request.open('get', the_content); utilisait la valeur de la variable globale plutôt que celle du paramètre du même nom ?

Ça parait un peu tiré par les cheveux mais c'est la seule conclusion à laquelle j'arrive..!

Quoi qu'il en soit, merci !
22/05/2009, 09h52
emmanuel.remy

Citation:

Envoyé par DrWilly

Parfait ! Il suffisait donc de supprimer cette déclaration de variable qui était complètement hors contexte !

Mais pour bien comprendre le fonctionnement... pourquoi ça ne marchait pas ?
Cette déclaration était inutile mais en quoi elle empêchait le paramètre de la fonction de prendre la bonne valeur ?

Etant déclaré en global, c'est elle qui avait la priorité par rapport au paramètre et donc l'instruction request.open('get', the_content); utilisait la valeur de la variable globale plutôt que celle du paramètre du même nom ?

Ça parait un peu tiré par les cheveux mais c'est la seule conclusion à laquelle j'arrive..!

Quoi qu'il en soit, merci !

Il y a des fois où j'ai l'impression de ne plus rien savoir ;) , où tout s'effondre !
A la lecture de ton post j'ai eu un doute sur la portée des variables... XMLHttpRequest ou autre induiraient ils un comportement différent ??
J'ai donc recréé (copier-coller) la même structure (index.html, ajax.js, page.php) et ai fait un test: aucun problème, pas de conflit de portée de variable, donc je ne comprends pas ce qui a pu se passer dans ton navigateur...

ERE
22/05/2009, 11h24
Bovino
Bon, je ne suis pas du tout spécialiste de fonctionnement interne de l'interpréteur JavaScript des navigateurs, mais ce qui me vient à l'esprit serait le mécanisme suivant :
- A la création du document, JavaScript crée un contexte global.
- A l'appel d'une fonction, un contexte local est ajouté au contexte global.
- Lorsque l'on tente d'accéder au contenu d'une variable, le navigateur va scanner les différents contexte, mais pas nécessairement dans le même ordre !
- Du coup, les différences constatées sont probablement dues à l'utilisation de navigateurs différents.
Par exemple, lorsqu'une action déclenche plusieurs événements distincts, l'ordre n'est pas nécessairement le même entre IE et FF (par exemple au changement d'un select il me semble ou onchange et onblur sont inversés).
Voir aussi cette explication de comportement similaire proposée par Auteur sur la déclaration des variables.