Ciao a tutti!
Sto provando a mettere un select dinamico ajax in cui nel primo devono esserci tutta la lista di "fila" che va a pescare nel database. In base alla fila scelta deve mostrare nel secondo select tutti i "posto" disponibili per quella fila (anche li lo va a prendere dal database).
Ho fatto questo codice. Nel database ho inserito come prova:
fila 1 posto 1
fila 1 posto 10
fila 7 posto 2
fila 7 posto 10
Per quanto riguarda la fila 1 funziona perfettamente... nel secondo select mi compaiono 1 e 10......
ma quando vado a selezionare la fila 7 non vi è nulla nel secondo select, non posso neanche cliccare la freccetta per espendere il select (spero mi capiate
).
Vi posto i 3 file:
index.html
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vendita Ticket</title>
<script type="text/javascript" src="lists.js"></script>
<style type="text/css">
body {
font-family: verdana, sans-serif;
font-size: 9pt;
}
select {
width: 200px;
margin: 5px 0;
}
fieldset {
border: 1px solid #d0d0d0;
padding: 5px;
width: 220px;
}
</style>
</head>
<body>
<form action="index.html" method="post">
<fieldset>
<label for="fila">Fila</label>
<select name="fila" id="fila" onchange="loadList('posto', getSelected(this))" >
</select>
<label for="posto">Posto</label>
<select name="posto" id="posto">
</select>
<input type="submit" name="submit" value="Invia" />
</fieldset>
</form>
<script type="text/javascript">
//<![CDATA[
loadList('fila', 0);
//]]>
</script>
</body>
</html>
list.js
codice:
var xmlHttp = getXmlHttpObject();
function loadList(tb, id){
xmlHttp.open('GET', 'request.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
//Aggiunge un elemento <option> ad una lista <select>
var option = document.createElement("option");
option.value = value,
option.text = text;
try {
select.add(option, null);
} catch(e) {
//Per Internet Explorer
select.add(option);
}
}
function getSelected(select) {
//Ritorna il valore dell'elemento <option> selezionato in una lista
return select.options[select.selectedIndex].value;
}
function stateChanged() {
if(xmlHttp.readyState == 4) {
//Stato OK
if (xmlHttp.status == 200) {
var resp = xmlHttp.responseText;
// riguarda fila
if(resp) {
//Le coppie di valori nella stringa di risposta sono separate da ;
var values = resp.split(';');
//Il primo elemento è l'ID della lista.
var listId = values.shift();
var select = document.getElementById(listId);
//Elimina i valori precedenti
while (select.options.length) {
select.remove(0);
}
if(listId == 'fila') {
addOption (select, 0, '-- Selezionare la fila --');
}
var limit = values.length;
// mi "stampa" nel select tutte le file
for(i=0; i < limit; i++) {
var pair = values[i].split('|');
//aggiunge un elemento <option> (il numero della fila)
addOption(select, pair[0], pair[1]);
}
}
} else {
alert(xmlHttp.responseText);
}
}
}
// controllo per il browser
function getXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
e per ultimo request.php
Codice PHP:
require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera eventuali caratteri speciali in table
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);
switch($tb) {
case 'fila':
$sql="SELECT id, num_fila
FROM `$tb`
ORDER BY num_fila";
break;
case 'posto':
$sql="SELECT id, num_posto
FROM `$tb`
WHERE id_fila=$pid
ORDER BY num_posto";
break;
}
//
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
while ($row = mysql_fetch_row($result)) {
$out .= $row[0] . '|' . $row[1] . ';';
}
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');
?>
Ho trovato che l'errore sta che il file request.php non riceve correttamente l'id in questa riga:
Codice PHP:
$pid = (int)$_REQUEST['id'];
perchè ho provato che se al posto di quella riga metto ad esempio
mi stampa i posti relativi all'id 2 (ovviamente qualsiasi fila io scelga perchè ho impostato la variabile manualmente).
Quindi l'errore penso sarà nel file che invia l'id, ovvero list.js, ma non riesco a trovarlo!!!
Qualcuno mi darebbe una mano???
Grazie mille in anticipo!
Ciao!
Rispondi quotando
Vi prego"!
