IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] listes dynamiques liées a la premiere avec XMLhttpRequest


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 181
    Par défaut [AJAX] listes dynamiques liées a la premiere avec XMLhttpRequest
    Bonjour, voila apres avoir tenté de lier ma 2e liste dynamique en fonction de ce qui est choisi dans la premiere (sans rafraichir la page bien sur), en php, JS, et que ce ne m'arrange pas trop (car mon <form action="" est deja occupe), j'ai decide de tester avec XMLhttprequest..
    J ai vu ces 2 docs :

    http://siddh.developpez.com/articles/ajax/

    http://dcabasson.developpez.com/arti...ion-pas-a-pas/

    Et alors ce que j'aimerai bien, c'est qu'on me montre en "gros", les differentes etapes a effectuer et bouts de code a utiliser pour obtenir ce lien entre les 2 listes.

    pour le moment ca se passe comme ca en gros :

    - ma premiere liste apelle le champs_A de la table_1; 4 valeurs, en fonction de la valeur selectionnée (donc tout en IF je pense..?) cela va selectionner les valeurs correspondantes du champs_B
    - 2e liste affichant les valeurs du champs_B, en fonction de la valeur du champ_A choisi.

    Voila si vous pourriez me fournir quelques explication pour la bonne realisation des 2 listes, ce serait simpa. Merci d'avance.

  2. #2
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532
    Par défaut
    La fonction rechercher ca existe... les posts impotants du forum aussi...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
        Important : <a href="http://www.developpez.net/forums/showthread.php?t=84315" target="_blank">Les cours javascript</a>                 siddh
        Important : <a href="http://www.developpez.net/forums/showthread.php?t=598" target="_blank">Listes déroulantes liées entre elle</a>  jérôme

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 181
    Par défaut
    Bonjour,

    donc j'ai testé le tuto Ajax et Siddh (http://siddh.developpez.com/articles/ajax/#LIV-A). Mes tables sont exactment les memes que dans l'exemple, à l'exception des valeurs, mais la structure est la meme :

    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
    CREATE TABLE `phplist_listattr_marque` (
      `id` int(11) NOT NULL auto_increment,
      `name` varchar(255) default NULL,
      `IDtype` varchar(11) NOT NULL default '',
      PRIMARY KEY  (`id`),
      UNIQUE KEY `name` (`name`)
    ) TYPE=MyISAM AUTO_INCREMENT=248 ;
     
    INSERT INTO `phplist_listattr_marque` VALUES (6, 'peugeot', '2');
     
     
    CREATE TABLE `phplist_listattr_typedevehi` (
      `id` int(11) NOT NULL auto_increment,
      `name` varchar(255) default NULL,
      `listorder` int(11) default '0',
      PRIMARY KEY  (`id`),
      UNIQUE KEY `name` (`name`)
    ) TYPE=MyISAM AUTO_INCREMENT=6 ;
     
    INSERT INTO `phplist_listattr_typedevehi` VALUES (1, 'routiere', 0);

    J'ai ensuite remplacé les variables correspondantes mais rien ! je n'ai aucune valeur qui s'affiche dans les listes, elles sont vides...Pourriez vous me dire ou jai oublié quelque chose ou ce qui ne va pas selon vous, merci d'avance :

    Types.php :

    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
    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
    <html>
    	<head>
    		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    		<script type='text/javascript'>
    			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 supporte pas les objets XMLHTTPRequest..."); 
    				   xhr = false; 
    				} 
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    			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('livre').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
    				idtype = sel.options[sel.selectedIndex].value;
    				xhr.send("idtype="+idtype);
    			}
    		</script>
    	</head>
    	<body>
    		<form>
    			<fieldset style="width: 500px">
    				<legend>Liste liées</legend>
    				<label>Types</label>
    				<select name='type' id='type' onchange='go()'>
    					<option value='-1'>Aucun</option>
    					<?
    						mysql_connect("localhost","root","");
    						mysql_select_db("phplistdb");
    						$res = mysql_query("SELECT * FROM phplist_listattr_typedevehi ORDER BY type");
    						while($row = mysql_fetch_assoc($res)){
    							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
    						}
    					?>
    				</select>
    				<label>Marques</label>
    				<div id='marque' style='display:inline'>
    				<select name='marque'>
    					<option value='-1'>Choisir un auteur</option>
    				</select>
    				</div>
    			</fieldset>
    		</form>
    	</body>
    </html>

    ajaxMarques.php :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    	echo "<select name='marque'>";
    	if(isset($_POST["IDtype"])){
    		mysql_connect("localhost","root","");
    		mysql_select_db("phplistdb");
    		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
    			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
    		while($row = mysql_fetch_assoc($res)){
    			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
    		}
    	}
    	echo "</select>";
    ?>

  4. #4
    Membre Expert
    Avatar de FremyCompany
    Profil pro
    Étudiant
    Inscrit en
    Février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 2 532

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    181
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 181
    Par défaut
    oui aprdon je ne l'avais pas vu celui la... j'ai donc supprime la fonction getXhr et remplace la par ton code, mais ca ne va pas mieux :/ . Les listes déroulantes restent vides...

    type.php :

    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
    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
    <html>
    	<head>
    		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    		<script type='text/javascript'>
    			var xhr = null; 
     
    	// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
    var pickRecentProgID = function (idList){
    	// found progID flag
        var bFound = false;
        for(var i=0; i < idList.length && !bFound; i++){
            try{
                var oDoc = new ActiveXObject(idList[i]);
                o2Store = idList[i];
                bFound = true;
            }catch (objException){
                // trap; try next progID
            };
        };
        if (!bFound)
    		throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
        idList = null;
        return o2Store;
    }
     
    // Retourne un nouvel objet XmlHttpRequest
    var GetXmlHttpRequest_AXO=null
    var GetXmlHttpRequest=function () {
    	if (window.XMLHttpRequest) {
    		return new XMLHttpRequest()
    	}
    	else if (window.ActiveXObject) {
    		if (!GetXmlHttpRequest_AXO) {
    			GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
    		}
    		return new ActiveXObject(GetXmlHttpRequest_AXO)
    	}
    	return false;
    }
     
    // Compatibilité avec le script du tutoriel AJAX (developpez.com)
    getXhr=GetXmlHttpRequest;
     
     
     
     
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    			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('phplist_listattr_marque').innerHTML = leselect;
    					}
    				}
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajaxMarques.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('phplist_listattr_typedevehi');
    				idtype = sel.options[sel.selectedIndex].value;
    				xhr.send("idtype="+idtype);
    			}
    		</script>
    	</head> 
     
    	<body>
    		<form>
    			<fieldset style="width: 500px">
    				<legend>Liste liées</legend>
    				<label>Types</label>
    				<select name='type' id='type' onchange='go()'>
    					<option value='-1'>Aucun</option>
    					<?
    						mysql_connect("localhost","root","");
    						mysql_select_db("phplistdb");
    						$res = mysql_query("SELECT * FROM phplist_listattr_typedevehi ORDER BY type");
    						while($row = mysql_fetch_assoc($res)){
    							echo "<option value='".$row["id"]."'>".$row["type"]."</option>";
    						}
    					?>
    				</select>
    				<label>Marques</label>
    				<div id='marque' style='display:inline'>
    				<select name='marque'>
    					<option value='-1'>Choisir un auteur</option>
    				</select>
    				</div>
    			</fieldset>
    		</form>
    	</body>
    </html>

    ajaxMarques.php :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    	echo "<select name='marque'>";
    	if(isset($_POST["IDtype"])){
    		mysql_connect("localhost","root","");
    		mysql_select_db("phplistdb");
    		$res = mysql_query("SELECT id,marque FROM phplist_listattr_marque
    			WHERE IDtype=".$_POST["IDtype"]." ORDER BY marque");
    		while($row = mysql_fetch_assoc($res)){
    			echo "<option value='".$row["id"]."'>".$row["marque"]."</option>";
    		}
    	}
    	echo "</select>";
    ?>

  6. #6
    Membre éprouvé Avatar de rieppe
    Profil pro
    Étudiant
    Inscrit en
    Octobre 2004
    Messages
    115
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2004
    Messages : 115
    Par défaut
    Salut,

    Remplace la ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('phplist_listattr_marque').innerHTML = leselect;
    Par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('marque').innerHTML = leselect;
    Juste une erreur de code ^_^

Discussions similaires

  1. [AJAX] Listes dynamiques liées-formulaire-Ajax
    Par leFred dans le forum AJAX
    Réponses: 2
    Dernier message: 12/08/2009, 17h17
  2. [AJAX] Formulaire avec deux listes dynamiques liées
    Par gotcha5832 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 26/03/2007, 10h40
  3. Afficher listes dynamiques liées a la premiere
    Par metatron dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 05/09/2006, 16h46
  4. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 16h51
  5. [AJAX] listes deroulantes liées x3
    Par Tempotpo dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/04/2006, 16h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo