Ajax pour newbie - passage de paramètres d'un <select> à un autre

Version imprimable

Hello :),

J'ai déjà jeté un oeil aux cours/tutos Ajax, mais des choses m'échappent encore.

J'aurais besoin de vous pour coder un cas concret mais très simple, qui m'aidera à mieux capter.
-> un formulaire
-> 2 input via <select>

<select>département (liste lue en base pour générer le select-option)

<select>ville (liste lue en base pour générer le select-option, selon le département saisi)

-> le but: n'afficher dans ville QUE celles du département choisi juste avant

.html

Code:

1
2
3
4
5
6
7
<form>
Département: 
<?php $tmp = select_départements("Département", true); echo $tmp; ?>

Ville:
<?php $tmp = select_villes("GrandeVille", $département_selectionné_juste_avant, true); echo $tmp; ?>
</form>

.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
    function select_départements($label, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  ID ='$label' NAME='$label' onChange='returnDep()' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT distinct(num_dep) FROM grandes_villes ORDER BY num_dep";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['num_dep']) . "'>" . mysql_real_escape_string($ligne['num_dep']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;
    }
 
function select_villes($label, $dep, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  NAME='$label' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT id, ville FROM villes WHERE num_dep = '" . htmlspecialchars($dep, ENT_QUOTES, 'utf-8') . "' ORDER BY ville";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['id']) . "'>" . mysql_real_escape_string($ligne['ville']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;

Avec un onChange sur le 1er select, je peux récupérer la valeur du département en JS, ok............ mais comme JS, lui, ne peut pas renvoyer de paramètre vers PHP (pour le select ville), la seule solution serait donc de l'Ajax, si j'ai bien compris?

Ou y-a-t-il une autre méthode? 8O

Merci. :hola:

09/02/2016, 20h44
steph68b

J'avais bien pensé à construire le 2ème <select> dans la fonction JS du 1er......... ce qui est possible pour un <select> static........... MAIS pas en attaquant 1 BDD pour y chercher les data!! :mur:

J'en reviens donc au même point: AJAX!! :mur::help:
09/02/2016, 22h15
NoSmoking
Bonjour,

Citation:

J'en reviens donc au même point: AJAX!!

rien de bien complexe au final, on peut te conseiller au moins
- Comprendre les mécanismes d'AJAX
- Allez plus loin avec AJAX et XMLHttpRequest
10/02/2016, 11h14
steph68b

Ok, vais (re)jeter un oeil, merci. ;)

Mais si tu pouvais compléter mon code exemple, avec les 2 ou 3 instructions qui vont bien, ça participerait à ma compréhension. :roll:

EDIT:
Parce que le concept, ok, je vois... mais la structure "pratique" qui me pose problème (qui appelle quoi, et comment)... d'où mon exemple, certes basique, mais concret. :roll:

Dis-moi si j'ai bon, en gros ça donnerait ça:

.html
-> inchangé

.php
-> seule la fonction select_départements() reste

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function select_départements($label, $flag_required=false)    
    {
 
        if($flag_required === true)    $required="required";
        else                                  $required="";
 
        $tmp = "<SELECT  ID ='$label' NAME='$label' onChange='returnDep()' $required>";
            $tmp .= "<OPTION VALUE=''>choisir";
 
            $query = "SELECT distinct(num_dep) FROM villes ORDER BY num_dep";
            $resultat = mysql_query($query);
            while ($ligne = mysql_fetch_array($resultat)) 
            {
                $tmp .= "<OPTION  VALUE='". mysql_real_escape_string($ligne['num_dep']) . "'>" . mysql_real_escape_string($ligne['num_dep']);
            }
        $tmp .= "</SELECT>\n\r";
 
        return $tmp;
    }

.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
function returnDep()
{
	//on récupère le département choisi...
	var myselect = document.getElementById("Departement");
        var dep = myselect.options[myselect.selectedIndex].value;
 
	//que l'on transmet à l'ajax de la ville
	maFonctionAjax(dep);
}
 
function maFonctionAjax(departement)
{
	var xhr;
	if (window.XMLHttpRequest)		{ xhr = new XMLHttpRequest(); }						// Mozilla, Safari, ...
	else if (window.ActiveXObject)	{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }	// IE
	else							{ alert("Votre navigateur n'est pas adapté pour faire des requêtes AJAX...");  xhr = false;	}
 
	xhr.open('GET',+'ajax_grandesVilles.php?a=' + encodeURIComponent(departement),true);
	xhr.onreadystatechange = function()
	{
 
			if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0))
			{
				createSelect(xhr.responseText;)
			}
	}
	xhr.send(null);
}
 
