[AJAX] actualiser div selon choix bouton radio

**Raph87** · 05/04/2011, 16h47

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** · 05/04/2011, 18h02

Bonsoir,

Regarde ce tutoriel.

A+.

**Pymento** · 06/04/2011, 14h39

Pour résumer, tu dois affecter un

Code :

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

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 :

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

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** · 06/04/2011, 15h48

@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** · 06/04/2011, 15h55

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** · 06/04/2011, 16h02

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** · 21/04/2011, 17h02

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 :

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
 
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 :

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
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** · 21/04/2011, 17h08

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

**Raph87** · 21/04/2011, 17h30

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

**Bovino** · 21/04/2011, 17h45

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

**Raph87** · 21/04/2011, 17h53

je change ceci :

Code :

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

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

en ceci :

Code :

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

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

je dois enlever les id dans mes boutons radio ?

Merci

**andry.aime** · 21/04/2011, 21h51

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
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 :

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

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** · 21/04/2011, 22h46

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** · 26/04/2011, 05h19

A la place de onchange, utilise onclick .

**Raph87** · 28/04/2011, 17h44

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** · 28/04/2011, 19h34

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

A+.

**Raph87** · 29/04/2011, 01h07

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

**andry.aime** · 29/04/2011, 05h46

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+.

[AJAX] actualiser div selon choix bouton radio

AJAX

Discussions similaires

Partager

Partager