Populate a dropdown list based on another list (ajax, jquery)
rawiaGL
Posted messages
23
Status
Member
-
supupoff Posted messages 350 Status Member -
supupoff Posted messages 350 Status Member -
Hello,
So I’m trying to get my following Ajax code to work, but nothing is running, any help plz?
Client.html
[HTML snippet with two selects and styles]
Jquery.js
[JavaScript snippet using jQuery to load options via AJAX]
projet_profil.php
[PHP snippet fetching data from MySQL and returning JSON]
No error messages appear, and the dropdowns remain empty. I don’t understand what’s wrong.
Configuration: Windows 7 / Chrome 42.0.2311.135
So I’m trying to get my following Ajax code to work, but nothing is running, any help plz?
Client.html
[HTML snippet with two selects and styles]
Jquery.js
[JavaScript snippet using jQuery to load options via AJAX]
projet_profil.php
[PHP snippet fetching data from MySQL and returning JSON]
No error messages appear, and the dropdowns remain empty. I don’t understand what’s wrong.
Configuration: Windows 7 / Chrome 42.0.2311.135
1 answer
voilà un travail bâclé et non testé j’espère qu’il fonctionne
NB ; Je n’ai rien changé dans fichier projet_profil.php et pas besoin de fichier Jquery.js
Client.html
La chance aide parfois, le travail toujours.
NB ; Je n’ai rien changé dans fichier projet_profil.php et pas besoin de fichier Jquery.js
Client.html
<html> <head> <script type='text/javascript'> function getXhr(){ var xhr = null; if (window.XMLHttpRequest) // Mozilla, Safari,... xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur xhr = false; } return xhr; } /** * Méthode qui sera appelée sur le click du bouton */ function go(){ 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 le valeur au liste_profil document.getElementById("liste_profil").innerHTML = leselect; // } } // Ici on va voir comment faire du post xhr.open("GET","projet_profil.php",true); // <== Post methode d'envoie et projet_profil.php fichier d'action -- je prefère post -- // 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('liste_projet'); // <== ici Projet selectioner mat= sel.value; // <== prendre le valeur de variable liste_projet xhr.send("id_projet="+mat); // <== id_projet envoyer } </script> </head> <style> .select { width:14%; border: 2px solid gray; margin-left:15px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <p>Projet</p> <select id="liste_projet" class="select" name="id_projet" > <option value="">-- Projets --</option> </select> <p>Profil</p> <select id="liste_profil" class="select" name="id_profil" > <option value="">-- Profils --</option> </select> </html> La chance aide parfois, le travail toujours.