Ajout de liste deroulante

Version imprimable

Bonjour,
Voilà je suis vraiment novice en javascript et je ne trouve comment ajouter ou supprimer une liste déroulante identique sans la valeur de la précédente liste déroulante à l'aide d'un bouton ajouter et d'un bouton supprimer.

Voila mon code HTML/PHP

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
<div id="strate_1" style="display: block">
	<select name="strate1" id="strate1">
		<option value="-1">- - - Choisissez une strate - - -</option>
			<?php
                                $connexion = mysql_connect($serveur, $admin, $mdp);
                                $sql6 = "SELECT DISTINCT mes.`ID_SARCEP` as strate1, sARCEP.`STRATE_ARCEP` as strate2
                                                FROM `mesures` mes 
                                                INNER JOIN `strates_arcep` sARCEP
                                                ON mes.ID_SARCEP = sARCEP.ID_SARCEP
                                                WHERE mes.`ID_TYPELOCALISATION` = 1";
                                if($connexion != false)
                                {
                                        $choixbase = mysql_select_db($base, $connexion);        
                                        $rech_strate = mysql_query($sql6);
                                        $TstrateID = array();
                                        $TstrateNAME = array();
                                        $nb_strate = 0;
                                        if($rech_strate != false)
                                        {
                                                while($ligneStrate = mysql_fetch_assoc($rech_strate))
                                                {
                                                        array_push($TstrateID, $ligneStrate['strate1']);
                                                        array_push($TstrateNAME, $ligneStrate['strate2']);
                                                        $nb_strate++;
                                                }
                                        }
                                        for($p = 0; $p < $nb_strate; $p++)
                                                {
                                                        echo("<option value=\"$TstrateID[$p]\"".((isset($idStrateARCEP) && $idStrateARCEP == $TstrateID[$p])?" selected":"-1").">$TstrateNAME[$p] </option>");
                                                }
                                        echo("<input type=\"button\" value=\"Ajouter une strate\" onClick=\"addStrate();\" /> </br>");
                                        echo("<input type=\"button\" value=\"Supprimer une strate\" onClick=\"delStrate();\" />");
                                }
                                mysql_close($connexion);
                                ?>
	</select>
</div>

30/05/2012, 10h27
RomainVALERI

Ici, c'est le forum JS ^^ poste plutot le code HTML généré s'il te plait.

