Menu
javascript/Ajax:
I have to refresh 4 mutiple independent listbox that depend of the
result of SQL queries. So, for that purpose I created 4 XMLHttpRequest
objects:
<code>
if (window.XMLHttpRequest) //Firefox
{
oXmlhttp1 = new XMLHttpRequest();
oXmlhttp2 = new XMLHttpRequest();
oXmlhttp3 = new XMLHttpRequest();
oXmlhttp4 = new XMLHttpRequest();
}
else if (window.ActiveXObject) //IE
{
oXmlhttp1 = new ActiveXObject(“Microsoft.XMLHTTP”);
oXmlhttp2 = new ActiveXObject(“Microsoft.XMLHTTP”);
oXmlhttp3 = new ActiveXObject(“Microsoft.XMLHTTP”);
oXmlhttp4 = new ActiveXObject(“Microsoft.XMLHTTP”);
}
</code>
My search functions are the following:
<code>
function search(clef,f)
{
oXmlhttp1.open(‘POST’,'<?php echo $_SERVER[‘PHP_SELF’];
?>’,’TRUE’);
oXmlhttp1.onreadystatechange=function()
{
if (oXmlhttp1.readyState==4 && oXmlhttp1.status == 200)
{
document.body.innerHTML = oXmlhttp1.responseText;
}
}
oXmlhttp1.setRequestHeader(“Content-type”,
“application/x-www-form-urlencoded”);
var data = ‘liste1=’+clef
oXmlhttp1.send (data);
// I would like to keep the selection of the list box : whatever I
do , the follwing line doesn’t allow me to keep the selection list !!
f.options[f.selectedIndex].selected=’true’;
}
</code>
As well for search2, search3 et search4 with the following objects:
oXmlhttp2, oXmlhttp3, oXmlhttp4
(XHTML/PHP5) serveur, I have the following form :
<code>
<html>
<head>
<title>AjaxTextBox</title>
<script> … //mes script </script>
</head>
<body>
<form method=”post”>
<select name=”liste1″ onchange=”search(this.value,this);” MULTIPLE
size=”3″>
<?php
//************************************************************************************************************************************
//Connection to database and then request :
$db = pg_connect(“host=localhost port=5432 user=pwasmer
password=pwasmer dbname=AGRUMES”);
$result = pg_exec($db, “SELECT nom FROM station”);
$i=0;
//I save the result in the first list
while ($row = pg_fetch_row($result))
{
echo ‘<option id=$i>”‘.$row[0].'”</option>’;
$i++;
}
print(“</select>”);
//************************************************************************************************************************************
// le selected name is then choosen
$var=$_POST[‘liste1’];
$var=substr($var,2,$var.length-2);
if ($var==null)
{
$var=”%”;
}
//Then search of the result from the last query
$result1 = pg_exec($db, “SELECT nom_latin,id FROM especes WHERE
id_station in (SELECT id FROM station WHERE nom like ‘$var’)”);
$i=0;
//The second list is then full up
print(“<select name=”liste2”
onchange=”search2(this.value,this);” size=”3″ MULTIPLE >”);
while ($row1 = pg_fetch_row($result1))
{
print(“<option id=”$i”>$row1[0]</option>”);
$i++;
}
print(“</select>”);
//************************************************************************************************************************************
//As well the user choise of the second listbox is then choosen
$var2=$_POST[‘liste2’];
if ($var2==null)
{
$var2=”%”;
}
//Query dependant of the choise of the two first listbox
$result2 = pg_exec($db, “SELECT nom FROM varietes WHERE id_espece in
(SELECT id FROM especes WHERE nom_latin like ‘$var2’) “);
print(“<select name=”liste3”
onchange=”search3(this.value,this);” MULTIPLE size=”3″ >”);
//echo ‘<option id=”0″>a</option>’;
$i=0;
while ($row2 = pg_fetch_row($result2))
{
echo ‘<option id=$i>”‘.$row2[0].'”</option>’;
$i++;
}
print(“</select>”);
//***************************************************************************
pg_close($db);
</form>
</body>
</html>
</code>
What are my problems:
-> I am not able to keep the selection when the user makes its own
seletection .
-> When you select the second listbox , the third one is well updated
with the right values , but the second listbox is affecteted and all the
data seams to be lost !!
Do you have any idea why such things hapend ?