liste liées ajax

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : liste liées ajax

Re: liste liées ajax

par Ryle » 16 oct. 2011, 20:08

A vue de nez, je dirais que ton problèmes vient du fait que tu déclares 2 variables dans ta fonction alors que celles-ci sont passées en paramètres... il se peut donc que cette nouvelle déclaration écrase les valeurs qui ont été passées en argument...

Code : Tout sélectionner

function changeList2FromList1(id_lis1,id_div2){ // var id_lis1; // valeur de l option choisie (liste 1) // var id_div2; // id du div qu'on remplira (liste 2)
Si c'est pas ça, faut procéder par étape pour vérifier que les données sont bien reçues par ton script php, que celui-ci retourne bien ce que tu attends, et que le résultat est bien traité comme il le devrait...

liste liées ajax

par pacphil » 14 oct. 2011, 22:30

bonjour voici la fonction ajax et ma page listeAjax.php et une partie de mon formulaire.

Le soucis c'est quand je choisi une liste dans mon premier menu déroulant le second devrai y être aussi c'est pas le cas je trouve pas la solutions ???

j'aurai besoin d'une aide?

Code : Tout sélectionner

/* Initialisation XMLHttpRequest */ 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; }; /* Changer la liste 2 après choix dans la liste 1 */ function changeList2FromList1(id_lis1,id_div2){ var id_lis1; // valeur de l option choisie (liste 1) var id_div2; // id du div qu'on remplira (liste 2) var xhr = getXhr(); xhr.onreadystatechange = function(){ // si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200) { texthtml = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste des "selections" document.getElementById(id_div2).innerHTML = texthtml; } } // on defini la methode (post) + le fichier de traitement + asynchrone (true) xhr.open("POST","listeAjax1.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // on poste les parametres a transmettre au fichier qui fera le traitement xhr.send("idlist1selected="+id_lis1); };
liste ajax
<?php 
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{ 
	// recuperation de id_liste1
	$id_liste1_selected = intval($_POST['idlist1selected']);
 
switch ($id_liste1_selected) {
	 case 0;
	 echo'<select id="id_selection" name="selection">
		  <option value="0">Choisissez ...</option>';
		  break;	 
	 case 1;
	 echo'<option value="1">Aartselaar</option>
		  <option value="2">Anvers</option>
		  <option value="3">Arendonk</option>
		  <option value="4">Baarle-Hertog</option>
		  <option value="5">Balen</option>
		  <option value="6">Beerse</option>
		  <option value="7">Berlaar</option>
		  <option value="8">Boechout</option>
		  <option value="9">Bonheiden</option>
		  <option value="10">Boom</option>
		  <option value="11">Bornem</option>
		  <option value="12">Borsbeek</option>
		  <option value="13">Brasschaat</option>
		  <option value="14">Brecht</option>
		  <option value="15">Dessel</option>
		  <option value="16">Duffel</option>
		  <option value="17">Edegem</option>
		  <option value="18">Essen</option>
		  <option value="19">Geel</option>
		  <option value="20">Grobbendonk</option>
		  <option value="21">Heist-op-den-Berg</option>
		  <option value="22">Hemiksem</option>
		  <option value="23">Herentals</option>
		  <option value="24">Herenthout</option>
		  <option value="25">Herselt</option>
		  <option value="26">Hoogstraten</option>
		  <option value="27">Hove</option>
		  <option value="28">Hulshout</option>
		  <option value="29">Kalmthout</option>
		  <option value="30">Kapellen</option>
		  <option value="31">Kasterlee</option>
		  <option value="32">Kontich</option>
		  <option value="33">Laakdal</option>
		  <option value="34">Lier</option>
		  <option value="35">Lille</option>
		  <option value="36">Lint</option>';
		  break; 
	 case 2;
	 echo'<option value="4">Vente Maisons</option>
		  <option value="5">Locations Maisons</option>';
		  break;	 
	 case 3;
	 echo'<option value="6">Entretien jardin</option>
		  <option value="7">Pavage terrasse</option>';
		  break;
         } 
		 echo'</select>';
         } else { 	// SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :

		 echo'<select id="ididliste2" name="idliste2">
			  <option value="0">(Choisissez d&acute;abord dans la liste 1)</option>
			  </select>';
}
?> 
et enfin mon formulaire
            <td><form><b>Province :</b></td>
            <td><select id="ididliste1" name="idliste1" onchange="changeList2FromList1(this.options[this.selectedIndex].value,'iddivListe2');">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="0">Choisissez ...</option>
				<option value="1">Anvers</option>
				<option value="2">Bruxelles</option>
                <option value="3">Brabant flamand</option>
                <option value="4">Brabant wallon</option>
				<option value="5">Flandre occidentale</option>
                <option value="6">Flandre orientale</option>
                <option value="7">Hainaut</option>
                <option value="8">Liege</option>
                <option value="9">Limbourg</option>
                <option value="10">Luxembourg</option>
			</select>
            </td>
            <td><b>Ville :</b></td>
            <td><span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="iddivListe2" name="idliste2">
			<option value="0">(Choisissez d&acute;abord dans la liste 1)</option>
			</select>
                 </span>    
            </td>
          </tr>
          <tr>