Oui pas faux XD

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
    <head>
        <meta charset="utf-8" />
        <title>Test liste</title>
        <script type="text/javascript">
            function show_div(id)
            {
                for (var i = 1; i <= 2; i++)
                {
                    if (i == id)
                    {
                        document.getElementById('titre_' + i).style.display = 'block';
                        document.getElementById('strate_' + i).style.display = 'block';
                    }
                    else 
                    {
                        document.getElementById('titre_' + i).style.display = 'none';
                        document.getElementById('strate_' + i).style.display = 'none';
                    }
                }
            }
            function addStrate()
            {
 
            }
        </script>
    </head>
    <body>
        <h3>Test CRP</h3>
        <form action="" method="post" id="chg">
        <fieldset>
            <legend>Identificationde la campagne</legend>
                <select name="annee" id="annee" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez une année - - -</option>
                    <option value="2012" selected>2012 </option>
                    <option value="2011"-1>2011 </option>
                </select>
                <select name="semestre" id="semestre" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez un semestre - - -</option>
                    <option value="1" selected>Semestre 1</option>
                </select>
                <select name="semaine" id="semaine" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez une semaine - - -</option>
                    <option value="11" selected>Semaine 11</option>
                    <option value="10">Semaine 10</option>
                </select>
                <select name="prestataire" id="prestataire" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez un prestataire - - -</option>
                    <option value="1" selected>GET</option>
                </select>
                <select name="campagne" id="campagne">
                    <option value="1">2012-S1_Voix_S11_DO_SO_GET</option>
                </select>
        </fieldset>
        <fieldset>
            <legend> Filtres </legend>
            <table>
                <thead> <!-- En-tête du tableau -->
                    <tr>
                       <th>Opérateurs</th>
                       <th>Localisation</th>
                       <th>Modes</th>
                       <th>
                       <div id="titre_1" style="display: block">
                       Strates ARCEP
                       </div>
                       <div id="titre_2" style="display: none">
                       AXES
                       </div>
                       </th>
                    </tr>
                </thead>
                <tbody> <!-- Corps du tableau -->
                    <tr>
                        <td> <div id="operateurs">
                            <input type="radio" name="operateurs" value="3" id="ORANGE" checked="checked" /> <label for="ORANGE">ORANGE</label> <br />
                            <input type="radio" name="operateurs" value="2" id="BYT" /> <label for="BYT">BYT</label> <br />
                            <input type="radio" name="operateurs" value="1" id="SFR" /> <label for="SFR">SFR</label> <br />
                            <input type="radio" name="operateurs" value="4" id="FREE" /> <label for="FREE">FREE</label> <br />
                            <input type="radio" name="operateurs" value="5" id="tousOp" /> <label for="tousOp">Tous</label> <br />
                            </div>
                        </td>
                        <td> <div id="localisation">
                            <input type="radio" name="localisation" value="1" id="agglo" onclick="show_div(1);" checked="checked" /> <label for="agglo">Agglomeration</label> <br />
                            <input type="radio" name="localisation" value="2" id="axes" onclick="show_div(2)" /> <label for="axes">Axes</label> <br />
                            <input type="radio" name="localisation" value="3" id="tousLoca" /> <label for="tousLoca">Tous</label> <br />
                            </div >
                        </td>
                        <td> <div id="modes">
                            <input type="checkbox" name="modes[]" value="1" id="2G" checked="checked"/> <label for="2g">2G</label><br />
                            <input type="checkbox" name="modes[]" value="2" id="3G" checked="checked"/> <label for="3g">3G</label><br />
                            <input type="checkbox" name="modes[]" value="3" id="4G" checked="checked"/> <label for="4g">4G</label><br />
                            </div>
                        </td>
                        <td> 
                            <div id="champ_1" style="display: block">
                                <select name="strate1" id="strate1">
                                    <option value="-1">- - - Choisissez une strate - - -</option>
                                        <option value="4"-1>- DE 5K </option>
                                        <option value="1"-1>10-20K </option>
                                        <option value="3"-1>5-10K </option>
                                        <option value="5"-1>50-400K </option>
                                        <option value="8"-1>TOP14 </option>
                                        <option value="2"-1>\N </option>
                                <input type="button" value="Ajouter une strate" onClick="addStrate();" /> </br>
                                <input type="button" value="Supprimer une strate" onClick="delStrate();" />                                </select>
                            </div>
                            <div id="champ_2" style="display: none">
                                <select name="axe" id="axe">
                                    <option value="-1">- - - Choisissez un axe - - -</option>
                                    <option value="2"-1> </option>
                                    <option value="55"-1>A0004 </option>
                                    <option value="47"-1>A0010 </option>
                                    <option value="53"-1>A0071 </option>
                                    <option value="49"-1>A0075 </option>
                                    <option value="54"-1>A0701 </option>
                                    <option value="56"-1>D0001 </option>
                                    <option value="57"-1>D0123 </option>
                                    <option value="51"-1>D0766 </option>
                                    <option value="52"-1>D0772 </option>
                                    <option value="48"-1>N0009 </option>
                                    <option value="50"-1>N1009 </option>
                                </select>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <input type="submit" name="ok" id="ok" value="Envoyer" />
        </form>
    </body>

30/05/2012, 12h27
RomainVALERI

Jette un oeil du côté de Node.cloneNode : tu récupères l'élément à dupliquer, et tu insères son clone avec appendChild. Tu as déjà pratiqué les manipulations du DOM en JS ?
30/05/2012, 13h06
axe31

Ok ok, je vais voir ça. Non pas du tout je commence vraiment le JavaScript donc j'ai lu quelques trucs par ci par là. :calim2:

2 pièce(s) jointe(s)

