Update div content after dynamic select creation

Update div content after dynamic select creation

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:



On first select choise:



On second select choise:



Here's the code:

index.php

  1. <html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9.     $('#sel_continenti').change(function(){
  10.         var cont = $('#sel_continenti').attr('value');
  11.        
  12.         $.post("selection.php", {id_cont:cont}, function(data){
  13.             $("#sel_nazioni").empty();
  14.             //$("div#result").empty();
  15.             $("div#nazioni").empty();
  16.             $("div#result").append("prova2<br />");
  17.             //$("div#result").append(document.createTextNode("prova"));
  18.             $("#sel_nazioni").prepend(data);
  19.             $("div#nazioni").prepend(data);
  20.         });
  21.     });
  22.    
  23.     $('#sel_nazioni').change(function(){
  24.         var id_naz = $('#sel_nazioni').attr('value');
  25.    
  26.         $.post("result.php", {id:id_naz}, function(data){
  27.             $("div#result").empty();
  28.             $("div#result").append("prova3<br />");
  29.             //$("div#result").prepend(data);
  30.         });
  31.     });
  32. });
  33. </script>
  34. </head>
  35. <body>
  36. <div id="continenti">
  37. <?php
  38. include_once 'option.class.php';
  39. $obj = new Option();
  40. $obj->ShowContinenti();
  41. ?>
  42. </div>
  43. <div id="nazioni">
  44. <!--Seleziona una nazione:<br>
  45. <select id="sel_nazioni" name="sel_nazioni"><option value="no">Scegli...</option>
  46. </select>-->
  47. </div>
  48. <div id="result">
  49. prova1<br />
  50. </div>
  51. </body>
  52. </html>



File option.class.php

  1. <?php
  2. class Option
  3. {
  4.     public $conn;
  5.         public function __construct()
  6.         {
  7.             $this->DbConnectAndSelect();
  8.         }
  9.         protected function DbConnectAndSelect()
  10.         {
  11.             //include_once "db_config.php";
  12.             //$this->conn = mysql_connect($db_host,$username,$password);
  13.             $this->conn = pg_connect("host=**** port=**** user=**** password=**** dbname=****");
  14.             //mysql_select_db($db_name, $this->conn);
  15.             return TRUE;
  16.         }
  17.         public function ShowContinenti()
  18.         {
  19.             echo 'Seleziona un continente:<br>';
  20.             echo '<select id="sel_continenti" name="sel_continenti"><option value="no">Scegli...</option>';
  21.             $sql = "SELECT * FROM continenti";
  22.             //$res = mysql_query($sql,$this->conn);
  23.             $res = pg_query($this->conn,$sql);
  24.                 while($row = pg_fetch_row($res))
  25.                 {
  26.                     echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
  27.                 }
  28.             echo '</select>';
  29.         }
  30.         /*public function ShowNazioni()
  31.         {
  32.             if($_POST['id_cont'] == "no")
  33.             {
  34.                 die;
  35.             }
  36.             //echo 'Seleziona una nazione:<br>';
  37.             //echo '<select id="sel_nazioni" name="sel_nazioni">';
  38.             $id_cont = $_POST['id_cont'];
  39.             $sql = "SELECT * FROM nazioni WHERE id_cont=$id_cont";
  40.             $res = pg_query($this->conn,$sql);
  41.                 //echo'<option value="no">Scegli...</option>';
  42.                 while($row = pg_fetch_row($res))
  43.                 {
  44.                     echo '<option value="' . $row[0] . '">' . $row[2] . '</option>';
  45.                 }
  46.             //echo '</select>';
  47.         }*/
  48.        
  49.         public function ShowNazioni()
  50.         {
  51.             if($_POST['id_cont'] == "no")
  52.             {
  53.                 die;
  54.             }
  55.             echo 'Seleziona una nazione:<br>';
  56.             echo '<select id="sel_nazioni" name="sel_nazioni">';
  57.             $id_cont = $_POST['id_cont'];
  58.             $sql = "SELECT * FROM nazioni WHERE id_cont=$id_cont";
  59.             $res = pg_query($this->conn,$sql);
  60.             echo'<option value="no">Scegli...</option>';
  61.             while($row = pg_fetch_row($res)) {
  62.                 echo '<option value="' . $row[0] . '">' . $row[2] . '</option>';
  63.             }
  64.             echo '</select>';
  65.         }
  66.         public function ShowResult()
  67.         {
  68.             echo "dentro shoresult()";
  69.             if($_POST['id'] == "no")
  70.             {
  71.                 echo "post id=no";
  72.                 die;
  73.             }
  74.             echo '<br><br>Hai scelto la nazione: ';
  75.             $id = $_POST['id'];
  76.             $sql = "SELECT * FROM nazioni WHERE id=$id";
  77.             $res = pg_query($this->conn,$sql);
  78.             $row = pg_fetch_row($res);
  79.             echo 'id: '.$row[0].' id_cont: '.$row[1].' nazione: '.$row[2];
  80.         }
  81. }
  82. ?>



File selection.php

  1. <?php
  2. include_once 'option.class.php';
  3. $obj = new Option();
  4. $obj->ShowNazioni();
  5. ?>



File result.php

  1. <?php
  2. include_once 'option.class.php';
  3. $obj = new Option();
  4. $obj->ShowResult();
  5. ?>


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