Discussion :

[jexl]

Bonjour à tous,

Je découvre l'Ajax, car j'ai enfin un peu le temps de m'y mettre, et je souhaiterais comme exercice faire un truc tout simple :

J'ai un lien html qui affiche le genre d'un membre : homme ou femme

Si on clique sur ce lien et qu'on est un homme ca le change en femme et vice et versa.

Aussi lorsque je clique sur le lien, ca met à jour la base de données, en envoyant deux variables : l'ID du membre et le genre

Voici ce que j'ai fait pour l'instant :

Dans mon head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
	<script type="text/javascript">
 
		function getXhr(){
			var xhr = null; 
			if(window.XMLHttpRequest) // Firefox et autres
			   xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject){ // Internet Explorer 
			   try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
			}
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   xhr = false; 
			} 
			return xhr;
		}
 
		function genre(){
				var xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						alert(xhr.responseText);
					}
				}
				xhr.open("GET","ajax_membre_genre.inc.php?",true);
				xhr.send(null);
			}
 
 
		</script>

mon html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="contenu_genre" style="float:left;">
<a href="#" onclick="genre();" class="lienGras">Homme</a></div>

et mon php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$sSql="
			UPDATE
				matable
			SET
				genre= ?
			WHERE
				id_membre = ?
		";
		$oSth = $GLOBALS['BDD']->prepare($sSql);
		$oSth->execute(array($_GET['genre'], $_GET['id_membre']));
 
		switch($_GET['genre']){
 
			case 0 :
				// le membre est un homme
				echo '<a href="#" onclick="genre();" class="lienPetitNoir">homme</a>';
			break;
 
			case 1 :
				// le membre est une femme
				echo '<a href="#" onclick="genre();" class="lienGras">femme</a>';
			break;
		}

le php fnctionne, mais ce que je n'arrive pas a mettre en place c'est la liaison entre ces éléments, j'ai cherché un peu partout sur le forum, mais n'est pas trouvé d'explications.

Merci de votre aide

[simotaqi]

bonjour ,
pour faire , tu doit mettre un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('contenu_genre').innerHTML=xhr.responseText;

a la place de alert

ainsi, homme va etre changer selon la respose du code php

[simotaqi]

tu dois egalement specifier les variables $_GET['genre'] et $_GET['id_genre'] de ton code php

essaie plutot:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
xhr.open("GET","ajax_membre_genre.inc.php?genre="+valeurgenre+"&id_genre="+valeurid,true);

a la place de xhr.open("GET","ajax_membre_genre.inc.php?",true);

car tu si tu travail avec la method get , tu dois passer les variable par ton url

[Bovino]

Attention aussi à deux écueils assez courants :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="genre();" class="lienGras">Homme</a></div>

Tu dois mettre un return false après l'appel de la fonction, sinon, le comportement normal du lien sera lancé, ce qui va provoquer un rechargement de la page et casser la requête :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onclick="genre();return false;" class="lienGras">Homme</a></div>

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
switch($_GET['genre']){
 
	case 0 :
		// le membre est un homme
		echo '<a href="#" onclick="genre();" class="lienPetitNoir">homme</a>';
	break;
 
	case 1 :
		// le membre est une femme
		echo '<a href="#" onclick="genre();" class="lienGras">femme</a>';
	break;
}

En faisant comme ça, lorsque tu intègreras le retour dans ta page, le code JavaScript (contenu de l'attribut onclick) ne sera pas évalué et donc pas fonctionnel.
Il faut donc renvoyer uniquement le contenu du lien (homme ou femme) et intégrer cela directement dans le lien existant, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('contenu_genre').getElementsByTagName('a')[0].innerHTML=xhr.responseText;

voire en ajoutant un id à ton lien (la meilleure solution).

[jexl]

Merci pour toutes ces réponses que j'ai misent en place.
Bon c'est pas encore ca, mais plutôt que de vous demander d'ou le problème peut venir, j'aimerai essayer de trouver, c'est comme ca que ca rentre
Mais autant en php, pas de soucis, mais en ajax, comment faites vous pour débuger ?
Sachant qu'au préalable j'ai testé le php qui marche sans soucis ?

Avez-vous des petites techniques qui me feront surement progresser ?

Merci encore.

[andry.aime]

Bonsoir,

Mais autant en php, pas de soucis, mais en ajax, comment faites vous pour débuger ?

Installes Firebug sur ton firefox.
Montres nous ton nouveau code pour qu'on puisse t'aider.