j'ai réussi a utiliser cloneNode mais j'ai plusieurs questions

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
function show_div(id)
{
	for (var i = 1; i <= 3; i++)
	{
		if (i == id)
		{
			document.getElementById('titre_' + i).style.display = 'block';
			document.getElementById('strate_' + i).style.display = 'block';
		}
		else 
		{
			document.getElementById('titre_' + i).style.display = 'none';
			document.getElementById('strate_' + i).style.display = 'none';
		}
	}
}
 
var nb_ajout = 0;
function addListeStrate()
{
	if(nb_ajout < 9 )
	{
		var strate1 = document.getElementById('strate');
		var strate2 = strate1.cloneNode(true);		
 
		strate1.parentNode.appendChild(strate2);		
		nb_ajout++;
	}
}
 
 
function delListeStrate()
{
	if(nb_ajout !=0)
	{
	var lastStrate = document.getElementById('strate');
 
	lastStrate.parentNode.removeChild(lastStrate);
	nb_ajout--;
	}
 
}

Tout d'abord sur la forme:
- je veux inserer les elements dupliqués juste avant mon bouton +
Pièce jointe 96350
- Et quand j'utilise ma fonction supprimer il me supprime la première liste alors que je voudrais que c'a me supprime la dernière ajoutée.
Pièce jointe 96353

Et aussi sur le fond:
- Vu que les listes sont clonées comment récupérer les bonnes valeurs pour l'envoyer au formulaire car quand je submit il me retourne seulement la valeur de la première liste.

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>E2endOAM</title>
		<script src="show_div.js"></script>
		<script src="clonage.js"></script>
	</head>
 
	<body>
		<header>
			<a href="/e2endoam/index.html"> <img src="logo.jpg" alt="banniere" title="Accueil"/> </a>
			<h2>Outil automatique de mesures EndToEnd</h2>
			<nav>
				<ul>
					<li><a href="index.html">Accueil</a></li>
 
					<li><a href="upload.html">Upload</a></li>
					<li><a href="mesure.php">Mesure</a></li>
				</ul>
			</nav>
		</header>
 
		<section>
			<form name="mesure" action="" method="post" id="chg">
 
			<select name="annee" id="annee" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez une année - - -</option>
				<option value="2012" selected>2012 </option>
				<option value="2011"-1>2011 </option>
			</select>
 
			<select name="semestre" id="semestre" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez un semestre - - -</option>
				<option value="1" selected>Semestre 1</option>
			</select>
 
			<select name="semaine" id="semaine" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez une semaine - - -</option>
				<option value="11">Semaine 11</option><option value="10">Semaine 10</option>
			</select>		</section>
 
		<section>
			<table>
				<thead> <!-- En-tête du tableau -->
					<tr>
						<th> <h3>Pré-Filtre </h3> </th>
						<th> <h3>Localisation</h3> </th>
						<th>
							<div id="titre_1" style="display: block">
								<h3>Strates ARCEP</h3>
							</div>
 
							<div id="titre_2" style="display: none">
								<h3>AXES</h3>
							</div>
 
							<div id="titre_3" style="display: none">
								<h3>Ligne Commerciale</h3>
							</div>
					  </th>
					</tr>
				</thead>
 
				<tbody> <!-- Corps du tableau -->
					<tr>
						<td>
							<div id="prefiltre">
								<input type="radio" name="prefiltre" value="1" id="active" checked="checked" /> 
								<label for=active>Activé</label> <br />
								<input type="radio" name="prefiltre" value="0" id="desactive" />
								<label for=desactive>Désactivé</label>
							</div>
						</td>
 
						<td>
							<div id="localisation">
								<input type="radio" name="localisation" value=2 id="agglo" onclick="show_div(1);" checked="checked" /> <label for="agglo">Agglomeration</label> <br />
								<input type="radio" name="localisation" value=1 id="axes" onclick="show_div(2);" /> <label for="axes">Axes</label> <br />
								<input type="radio" name="localisation" value=4 id="trains" onclick="show_div(3);" /> <label for="trains">Trains</label> <br />
							</div >
						</td>
						<td> 
							<div id="strate_1" style="display: block">
								<select name="strate" id="strate">
									<option value="-1">- - - Choisissez une strate - - -</option>
									<option value="4"-1>- DE 5K </option>
									<option value="9"-1>10-20K </option>
									<option value="5"-1>5-10K </option>
									<option value="3"-1>50-400K </option>
									<option value="8"-1>TOP14 </option>
									<option value="2"-1>\N </option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter une strate" title="Ajouter une strate" align="middle" onClick="addListeStrate();" />
								<img src="./images/moins.png" alt="Supprimer une strate" title="Supprimer une strate" align="middle" onClick="delListeStrate();" />
							</div>
 
							<div id="strate_2" style="display: none">
								<select name="listeAxes" id="listeAxes">
									<option value="-1">- - - Choisissez un axe - - -</option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter un axe" title="Ajouter un axe" align="middle" onClick="addListeAxe();" />");
								<img src="./images/moins.png" alt="Supprimer un axe" title="Supprimer un axe" align="middle" onClick="delListeAxe();" />");
							</div>
 
							<div id="strate_3" style="display: none">
								<select name="ligneCom" id="ligneCom">
									<option value="-1">- - - Choisissez une ligne commerciale - - -</option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter une Ligne Commerciale" title="Ajouter une Ligne Commerciale" align="middle" onClick="addListeLigneCom();" />");
								<img src="./images/moins.png" alt="Supprimer une Ligne Commerciale" title="Supprimer une Ligne Commerciale" align="middle" onClick="delListeLigneCom();" />");
							</div>
						</td>
					</tr>
				</tbody>
			</table>
 
			<input type="submit" name="ok" id="ok" value="Envoyer" />
			</form>	
		</section>
 
		<footer>
 
			<ul>
					<li><a href="index.html">Accueil</a></li>
					<li><a href="upload.html">Upload</a></li>
					<li><a href="mesure.php">Mesure</a></li>
			</ul>
		</footer>
	</body>
 
