Ajax sur boutons radio et pb affichage / rafraichissement de deiv [Résolu]

[Mr. B]

Lu à tous,

Néophyte en Ajax et dans le métier de developpeur. En pleine apprentissage et découverte d'Ajax je cherche une personne qui pourrait me renseigner, l' énoncé du probleme peut paraitre long
mais je pense réellement que la réponse sera rapide.Tout d'abord j'espere etre dans la bonne section car c'est une première pour moi.
Je cherche en fait le moyen de recharger la div de mes boutons radio à chaque click sur un de ceux-ci et d'afficher ce que je veux (un nombre par ex ou du texte) à chaque fois et donc
recharger la div à a chaque utilisation de ceux-ci SANS BOUTON SUBMIT !!!!
C' est à dire que j'ai deux boutons radio comme ceux ci-dessous, à qui j'ai attribué un texte que je veux voir AFFICHER à chaque fois que
je choisis un bouton.

Code :

1
2
3
4
5
6
7
8
<?php   
	if (btn_1 == true){
		echo "btn 1 marche";
	}
	if (btn_2 == true){
		echo "btn 2 marche";
	}
?>

Code :

1
2
3
4
<div id=ma_div>
   <input type="radio" name="radio_1" value="oui" id="btn_1" onclick="go()" CHECKED> // on click par default le btn_1
   <input type="radio" name="radio_1" value="non" id="btn_2" onclick="go()" >
</div>

Aprés m'etre renseigne sur le net je me suis dirigé vers Ajax (meme si je suis un néophyte en ce domaine, enfin pour l'instant...)
afin de justement pouvoir recharger la div qui m'intéresse (et pas forcement la page) et bien sur SANS bouton submit.J' ai trouvé la fonction
qui me permet justement de recharger ma page sur le site de devellopez.com, à savoir ici la fonction xhr() et la méthode go() qui appel ici ma page test.php .Le problème est que la fonction
que j'utilise ne semble pas comprendre que je veux recharger (et je ne peux pas la blamer je ne lui dit pas de le faire..)et je ne sais comment lui indiquer la div sur laquelle je veux qu' il recharge et affiche.
et c'est pourquoi je me dirige vers vous.Car l' exemple montre comment recharger la page et non une div en particulier.
J' ai fait un test basique d'affichage afin de voir si la page se rechargeait bien et c'est le cas -> alert("la page s'est bien rechargée");


Ma fonction ajax:

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
27
28
29
30
31
32
33
34
35
36
37
<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
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr()
				// On définit 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","test.php",true);    // ici test.php est ma page qui contient mes boutons
				xhr.send(null);
				// alert("la page s'est bien rechargée");
			}
		</script>

On retrouve bien sur l' appel à la fonction dans l' evenement onclick de mes boutons.Je me doute qu' il faut spécifier à un endroit l'id du
bouton qui m'interesse (que je veux voir recharger) mais je ne sais comment faire.Est ce que l'on pourrait attribuer un paramètre a cette méthode go() par exemple comme value
et remplacer le " xhr.send(null)" par "xhr.send(value)" qui renverrait ma valeur et en rajoutant this.value en parametre a ma methode dans mes bouton.J' ai essayé comme ceci mais en vain.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function go(value){  // <-- value en paramètre
				var xhr = getXhr()
				// On définit 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","test.php",true);    // ici test.php est ma page qui contient mes boutons
		    	xhr.send(value); //<-- value en paramètre
				// alert("la page s'est bien rechargée");
			}
		</script>

l' appel dans mes boutons:

Code :

1
2
3
4
 div id=ma_div>
   <input type="radio" name="radio_1" value="oui" id="btn_1" onclick='go(this.value)' CHECKED> 
   <input type="radio" name="radio_1" value="non" id="btn_2" onclick='go(this.value)' >
</div>

Mais cela ne marche pas. Si quelqu'un pourrait me conseiller ou m'aiguiller dans la bonne direction cela me permettrait d'avancer.
Encore merci.

[andry.aime]

Bonjour,
Quand utilise la méthode GET, les paramètres doivent être passés par l'URL.

Code :

1
2
xhr.open("GET","test.php?btn="+value,true);    // ici test.php est ma page qui contient mes boutons
		    	xhr.send();

Pour le récupérer coté PHP.

Code :

1
2
3
4
5
6
7
8
9
<?php
btn=$_GET["btn"]   
	if (btn == "oui"){
		echo "btn 1 marche";
	}
	if (btn_2 == "non"){
		echo "btn 2 marche";
	}
?>

[brachior]

Ton problème est simple, mais tu ne fais que reprendre des exemples sans les comprendre, donc tu t'embrouilles et te sens perdu =/

Juste pour répondre rapidement à tes erreurs,
La méthode send peut prendre en paramètre des données à envoyer au serveur
Et n'est utile que si l'envoi se fait en POST et non en GET ...

Pour changer la valeur d'une div, ce n'est pas de l'AJAX mais du Javascript,
AJAX te permet d'effectuer des requêtes asynchrones sur le serveur (et bien d'autres choses ^^),
Regarde du coté de innerHTML

[Mr. B]

Lu merci à vous deux et plus particulièrement à aimé. On récupère les données via l' url, principe du formulaire.. Il est vrai qu' il est indispensable de faire une pause de temps en temps.
Et brachior merci de tes conseils avisés mais j'ai déjà commencer un tuto sur Ajax hier (oui c'est récent) et tout seul parfois comme tu le dis on s'embrouille et on se sent perdu mais c'est pour ca que j'ai demandé conseil. Ensuite je ne cherche pas a changer la valeur d'une div mais plutot à la rafraichir dès le click d'un bouton.
Encore merci à aimé.

[brachior]

Envoyé par Mr. B

[...] je ne cherche pas a changer la valeur d'une div mais plutot à la rafraichir [...]

Qu'est ce que rafraichir si ce n'est écrire le nouveau par dessus l'ancien, et de ce fait changer une valeur ? Oo

Ta fonction go n'effectuant qu'un simple alert, je ne vois pas comment tu rafraichis ta div, c'est pourquoi je te parlais de ça.
Maintenant si le code fourni n'est pas complet, je ne suis pas devin ^^