rebonjour
je vien de trouver ces script tout pres et censé etre fonctionnel sur ce site
http://www.developpez.net/forums/d11249 ... st-jquery/
mais quant je teste aucun ne veut fonctionner autant en local "easyphp" qu'en ligne
exemple :
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Listes liées : Ajax - XMLHttpRequest</title>
<script type="text/javascript">
/* 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","listeslieesAjax-test.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);
};
</script>
</head>
<body>
<form method="post" action="fichier-de-traitement.php">
<fieldset style="width:550px;">
<legend>Listes liées</legend>
<p>
<label>Liste 1 : </label>
<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">Métiers</option>
<option value="2">Particuliers</option>
<option value="3">Jardins</option>
</select>
</p>
<p>
<label>Liste 2 : </label>
<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="ididliste2" name="idliste2">
<option value="0">(Choisissez d'abord dans la liste 1)</option>
</select>
</span>
<p>
<input type="submit" name="btenvoi" value="ok" />
</p>
</fieldset>
</form>
</body>
</html>
est ce que sa vien de moi ou ceci n'est pas fonctionnel
"si sa vien de moi" : est ce possible de l'adapter avec du sql pour les select ?
encore merci beaucoup
rebonjour
je vien de trouver ces script tout pres et censé etre fonctionnel sur ce site [url]http://www.developpez.net/forums/d1124935/webmasters-developpement-web/ajax/listes-liees-ajax-xmlhttprequest-jquery/[/url]
mais quant je teste aucun ne veut fonctionner autant en local "easyphp" qu'en ligne
exemple :
[php]
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Listes liées : Ajax - XMLHttpRequest</title>
<script type="text/javascript">
/* 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","listeslieesAjax-test.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);
};
</script>
</head>
<body>
<form method="post" action="fichier-de-traitement.php">
<fieldset style="width:550px;">
<legend>Listes liées</legend>
<p>
<label>Liste 1 : </label>
<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">Métiers</option>
<option value="2">Particuliers</option>
<option value="3">Jardins</option>
</select>
</p>
<p>
<label>Liste 2 : </label>
<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="ididliste2" name="idliste2">
<option value="0">(Choisissez d'abord dans la liste 1)</option>
</select>
</span>
<p>
<input type="submit" name="btenvoi" value="ok" />
</p>
</fieldset>
</form>
</body>
</html>
[/php]
est ce que sa vien de moi ou ceci n'est pas fonctionnel
"si sa vien de moi" : est ce possible de l'adapter avec du sql pour les select ?
encore merci beaucoup