</html>

04/06/2012, 22h23
NoSmoking

Bonsoir,
il te faut lorsque tu cloneNode tenir compte que même l'ID est dupliqué, donc il y a un certains nombre de précaution à prendre.

Je pense qu'il faut que tu revois ta fonction de suppression.

En effet, il faut modifier ton élément entre le moment où il est cloné et la greffe du clone au document principal. Je veux dire par exemple :
Code:

1 2 3 4 5 var strate1 = document.getElementById('strate'); var strate2 = strate1.cloneNode(true); strate2.id += nb_ajout.toString();// exemple de manière de différencier les clones strate1.parentNode.appendChild(strate2); nb_ajout++;
(le toString est en réalité superflu, je l'ai ajouté pour la lisibilité)

Merci beaucoup j'ai réussi à m'en sortir avec vos indications.

Par contre j'ai un petit souci avec d'autre liste déroulante, je me suis tourné vers Ajax car en PHP cela devenait compliqué.

Voilà je cherche à liées 5 listes déroulantes chacune découlant de la précédente. J'ai regardé tous les post sur le sujet qui traitait de ca mais je ne trouve pas mon erreur. J'essaye déjà d'en lier 3 mais la 3ieme ne fonctionne pas pourtant ce que j'ai fait ressemble bien aux autres posts que j'ai trouvé. Donc si quelqu'un pouvais trouver l'endroit où ça bloque :/
La console d'erreur de firefox m'indique aucune erreur...

EDIT: Code mis a jour fonctionnel sauf requete SQL

index.php

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
<html>
	<head>
		<title>test AJAX</title>
		<script src="ajax.js"></script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<div id="divAnnee" style="display:inline">
				<select name="annee" id="annee" onchange="go()">
					<option value="-1">Choisir une année</option>
					<?php
                                                $sql1 = "SELECT DISTINCT YEAR(`date`) AS annee1
                                                                        FROM `mesures`
                                                                        ORDER BY annee1 DESC;";
                                                mysql_connect($serveur, $admin, $mdp);
                                                mysql_select_db($base);
                                                $rech_annee = mysql_query($sql1);
                                                while($ligneAnnee = mysql_fetch_assoc($rech_annee))
                                                {
                                                        echo ("<option value=\"".$ligneAnnee['annee1']."\">".$ligneAnnee['annee1']."</option>");
                                                }
                                        ?>
				</select>
				</div>
				<div id="divSemestre" style="display:inline">
				<select name="semestre" id="semestre" onchange="go2()">
					<option value="-1">Choisir un semestre</option>
				</select>
				</div>
				<div id="divSemaine" style="display:inline">
				<select name="semaine" id="semaine">
					<option value="-1">Choisir une semaine</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajax.js

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
var xhr = null;
function getXhr()
{
	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 peut pas lancer cet outil"); 
		xhr = false; 
	} 
}
 
