Salve a tutti,
come da titolo avrei un problema con le select e l'interazione jquery->php->mysql:
io vorrei che all'apertura della pagina riempisse il primo select in automatico, dopo di che, riempirà il secondo select in base al dato scelto sul primo... e infine vorrei, che una volta selezionato il secondo dato, nel div "risultato" apparisse il codice generato dalla funzione richiamata al momento della select.
quindi: sbirciando fra varie guide, sono arrivato a questo risultato, le select funzionano, ma non appare alcunchè nel div "risultato" al momento della seconda select:
codice:
<?php include('db.php');
include('func.php');
include('msg.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chained Select Boxes using PHP, MySQL and jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#coll').change(function(){
$.get("func.php", {
func: "coll",
id_tpa: $('#coll').val()
}, function(response){
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjaxTpb(response) {
$('#dati_viaggio').html(unescape(response));
$('#dati_viaggio).fadeIn();
}
</script>
</head>
<body>
<div id="container" class="container">
<div id="mod_1" class="">
<form action="" method="post">
<span>
<div class="stile-select">
<select name="coll" id="coll">
<option value="" selected="selected" disabled="disabled"><?= $msg_f_pa ?></option>
<?php tpa(); ?>
</select>
</div>
</span>
<span id="result_1" >
<div class="stile-select">
<select name="#" id="#">
<option value=" " disabled="disabled" selected="selected"><?= $msg_f_pb ?></option>
</select>
</div>
</span>
</form>
<span id="dati_viaggio">
</span>
</div>
</div>
</div>
</body>
</html>
func.php
codice:
<?php
/* seleziona i porti di partenza,
* ne verifica il nome e crea la select "coll" per l'analisi dei porti di ritorno.
*/
function tpa() {
$result = mysql_query("SELECT DISTINCT id_tpa, np FROM tpa")
or die(mysql_error());
while($pp = mysql_fetch_array( $result ))
{
echo '<option value="'.$pp['id_tpa'].'">'.$pp['np'].'</option>';
}
}
/* assegna la variabile "id_tpa" e rimanda alla funzione "coll"
*/
if($_GET['func'] == "coll" && isset($_GET['func'])) {
coll($_GET['id_tpa']);
}
/* verifica i porti disponibili per il ritorno e crea la select per la selezione.
* assegna la variabile id_tpb
*/
function coll($id_tpa) {
include_once('db.php');
$result = mysql_query("SELECT DISTINCT tpb.id_tpb, tpb.np FROM tpb, tratte WHERE tratte.id_tpa = $id_tpa AND tratte.id_tpb = tpb.id_tpb")
or die(mysql_error());
echo '<div class="stile-select">';
echo '<select name="tpb" id="tpb">';
while($tpb = mysql_fetch_array( $result ))
{
echo '<option value="'.$tpb['id_tpb'].'">'.$tpb['np'].'</option>';
}
echo '</select> ';
echo '</div>';
echo "<script type=\"text/javascript\">
$('#tpb').change(function(){
$.get(\"func.php\", {
func: \"tpb\",
id_tpb: $('#tpb').val()
}, function(result){
setTimeout(\"finishTpb('\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
if($_GET['func'] == "tpb" && isset($_GET['func'])) {
tpb($_GET['id_tpb']);
}
function tpb($id_tpb) {
echo "hai scelto '$id_tpa' & '$id_tpb'";
}
?>
Qualcuno è così cortese d spiegarmi dove sbaglio?
grazie mille, non riesco proprio a capirne il principio