Update div content after dynamic select creation

Shinnuz

2010-02-03 13:12:39 UTC

I'm trying to create a page where onchange of first select it appears a
second one (which values, readen from a database, depend on previous choise)
and on choise of second select results are show in a div.

Here some images:

Start:

Loading Image...

/
http://img269.imageshack.us/i/senzanomejg.png/

On first select choise:

Loading Image...

/
http://img534.imageshack.us/i/senzanome2.png/

On second select choise:

Loading Image...

/
http://img269.imageshack.us/i/senzanome3y.png/

Here's the code:

index.php

<html>
<!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=ISO-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('#sel_continenti').change(function(){
var cont = $('#sel_continenti').attr('value');

$.post("selection.php", {id_cont:cont}, function(data){
$("#sel_nazioni").empty();
//$("div#result").empty();
$("div#nazioni").empty();
$("div#result").append("prova2<br />");
//$("div#result").append(document.createTextNode("prova"));
$("#sel_nazioni").prepend(data);
$("div#nazioni").prepend(data);
});
});

$('#sel_nazioni').change(function(){
var id_naz = $('#sel_nazioni').attr('value');

$.post("result.php", {id:id_naz}, function(data){
$("div#result").empty();
$("div#result").append("prova3<br />");
//$("div#result").prepend(data);
});
});
});
</script>
</head>

<body>
<div id="continenti">
<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowContinenti();
?>
</div>

<div id="nazioni">

</div>

<div id="result">
prova1<br />
</div>

</body>

</html>

File option.class.php

<?php
class Option
{
public $conn;

public function __construct()
{
$this->DbConnectAndSelect();
}

protected function DbConnectAndSelect()
{
//include_once "db_config.php";
//$this->conn = mysql_connect($db_host,$username,$password);
$this->conn = pg_connect("host=**** port=**** user=****
password=**** dbname=****");
//mysql_select_db($db_name, $this->conn);
return TRUE;
}

public function ShowContinenti()
{
echo 'Seleziona un continente:<br>';
echo '<select id="sel_continenti" name="sel_continenti"><option
value="no">Scegli...</option>';

$sql = "SELECT * FROM continenti";
//$res = mysql_query($sql,$this->conn);
$res = pg_query($this->conn,$sql);

while($row = pg_fetch_row($res))
{
echo '<option value="' . $row[0] . '">' . $row[1] .
'</option>';
}

echo '</select>';
}

/*public function ShowNazioni()
{
if($_POST['id_cont'] == "no")
{
die;
}
//echo 'Seleziona una nazione:<br>';
//echo '<select id="sel_nazioni" name="sel_nazioni">';
$id_cont = $_POST['id_cont'];
$sql = "SELECT * FROM nazioni WHERE id_cont=$id_cont";
$res = pg_query($this->conn,$sql);
//echo'<option value="no">Scegli...</option>';
while($row = pg_fetch_row($res))
{
echo '<option value="' . $row[0] . '">' . $row[2] .
'</option>';
}
//echo '</select>';

}*/

public function ShowNazioni()
{
if($_POST['id_cont'] == "no")
{
die;
}
echo 'Seleziona una nazione:<br>';
echo '<select id="sel_nazioni" name="sel_nazioni">';
$id_cont = $_POST['id_cont'];
$sql = "SELECT * FROM nazioni WHERE id_cont=$id_cont";
$res = pg_query($this->conn,$sql);
echo'<option value="no">Scegli...</option>';
while($row = pg_fetch_row($res)) {
echo '<option value="' . $row[0] . '">' . $row[2] .
'</option>';
}
echo '</select>';
}

public function ShowResult()
{
echo "dentro shoresult()";
if($_POST['id'] == "no")
{
echo "post id=no";
die;
}
echo '<br><br>Hai scelto la nazione: ';
$id = $_POST['id'];
$sql = "SELECT * FROM nazioni WHERE id=$id";
$res = pg_query($this->conn,$sql);
$row = pg_fetch_row($res);

echo 'id: '.$row[0].' id_cont: '.$row[1].' nazione: '.$row[2];
}
}

?>

File selection.php

<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowNazioni();
?>

File result.php

<?php
include_once 'option.class.php';
$obj = new Option();
$obj->ShowResult();
?>

Database works, but if you see div#result doesn't update with "prova3"...
why? where i'm wrong?

--
View this message in context: http://old.nabble.com/Update-div-content-after-dynamic-select-creation-tp27435815s27240p27435815.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.