function createSelect(response)
{
	if (response.length)										//on ne traite QUE s'il y a des datas
	{
		var monSelect = document.getElementById("Ville");	
			theOption=document.createElement("OPTION");
			theText=document.createTextNode("choisir");
			theOption.appendChild(theText);
			monSelect.appendChild(theOption);
			theOption.setAttribute("value","");
 
		response = response.split('|', response);				// on extrait les data en tableau
 
		var nbElem = response.length;
		for (var i=0; i < nbElem; i++)						//que l'on traite pour chaque élément
		{									
			  theOption=document.createElement("OPTION");
			  theText=document.createTextNode(response[i]);
			  theOption.appendChild(theText);
			  monSelect.appendChild(theOption);
			  theOption.setAttribute("value", response[i]);
		}
 
	}
}

13/02/2016, 08h55
NoSmoking

Je t'engage à lire cette discussion Mise en place de listes liées^(*) et plus précisément la réponse en #58

^(*) Attention beaucoup de déchets !
13/02/2016, 13h01
steph68b

Ok, j'irai jeter un oeil, merci.
13/02/2016, 13h38
steph68b

Mais quelle m...... cet IE!!!! :arf::arf::arf:

Bon, heureusement, il va foutre le camp petit à petit!!
Et sinon, tant pis pour ceux qui l'utilisent encore, mais vais pas monter une usine à gaz pour les rares péquins qui utilisent encore cette daube!
-> FF, chrome, voire opera, sont largement plus utilisés

J'étudierai ça en détails semaine prochaine, pour voir si je m'y colle ou pas.
14/02/2016, 16h27
NoSmoking

Non IE n'est pas m...ique, il est particulier et dans le cas des SELECT il est quand même le seul à être rigoureux, on ne peut pas ajouter à un SELECT un SELECT ;)

Dans ton cas il te faut un conteneur, une DIV par exemple, et ajouter la réponse, sous forme de HTML, directement dans la DIV.

La fonction que tu affectes à ce SELECT doit déjà être présente dans ton code initial pour pouvoir être appelée/exécutée.
15/02/2016, 13h55
steph68b

Ok, j'irai voir ça alors. ;)

Mais, dans mon cas, il n'est pas question de rajouter un <select> dans un autre <select>.
Simplement de lier les options du 2ème selon le choix du 1er.

Si on se base sur le code que tu nous à mis plus haut on pourrait avoir par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$tmp  = "<select name='$label' $required>";
$tmp .= "<option value=''>choisir</option>";
$query = "SELECT id, ville FROM villes WHERE num_dep = '" . htmlspecialchars($dep, ENT_QUOTES, 'utf-8') . "' ORDER BY ville";
$resultat = mysql_query($query);
while ($ligne = mysql_fetch_array($resultat)){
   $tmp .= "<option value'". mysql_real_escape_string($ligne['id']) . "'>" . mysql_real_escape_string($ligne['ville']) ."</option>";
}
$tmp .= "</select>";
 
echo $tmp;
?>

au retour on a le HTML complet d'un <select>, et c'est ce code qu'il faut mettre dans une <div> par exemple

Code:

1
2
3
4
5
6
7
xhr.open('GET', +'ajax_grandesVilles.php?a=' + encodeURIComponent(departement), true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
        document.getElementById('id_div_retour').innerHTML = xhr.responseText;
    }
}
xhr.send(null);

Ok, je vais comparer en cote-à-cote nos 2 sources pour bien voir les nuances. ;)

Autre chose:
-> je me suis basé sur des exemples en lignes , pour instancier un xhr selon le navigateur
-> du genre
Code:

1 2 3 4 5 6 7 var xhr; if (window.XMLHttpRequest) // Mozilla, Safari, ... { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) // IE { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } else { alert("Votre navigateur n'est pas adapté aux requêtes AJAX");}
-> or, entre temps, j'ai appris que les activeX (pour IE donc) c'était pas top du tout, et j'ai constaté sur d'autres exemples ainsi que dans le code source de sites en ligne connus, un simple

Code:

xhr = new XMLHttpRequest();

DONC, quelle est la norme actuellement en vigueur? :weird:

Quitte à apprendre une nouvelle "techno", autant être carré dès le départ... ;)

EDIT:
-> par ailleurs, toujours à propos de IE & ActiveX, quelle différence entre ces 2 formes?

Code:

xhr = new ActiveXObject('Msxml2.XMLHTTP')

