Ajax / Listes liées
M.Net
-
Hicks59 Messages postés 51 Statut Membre -
Hicks59 Messages postés 51 Statut Membre -
Bonjour,
J'aimerais faire ce code sans utiliser de bdd, c'est-à-dire que j'indique dans le code les options, mais je ne comprends pas comment..
Quelqu'un pourrait m'aider avec une exemple de code s'il vous plait?
Merci d'avance !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Listes liées</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!--
function selectEditor(oElem) {
var xhr = getXMLHttpRequest();
var value = oElem.options[oElem.selectedIndex].value;
if(value != "none") {
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
makeList(xhr.responseXML);
document.getElementById("loading").innerHTML = "";
} else if(xhr.readyState == 2 || xhr.readyState == 3) {
document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
}
}
xhr.open("POST", "example_softwares_get.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}
}
function makeList(oData) {
var oOptions = oData.getElementsByTagName("option");
var oSelect = document.getElementById("softwaresSelect");
oSelect.innerHTML = "";
for(var i=0,c=oOptions.length;i<c;i++) {
var oOption = document.createElement("option");
oOption.value = oOptions[i].getAttribute("value");
oSelect.appendChild(oOption);
oOption.innerHTML = oOptions[i].firstChild.nodeValue;
}
}
//-->
</script>
</head>
<body>
<fieldset>
<legend>Programmes</legend>
<div id="programBox">
<div id="loading"></div>
<div id="editors">
<select id="editorsSelect" onchange="selectEditor(this);">
<option value="none">Selection</option>
<?php
mysql_connect($hote, $login, $m_d_p);
mysql_select_db($bdd);
$query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
while($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["name"]."</option>\n";
}
?>
</select>
</div>
<div id="softwares">
<select id="softwaresSelect"></select>
</div>
</div>
</fieldset>
</body>
</body>
</html>
J'aimerais faire ce code sans utiliser de bdd, c'est-à-dire que j'indique dans le code les options, mais je ne comprends pas comment..
Quelqu'un pourrait m'aider avec une exemple de code s'il vous plait?
Merci d'avance !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Listes liées</title>
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!--
function selectEditor(oElem) {
var xhr = getXMLHttpRequest();
var value = oElem.options[oElem.selectedIndex].value;
if(value != "none") {
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
makeList(xhr.responseXML);
document.getElementById("loading").innerHTML = "";
} else if(xhr.readyState == 2 || xhr.readyState == 3) {
document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
}
}
xhr.open("POST", "example_softwares_get.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}
}
function makeList(oData) {
var oOptions = oData.getElementsByTagName("option");
var oSelect = document.getElementById("softwaresSelect");
oSelect.innerHTML = "";
for(var i=0,c=oOptions.length;i<c;i++) {
var oOption = document.createElement("option");
oOption.value = oOptions[i].getAttribute("value");
oSelect.appendChild(oOption);
oOption.innerHTML = oOptions[i].firstChild.nodeValue;
}
}
//-->
</script>
</head>
<body>
<fieldset>
<legend>Programmes</legend>
<div id="programBox">
<div id="loading"></div>
<div id="editors">
<select id="editorsSelect" onchange="selectEditor(this);">
<option value="none">Selection</option>
<?php
mysql_connect($hote, $login, $m_d_p);
mysql_select_db($bdd);
$query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
while($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["name"]."</option>\n";
}
?>
</select>
</div>
<div id="softwares">
<select id="softwaresSelect"></select>
</div>
</div>
</fieldset>
</body>
</body>
</html>
3 réponses
Question avant de donner un réponse tu connais l'ajax ou pas????
car la ce que tu demandes une solution xml avec une requete ajax ou l'on passe un paramètre de la premiere liste!!
Or ce que tu présentes n'est qu'un bout de code de tu récupérais quelque part le copier coller c'est bien mais quand c'est intelligent sinon c'est inutile!!
car la ce que tu demandes une solution xml avec une requete ajax ou l'on passe un paramètre de la premiere liste!!
Or ce que tu présentes n'est qu'un bout de code de tu récupérais quelque part le copier coller c'est bien mais quand c'est intelligent sinon c'est inutile!!