function go()
{
	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('semestre').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_ajout_semestre.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'annee
	sel = document.getElementById('annee');
	idannee = sel.options[sel.selectedIndex].value;
	xhr.send("idAnnee="+escape(idannee));
}
 
function go2()
{
	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('semaine').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_ajout_semaine.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, le semestre
	sel = document.getElementById('semestre');
	idsemestre = sel.options[sel.selectedIndex].value;
	xhr.send("idSemestre="+idsemestre);	
}

ajax_ajout_semestre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
        // global $idAnnee = $_POST['idAnnee'];
        if($_POST['idAnnee'] !=-1)
        {
                $sql2 = "SELECT DISTINCT semestre(`date`) AS semestre1
                                                FROM `mesures`
                                                WHERE YEAR(`date`) =".$_POST['idAnnee'];
                mysql_connect($serveur, $admin, $mdp);
                mysql_select_db($base);
                $rech_semestre = mysql_query($sql2);
                echo("<option value=\"-1\">Choisir un semestre</option>");
                while($ligneSemestre = mysql_fetch_assoc($rech_semestre))
                {
                        echo("<option value=\"".$ligneSemestre['semestre1']."\">Semestre ".$ligneSemestre['semestre1']."</option>");
                }
        }
        else
        {
                echo("<option value=\"-1\">Choisir un semestre</option>");
        }
?>

