[jQuery] Update div content after dynamic select creation

2010-02-03 Thread Shinnuz

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:

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

On first select choise:

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

On second select choise:

http://img269.imageshack.us/i/senzanome3y.png/
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(prova2br /);
//$(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(prova3br /);
//$(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
!--Seleziona una nazione:br
select id=sel_nazioni name=sel_nazionioption
value=noScegli.../option
/select--
/div

div id=result
prova1br /
/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_continentioption
value=noScegli.../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=noScegli.../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=noScegli.../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 'brbrHai 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 

Re: [jQuery] Update div content after dynamic select creation

2010-02-03 Thread Nathan Klatt
On Wed, Feb 3, 2010 at 7:12 AM, Shinnuz theangusyo...@gmail.com wrote:
 Database works, but if you see div#result doesn't update with prova3...
 why? where i'm wrong?

I do believe your problem is you're creating the nation select AFTER
you've set the handler for the select. Move your declaration of
$('#sel_nazioni').change(function() into $.post(selection.php,
{id_cont:cont}, function(data){, a la:

$(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(prova2br /);
   //$(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(prova3br /);
   //$(div#result).prepend(data);
   });
   });
   });
   });
});

Nathan