affichage conditionnel via Ajax

Version imprimable

Bonjour,

dans un de mes modules, j'ai une liste de personnages dans un tableau. Dans ce tableau, on peut choisir un capitaine,un poste mais aussi des aptitudes.
Les postes allant de 1 à 3 on une possibilité d'avoir une spécialitée, dans le cas contraire (supérieure à 3) ils peuvent avoir la possibilité d'avoir une aptitude de 1er ligne, qui si elle est définit sur oui, permet d'afficher sur la même ligne, la spécialité.

Mon problème est que je n'arrive pas à afficher la selection (oui ou non) dans l'aptitude de 1ere ligne.

Voici mon code et le rendu:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<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(ligne)
			{
				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 rajouter les options a la liste
						document.getElementById('GTD'+ligne).innerHTML = leselect;
 
						if((leselect > 6) && (leselect < 8))
						{
							document.getElementById('APT'+ligne).innerHTML = 'le message que tu veux';
						}
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax/ajaxGTD.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('post'+ligne);
				idpost = sel.options[sel.selectedIndex].value;
				xhr.send("idpost="+idpost);
			}
		</script>
 
<div style="float:left;">
<form name="Ajouter"   id="formID" class="formular"method="post" action="adminlisteaction.php" onsubmit="return Verify1(this.form)">
	<fieldset class="ui-widget ui-widget-content ui-corner-all">
 
		<legend class="ui-widget ui-widget-header ui-corner-all">Date et theme </legend>
							<label>
				<span>Date de la rencontre: (format DD-MM-YYYY)</span>
				<input class="validate[required,custom[date]] text-input" type="text" name="date_rencontre"  id="date_rencontre" />
				<img onclick="displayCalendar(document.forms[0].date_rencontre,'dd-mm-yyyy',this)" style="cursor: pointer; width: 20px;" src="images/calendrier.png">
				</label>
				<label>
				<span>Type de rencontre:</span>
 
				<select name="rencontre" id="rencontre"  class="validate[required]" style="width: 150px;">
				<option value ="">                            </option>
				<option value="tournois"> Tournois</option>
				<option value="match"> Match</option>
				</select>
				</label>
 
								</fieldset>
 
<table cellpadding="3" cellspacing="3">
				<tr>
				<td><center>Capitaine</center></td>
				<td><center>Joueur</center></td>
				<td><center>Poste</center></td>
				<td><center>aptitude 1ere ligne</center></td>
 
				<td><center>Spécialité</center></td>
				</tr>
											<tr>
								<td>
								<center>
								<input type="radio" name="capt" value="cap" />
								</center>
								</td>
 
								</center>
									<input type="hidden" name="id_equip" value="51"/>
								</td>
								<td>
								<center>
										Jack Sparo								</center>
								</td>
								<td>
 
								<center>
								<select name='post' id='post1' onchange='go(1)' onchange='atp(1)'>
									<option value='-1'>Off</option>
									<option value=' 1 ' >1</option><option value=' 2 ' >2</option><option value=' 3 ' >3</option><option value=' 4 ' >4</option><option value=' 5 ' >5</option><option value=' 6 ' >6</option><option value=' 7 ' >7</option><option value=' 8 ' >8</option><option value=' 9 ' >9</option><option value=' 10 ' >10</option><option value=' 11 ' >11</option><option value=' 12 ' >12</option><option value=' 13 ' >13</option><option value=' 14 ' >14</option><option value=' 15 ' >15</option><option value=' 16 ' >16</option><option value=' 17 ' >17</option><option value=' 18 ' >18</option><option value=' 19 ' >19</option><option value=' 20 ' >20</option><option value=' 21 ' >21</option><option value=' 22 ' >22</option>								</select> 
								</center>
 
								</td>
								<td>
								<center>
								<div id='APT1' style='display:inline'>
								</div>
								</center>
								</td>
								<td>
								<div id='GTD1' style='display:inline'>
 
								</div>
								</td>
 
							<br/>							<tr>
								<td>
								<center>
								<input type="radio" name="capt" value="cap" />
								</center>
								</td>
 
								</center>
									<input type="hidden" name="id_equip" value="51"/>
								</td>
								<td>
								<center>
										Jones Davy								</center>
								</td>
								<td>
 
								<center>
								<select name='post' id='post2' onchange='go(2)' onchange='atp(2)'>
									<option value='-1'>Off</option>
									<option value=' 1 ' >1</option><option value=' 2 ' >2</option><option value=' 3 ' >3</option><option value=' 4 ' >4</option><option value=' 5 ' >5</option><option value=' 6 ' >6</option><option value=' 7 ' >7</option><option value=' 8 ' >8</option><option value=' 9 ' >9</option><option value=' 10 ' >10</option><option value=' 11 ' >11</option><option value=' 12 ' >12</option><option value=' 13 ' >13</option><option value=' 14 ' >14</option><option value=' 15 ' >15</option><option value=' 16 ' >16</option><option value=' 17 ' >17</option><option value=' 18 ' >18</option><option value=' 19 ' >19</option><option value=' 20 ' >20</option><option value=' 21 ' >21</option><option value=' 22 ' >22</option>								</select> 
								</center>
 
								</td>
								<td>
								<center>
								<div id='APT2' style='display:inline'>
								</div>
								</center>
								</td>
								<td>
								<div id='GTD2' style='display:inline'>
 
								</div>
								</td>
 
							<br/>			</table>
			</label>
	<input type="hidden" name="id_equipe" value="51"/>
	<center><input type="submit" name="Ajouter" value="Ajouter"/></center>
	</form>