ajax_ajout_semaine.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($_POST['idSemestre'] != -1)
        {
                $sql3 = "SELECT DISTINCT WEEK(`date`) AS semaine1
                                                FROM `mesures`
                                                WHERE YEAR(`date)=".$_POST['idAnnee'].
                                                "AND semestre(`date`)=".$_POST['idSemestre'];
                mysql_connect($serveur, $admin, $mdp);
                mysql_select_db($base);
                $rech_semaine = mysql_query($sql3);
                echo("<option value=\"-1\">Choisir une semaine</option>");
                while($ligneSemaine = mysql_fetch_assoc($rech_semaine))
                {
                        echo("<option value=\"".$ligneSemaine['semaine1']."\">S ".$ligneSemaine['semaine1']."</option>");
                }
        }
        else
        {
                echo("<option value=\"-1\">Choisir une semaine</option>");
        }
?>

07/06/2012, 12h59
axe31

Bon c'est bon j'ai réussi à résoudre une partie de mon problème. J'arrive à afficher les semaine cependant dans mon script ajax_ajout_semaine.php j'ai ma requête SQL qui ne fonctionne pas car ça ne récupère pas $_POST['idAnnee'] précédemment renseigné mais seulement le $_POST['idSemestre']
Comment recuperer idAnnee ???

P.S: j'ai mis à jour le code précèdent qui fonctionne si j'enlève la condition du where dans ajax_ajout_semaine.php
07/06/2012, 13h36
RomainVALERI

La valeur de ton idAnnee n'est plus présente dans le send du second appel ajax. Rajoute-la et ça devrait aller mieux :)
07/06/2012, 14h04
axe31
Il faut juste rajouter une ligne a la fin de mon deuxieme appel ajax ??
Code:

1 2 xhr.send("idSemestre="+idsemestre); xhr.send("idAnnee="+idannee);
07/06/2012, 14h07
vermine

Bonjour,

Un seul send, a priori :

Code:

xhr.send("idSemestre="+idsemestre+"&idAnnee="+idannee);

Mais il faut que idAnnee soit initialisé au préalable.
07/06/2012, 14h28
axe31

Bon deja il me renvoi plus l'erreur dans la console d'erreur : Undefined index: idAnnee in c:\wamp\www\ajax\ajax_ajout_semaine.php on line 13....

Mais il me complete toujours pas la liste deroulante c'est que idAnnee est surement null :/
07/06/2012, 14h34
vermine

Je n'ai pas lu toute la discussion mais à vous de nous le dire. Que vaut idAnnee avant le send ? Que vaut-il lors de la réception du côté php ? Que renvoie le select avec cet idAnnee ? ...
07/06/2012, 14h46
axe31

C'est bon réussi ...
Erreur a la con ... oublié de rajouter un espace avant le AND de la requete ...

Merci beaucoup pour votre aide :)
07/06/2012, 14h59
vermine

Bien vu. :aie:

Si c'est résolu n'hésitez pas à cliquer sur le bouton :resolu: qui se trouve en bas (centré) de la discussion.
07/06/2012, 15h03
axe31

Par contre ca ne fonctionne pas du tout sur IE 8 ou 9 la deuxieme liste est vide :/
07/06/2012, 20h29
NoSmoking

problème de cache ????
:fleche: http://javascript.developpez.com/faq...#navig.nocache

Dans le mode développement de IE, le select me renvoi ça :
Code:

1 2 3 4 5 6 7 8 <select name="semestre" id="semestre" onchange="go2()"> Texte - Choisir un semestreSemestre 1 <! -- AU lieu de ça sous FF --> <select name="semestre" id="semestre" onchange="go2()"> <option value="-1">Choisir un semestre</option> <option value="1">Semestre 1</option></select>
Donc il exécute bien la requête car il concatenne les 2 options dispo

Pour qu'il m'affiche cela j'ai rajouter dans mon script php:
Code:

1 2 3 4 header("Pragma: no-cache"); header("Expires: 0"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-cache, must-revalidate");
Mais il ne m'affiche toujours rien dans la liste déroulante...

Ensuite j'ai rajouter a mon script ajax.js
Code:

1 2 fileSemestre = "ajax_ajout_semestre.php?"+new Date()*Math.random(); xhr.open("POST",fileSemestre,true);
Mais résultat identique :/

09/06/2012, 09h55
NoSmoking

l'erreur est dans le fait de vouloir ajouter des OPTION directement via le innerHTML.
IE le refuse, et il a raison, les autres autorisent à insérer, via ce même innerHTML, un SELECT dans un SELECT ce qui est très moyen.

Donc dans ton cas tu as 2 solutions soit ajouter les OPTIONs via les méthodes d'insertion DOM, soit injecter dans une DIV le SELECT complet et non pas seulement les OPTIONs.
11/06/2012, 09h31
axe31

Je commence a désesperer ... j'ai essayer de mettre en place ta 2ieme solution car la DOM je l'ai encore jamais utilisé :/ donc j'ai suprimer le select de ma page et j'ai laissé la div divSemestre vide puis dans le script ajax_ajout_semestre.php j'ai ajouter le select semestre, et enfin dans le script ajax.js j'ai remplacer

Code:

document.getElementById('semestre').innerHTML = leselect;

par

Code:

document.getElementById('divSemestre').innerHTML = leselect;

Mais tjr pareil fonctionne sous FF, Opera... pas sous IE m'affiche meme plus le select semestre
12/06/2012, 11h26
axe31

J'ai enfin trouvé après 1 semaine... ajax.js est surement blacklisté de IE donc appel au script impossible ...

Voilà merci à tous ceux qui m'ont aidés.
12/06/2012, 12h10
RomainVALERI

Citation:

Envoyé par axe31

blacklisté

:koi:
12/06/2012, 14h44
axe31

mauvaise suposition a prioris car j'ai rechangé le nom du fichier en ajax.js et ca fonctionne toujours...

Donc je sais pas j'avais vidé le cache de IE pourtant ...

J'ai une petite question aussi comment faire pour récupérer automatiquement le choix de la prochaine liste déroulante car je suis obligé de cliquer dessus pour qu'il l'envoi au serveur avec un onchange et me renvoi undefined sur le choix par defaut au lieu de -1.