actualiser div selon choix bouton radio

[Raph87]

Salut tout le monde,

je suis en train de réaliser le panel admin de mon site afin que la personne puisse changer le contenu facilement. C'est un site multilingue, je stocke mon contenu dans une BDD et je sélectionne ce contenu dans un textarea.

Dans mon formulaire j'ai deux boutons radios : anglais et français
et quand je clique sr anglais, j'aimerais qu'il affiche mon contenu anglais dans mon textarea.

J'espère que c'est clair.
Merci

[andry.aime]

Bonsoir,

Regarde ce tutoriel.

A+.

[Pymento]

Pour résumer, tu dois affecter un

Code :

onChange="javascript:fct(getElementByid('#inputRadio').value);"

Dans ton input radio. tu récupère en même temps l'état de ton radio.

fct() devra appeler ensuite ta requête ajax, recupérer donc le texte anglais ou français selon l'état passé en paramètre.

ensuite tu fait un

Code :

getElementById("#id_de_ta_text_area").value = le_resultat_de_ta_requete_ajax;

et le tour est joué, pour value, je ne suis pas sur, ça peut être innerHtml ect.. à toi de voir.

[andry.aime]

@Pymento
1- Pourquoi des # avant les id dans getElementById
2- onchange attend des instructions javascript donc inutile de mettre le motif "javascript:"
3- Si tu appelles la fonction dans l'onchange de l'input, utilise simplement "this.value".

A+.

[Pymento]

Oups dsl, des réflexes JQuery $('#id')
ouai je rajoute 'javascript:' car on m'avait dis il y a fort longtemps que c'était plus "propre" ça m'est resté ^^
Et effectivement correct pour le this.value, je suis allez trop vite !

[andry.aime]

Envoyé par Pymento

ouai je rajoute 'javascript:' car on m'avait dis il y a fort longtemps que c'était plus "propre" ça m'est resté ^^

Ben non , on ne l'utilise pas dans des évènements qui attend déjà des instruction javascript depuis fort longtemps.

[Raph87]

Salut,

voila je me suis inspiré du tuto sur les listes liés et ça marche plus ou moins.

Je m'explique, j'ai du adapter le code pour que cela fonction sur des boutons radio au lieu des listes, donc déjà je suis pas sur de mon coup

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function go(){
	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){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour radapter le contenu du textarea qui ds la div form
			document.getElementById('form').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","modify_content.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	sel = document.getElementById('lang'); // id des bouton radios
	idauteur = sel.checked;
	xhr.send("idAuteur="+idauteur);
}

mon code de mon textarea et radiobouton

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
38
39
40
41
42
43
44
45
 
 
<form method="post" action="<?php $_SERVER['PHP_SELF']?>">
	  langue affichées: <br />
	  français : <input type="radio" name="langue" value="fr" checked="checked" id="lang" onchange="go()"/> &nbsp;
	  anglais : <input type="radio" name="langue" value="en"  id="lang" onchange="go()"/><br/>
 
	  <div id="form" style="width:650px;">
	  <?php
		$reponse=$bdd->query("SELECT * FROM content_acceuil"); 
		while ($donnees=$reponse->fetch())
		{
	  ?>
			<textarea cols="100" rows="20" name="contentxml" class="ckeditor">
			<?php 
 
 
				if (isset($_POST['contentxml'])) // si mon contenu a été changé, remplace le par le nouveau ds le textarea
				{
					echo $_POST['contentxml'];
				}
				if(isset($_POST['idAuteur']))
				{
					if($_POST['idAuteur']=="fr")
					{
						echo $donnees['acc_fr'];
					}
					else
					{
						echo $donnees['acc_en'];
					}
				}
 
			        else
			       {
 
                                    echo $donnees['acc_fr']; // par défaut affiche le contenu en français
			        }
 
			?>
 
        </textarea>
	 <?php
		}
	 ?>

Si vous pouviez deja me dire si le code est bon ce serait bien.
Merci

[Bovino]

Non, ton code n'est pas bon : un id doit être unique dans la page !

[Raph87]

on fait comment dans le cas des bouton radio ou même des case à cocher (checkbox) ?

[Bovino]

Tu leur a logiquement donné le même name, il suffit donc de boucler sur getElementsByName() pour vérifier lequel est coché.

[Raph87]

je change ceci :

Code :

sel = document.getElementById('lang'); // id des bouton radios

en ceci :

Code :

sel = document.getElementByName('langue'); // id des bouton radios

je dois enlever les id dans mes boutons radio ?

Merci

[andry.aime]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function go(valeur){
	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){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour radapter le contenu du textarea qui ds la div form
			document.getElementById('form').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","modify_content.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("idAuteur="+valeur);
}

Code html :

1
2
français : <input type="radio" name="langue" value="fr" checked="checked" onchange="go(this.value)"/> &nbsp;
	  anglais : <input type="radio" name="langue" value="en"  onchange="go(this.value)"/><br/>

[Raph87]

Salut à tous,

merci pour vos réponses, mon code semble bon après toute les modifs que j'ai faites.
Mais il reste un problème d'affichage.

Lorsque j'arrive sur ma page tout va bien

avant : http://img823.imageshack.us/i/avantz.jpg/

mais lorsque je clique pour passer à l'anglais j'ai tout les éléments qui précède mon div (avant mon textarea) qui se dédouble et mon bouton se met en français tt le temps et quand je coche anglais, le contenu change ms ca se remet en français (pourtant les bouton sont pas dans div qui est sensé se rafraichir.

après :http://img716.imageshack.us/i/apresz.jpg/

je vois pas la bourde.

deso les balise img ne passent pas

[andry.aime]

A la place de onchange, utilise onclick .

[Raph87]

Ca ne change pas.

en fait il refresh et reprend le code la page et l'interprète tout ce qu'il y a avant le textarea d'où les doublons. J'ai mis un id ds le textarea et je vois en effet le code de ma page, et la langue change.

Comment ciblé uniquement le contenu de mon textarea à rafraichir ?
Merci

[andry.aime]

Bonsoir,
Je pense que ta requête AJAX appelle la même page qui contient ton radio bouton.

A+.

[Raph87]

ouè je fais appel à la page elle-même.
On peut pas faire ça ? En get peut -être

[andry.aime]

Re,

La page que tu appelles ne doit retourner que le bout de code à mettre dans le div mais pas une page entière. Tu peux appeler la même page mais tu ne dois retourner que le bout de code à mettre dans le div quand-il s'agit du 'appel via l'ajax.

A+.