appel de la spécialité:

Citation:

<?php
if(isset($_POST["idpost"]))
{
$poste=$_POST["idpost"];
if( ($poste >= 1) && ($poste <= 3))
{
echo '<input type="checkbox" name="G" value="G"/>G
<input type="checkbox" name="T" value="G"/>T
<input type="checkbox" name="D" value="G"/>D';
}
}
?>

Merci d'avance de vos conseils et remarques.

14/09/2011, 14h58
Invité

Bonjour,
Sans doute tes atp(1 et 2) a virer
<select name='post' id='post1' onchange='go(1)' onchange='atp(1)'>
14/09/2011, 15h06
pi-2r

bonjour,

je l'ai déjà enlevé "onchange='atp(1)' " dans mon code source.
C'était pour voir si cela pouvais résoudre mon problème, mais enfaite non .... :(
14/09/2011, 15h10
Invité

Mais je ne t'ais pas répondue sans tester ...
par contre il y a autre chose , ça semble ne marcher que sur les choix 1 et 2
au dela non 8O

REEDITES
Ah oui normal
if( ($poste >= 1) && ($poste <= 3))
14/09/2011, 16h03
andry.aime

Bonsoir,

Code:

$poste=intval($_POST["idpost"]);

A+.
14/09/2011, 16h55
pi-2r

Bonjour,

Code:

$poste=intval($_POST["idpost"]);

tu peux m'en dire plus ? car là je ne vois pas trop à quoi cela va me servir :$
14/09/2011, 17h10
Invité

Citation:

Envoyé par pi-2r

Bonjour,

Code:

$poste=intval($_POST["idpost"]);

tu peux m'en dire plus ? car là je ne vois pas trop à quoi cela va me servir :$

Il a du poster cela pour garantir que tu ais un entier.
Mais astu testé ton AJAX en choisissant 1 ou 2 dans l'une ou l'autre des saisie
déroulante ?
Pourquoi cela marche chez moi 8O
14/09/2011, 18h14
pi-2r

Chez de mon coté aussi ça marche aussi.
Lorsque que je choisi un poste entre 1 et 3, j'ai bien les valeures GTD qui s'affiche dans la colonne "Spécialité".

Or, je souhaite, que lorsque l'on sélectionne un poste supérieure à 3, qu'il y ai une liste déroulante (genre oui/non) qui s'affiche dans la colonne "aptitude 1ere ligne". C'est ce problème que je n'arrive pas à résoudre....

Escuses j'étais absente ...
donc tu test ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
if(isset($_POST["idpost"]))
{
$poste=$_POST["idpost"];
if( ($poste >= 1) && ($poste <= 3))
{
echo '<input type="checkbox" name="G" value="G"/>G
<input type="checkbox" name="T" value="G"/>T
<input type="checkbox" name="D" value="G"/>D';
}
if( ($poste >= 4) && ($poste <= 22))
{
echo "<select name='xxxx' id='xxxx'>
<option value='oui'>Oui</option>
<option value='non' >Non</option></select>";
}
}
?>

14/09/2011, 20h14
pi-2r