Code:

xhr = new ActiveXObject('Microsoft.XMLHTTP');

-> l'une est-elle meilleure que l'autre, ou obsolète?

EDIT2:
-> je suppose que la "bonne pratique" est d'utiliser les deux, finalement, comme tu le fais..... ça n'a pas du changer depuis 1 an! :mrgreen:
-> je vais donc prendre ta fonction d'initialisation
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function getXhr() { var xhr = null; if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; }
-> par contre ne faudrait-il pas non plus try/catcher aussi xhr = new ActiveXObject("Microsoft.XMLHTTP"); du coup?

16/02/2016, 21h30
NoSmoking
En mode "moderne", sans tenir compte des navigateurs "obsolètes", mais pas pour tout le monde, on peut faire un simple

Code:

var oXhr = new window.XMLHttpRequest();

ou pour faire plus propre
Code:

1 2 3 4 5 6 7 8 function getXhr() { try { return new window.XMLHttpRequest(); } catch (e) { return null; } } var oXhr = getXhr();
si l'on veut tenir compte des navigateurs "obsolètes", on peut écrire

Code:

var oXhr = window['XMLHttpRequest'] ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");

Pour le reste si tu veux en savoir plus sur MSDN
- XMLHttpRequest object
- About Native XMLHTTP
18/02/2016, 10h16
steph68b

Merci pour ces précisions.
Je pense que je vais rejoindre les rangs de la modernité... ;)
18/02/2016, 19h32
NoSmoking

Tu fais bien, mais as tu résolu ton problème ?
18/02/2016, 19h53
steph68b

On ne peut pas continuellement continuer à développer pour des dinosaures oui!!
Les gens n'ont qu'à évoluer!! :france:

Et ma version initiale de construction du <select> fonctionne très (FF, Chrome et Opera aussi)..... y compris avec IE11.
Je n'ai donc rien changé, au final. ;)
18/02/2016, 20h07
NoSmoking

Donc tant mieux, pense au bouton Résolu.
18/02/2016, 20h52
steph68b

Merci. :coucou:
24/02/2016, 14h43
steph68b
re :D,

petite question complémentaire, "en passant":

est-il possible d'avoir une fonction ajax
Code:

1 2 3 4 xhr.onreadystatechange = function() { ... }
renvoyant des codes-retour particuliers......... codes-retour que l'on puisse tester dans l'appelant? :weird:
en gros, faire les traitement, non pas à l'intérieur, mais dans l'appelant?

s'il le faut, j'expliquerais plus en détail ma démarche et mes raisons d'agir ainsi ;), mais déjà est-ce possible?

En fait, possible ou pas, ma "méthode" n'est probablement pas la bonne et l'ajax pas approprié ici, à cause de son asynchronicité?

Dans mon formulaire:
-> j'ai, entre autre, un <input> login, avec sélection dans une liste de suggestion (remplissage ajax) selon les caractères saisis
-> à la validation j'appelle une fct JS qui renvoie true (submit du <form>) ou false (on ne fait rien et on attend la correction), selon le test

Code:

<input type="submit" value="VALIDER" onClick='return verif();'>

-> cette fonction doit vérifier qu'entre la sélection dans la liste et la validation du formulaire, la valeur de l'<input> login soit toujours cohérente et qu'il n'a y a eu de saisie supplémentaire: ex je clic "toto", mais pas inadvertance (ou pas!), lors de la validation le champs contient "totoooo" qui lui n'existe pas!

en gras ce que je voudrais faire (illustration), mais qui ne fonctionne pas...... asynchronicité oblige, je pense!
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 function verif() { login= document.getElementById("login").value; var xhr = getXhr(); var url = 'commun/ajax_inscription.php?a=' + encodeURIComponent(login.toLowerCase()) + '&b=login'; xhr.open("GET", url, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200 ) { if (login=== xhr.responseText) { retour = true; } else { alert("Ce login n'existe pas!"); document.getElementById("login").focus(); retour = false; } } } xhr.send(null); return retour; }
Sauf que, pour consulter la DB en JS, et tester une valeur, ajax impératif autant que ej sache..............

25/02/2016, 11h21
steph68b

Bon, au final je planque une copie de la valeur cliquée dans un <input> hidden et je compare les deux!
Plus simple et plus rapide aussi, je pense.
09/03/2016, 15h01
steph68b

Bon, suis passé par un champ hidden, faute de mieux, mais je trouve que ça fait un peu "bricolage", non? :?
02/04/2016, 14h09
steph68b

Bon ben tant pis alors.