oui, mais si $poste est supérieur à 3, le choix oui/non va s'afficher dans la colonne "Spécialité" et non "aptitude 1ere ligne".... c'est ça mon problème :(

Citation:

Envoyé par pi-2r

oui, mais si $poste est supérieur à 3, le choix oui/non va s'afficher dans la colonne "Spécialité" et non "aptitude 1ere ligne".... c'est ça mon problème :(

Changes ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
if(xhr.readyState == 4 && xhr.status == 200)
 {
   leselect = xhr.responseText;
   if(idpost <4)
    {
     // On se sert de innerHTML pour rajouter les options a la liste
     document.getElementById('GTD'+ligne).innerHTML = leselect;
     document.getElementById('APT'+ligne).innerHTML = "";
    }
  if(idpost > 3)
   {
    document.getElementById('APT'+ligne).innerHTML =leselect;
    document.getElementById('GTD'+ligne).innerHTML ="";
   }
}

Bonjour,

tout d'abord un trés grand merci christele_r, une partie partie de mon problème est résolu :ccool:.
j'ai donc modifier ce qui était à faire, cela m'affiche bien oui/non dans la colonne aptitude 1er ligne, mais quand je selectionne oui cela ne m'affiche rien dans la colone "spécialité" bien que j'ai fait d'autres modif, pour pouvoir l'appelé. c'est-a-dire:

ajout de la fonction aptitude:

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
 
			/*
			**Méthode qui sera appelée sur le click du bouton
			*/
			function aptitude(ligne)
			{
				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 rajouter les options a la liste
						document.getElementById('GTD'+ligne).innerHTML = leselect;
					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax/ajaxATP.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('aptitude'+ligne);
				idaptitude = sel.options[sel.selectedIndex].value;
				xhr.send("idaptitude="+idaptitude);
			}

ajout de l'appel de fonction dans le code AjaxGTD.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
if(isset($_POST["idpost"]))
{
$poste=$_POST["idpost"];
if( ($poste >= 1) && ($poste <= 3))
{
echo '<input type="checkbox" name="G" value="G"/>G
<input type="checkbox" name="T" value="G"/>T
<input type="checkbox" name="D" value="G"/>D';
}
if( ($poste >= 4) && ($poste <= 22))
{
?>
<select name='aptitude' id='aptitude<?php echo $j; ?>' onchange='aptitude(<?php echo $j; ?>)' >
<option value='non' >Non</option>
<option value='oui'>Oui</option>
</select>
<?php
}
}
?>

création de la page ajaxATP.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	if(isset($_POST["idaptitude"]))
	{
		$aptitude=$_POST["idaptitude"];
		if( ($aptitude == 'oui'))
		{
			echo '<input type="checkbox" name="G" value="G"/>G
				  <input type="checkbox" name="T" value="G"/>T
				  <input type="checkbox" name="D" value="G"/>D';
 
		}
	}
 
?>

15/09/2011, 15h41
Invité

Désolée de ne pas t'aider,
je ne comprends rien a ta logique.

Notes bien que mes réponses t'on mis le doit sur les point clés d'un AJAX quelqu'il soit, alors tu part sur tout autre chose, libre a toi, fais ton travail comme chacun, et dés que tu aura une question précise reviens vite :D

Et bien sur postes sur AJAX tu auras le TOP au niveau réponses, du reste ce message devrait y étre :roll: si un modérateur passait dans le coin 8O

Bon courage
Christele
17/09/2011, 00h12
pi-2r

Bonjour,

Citation:

Envoyé par christele_r

Désolée de ne pas t'aider,
je ne comprends rien a ta logique.

bah c'est l'utilisateur qui demande cette démarche.
Dans mon tableau j'ai 5 entêtes: Capitaine, Joueur, Poste, aptitude 1ere ligne et Spécialité.
Quand je sélectionne le poste et que je choisi un nombre entre 1 et 3, la "spécialité" apparait.
Quand je sélectionne un poste supérieur à 3, un choix oui ou non apparait dans la colonne "aptitude 1ere ligne".

C'est là que ce trouve le nouveau problème. Si par exemple je choisi pour un personnage, un poste supérieur à 3 et que je choisi Oui dans la colonne "aptitude 1ere ligne", je souhaite faire apparaitre la spécialité GTD dans la colonne "spécialité".

Si tu comprends cette partie que j'avais modifiée, alors rien ne t'empéches de faire cette troisiemme etape
Comprends ce que j'avais écris plus haut

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
if(xhr.readyState == 4 && xhr.status == 200)
 {
   leselect = xhr.responseText;
   if(idpost <4)
    {
     // On se sert de innerHTML pour rajouter les options a la liste
     document.getElementById('GTD'+ligne).innerHTML = leselect;
     document.getElementById('APT'+ligne).innerHTML = "";
    }
  if(idpost > 3)
   {
    document.getElementById('APT'+ligne).innerHTML =leselect;
    document.getElementById('GTD'+ligne).innerHTML ="";
   }
}

18/09/2011, 00h02
pi-2r

BOnjour,

l'erreur vient de moi (encore une faute d'étourderie :p ).

Encore merci de ton aide :ccool: