Come popolare una select dinamica da un database con php mysql e ajax, parte seconda

Postato da admin in ajax, php-mysql, Tutorial on 09 11th, 2008 | 16 responses

Questa seconda versione, invece, ha tre select in cascata (invece di due); esempio:

  1. - seleziono il Continente
  2. - poi selezione la Nazione
  3. - poi seleziono la Città

Nome Database: test

Nome Tabella: l1 (tabella Continenti)


– phpMyAdmin SQL Dump
– version 2.10.0.2
– <a href=”http://www.phpmyadmin.net” target=”_blank”>http://www.phpmyadmin.net</a>
–
– Host: localhost
– Generato il: 23 Mag, 2007 at 10:54 AM
– Versione MySQL: 5.0.37
– Versione PHP: 5.2.1

SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;

–
– Database: `test`
–

– ——————————————————–

–
– Struttura della tabella `l1`
–

CREATE TABLE `l1` (
`l1_id` int(11) NOT NULL auto_increment,
`l1_name` text collate latin1_general_ci NOT NULL,
`l1_link` text collate latin1_general_ci NOT NULL,
`l1_order` int(11) NOT NULL,
PRIMARY KEY  (`l1_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=6 ;

–
– Dump dei dati per la tabella `l1`
–

INSERT INTO `l1` VALUES (1, ‘America’, ”, 100);
INSERT INTO `l1` VALUES (2, ‘Europa’, ”, 200);
INSERT INTO `l1` VALUES (3, ‘Asia’, ”, 300);
INSERT INTO `l1` VALUES (4, ‘Oceania’, ”, 400);
INSERT INTO `l1` VALUES (5, ‘Africa’, ”, 500);


Nome Tabella: l2 (tabella Stati)

– phpMyAdmin SQL Dump
– version 2.10.0.2
– <a href=”http://www.phpmyadmin.net” target=”_blank”>http://www.phpmyadmin.net</a>
–
– Host: localhost
– Generato il: 23 Mag, 2007 at 10:54 AM
– Versione MySQL: 5.0.37
– Versione PHP: 5.2.1

SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;

–
– Database: `test`

– Struttura della tabella `l2`
–

CREATE TABLE `l2` (
 `l2_id` int(11) NOT NULL auto_increment,
 `l2_name` text collate latin1_general_ci NOT NULL,
 `l2_link` text collate latin1_general_ci NOT NULL,
 `l2_order` int(11) NOT NULL,
 `l2_l1id` int(11) NOT NULL,
 PRIMARY KEY  (`l2_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=9 ;

-- 
-- Dump dei dati per la tabella `l2`
-- 

INSERT INTO `l2` VALUES (1, 'Giappone', '', 100, 3);
INSERT INTO `l2` VALUES (2, 'Cina', '', 200, 3);
INSERT INTO `l2` VALUES (3, 'Mongolia', '', 300, 3);
INSERT INTO `l2` VALUES (4, 'Stati Uniti', '', 100, 1);
INSERT INTO `l2` VALUES (5, 'Canada', '', 200, 1);
INSERT INTO `l2` VALUES (6, 'Messico', '', 300, 1);
INSERT INTO `l2` VALUES (7, 'Italia', '', 100, 2);
INSERT INTO `l2` VALUES (8, 'Spagna', '', 200, 2);

Nome Tabella: l3 (tabella Città)

-- phpMyAdmin SQL Dump
-- version 2.10.0.2
-http://www.phpmyadmin.net
-- 
-- Host: localhost
-- Generato il: 23 Mag, 2007 at 10:54 AM
-- Versione MySQL: 5.0.37
-- Versione PHP: 5.2.1

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Database: `test`
-- Struttura della tabella `l3`
 
CREATE TABLE `l3` (
 `l3_id` int(11) NOT NULL auto_increment,
 `l3_name` text collate latin1_general_ci NOT NULL,
 `l3_link` text collate latin1_general_ci NOT NULL,
 `l3_order` int(11) NOT NULL,
 `l3_l2id` int(11) NOT NULL,
 PRIMARY KEY  (`l3_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=6 ;

-- 
-- Dump dei dati per la tabella `l3`
-- 

INSERT INTO `l3` VALUES (1, 'Tokio', '', 100, 1);
INSERT INTO `l3` VALUES (2, 'Osaka', '', 200, 1);
INSERT INTO `l3` VALUES (3, 'Kanagawa', '', 300, 1);
INSERT INTO `l3` VALUES (4, 'Roma', '', 100, 7);
INSERT INTO `l3` VALUES (5, 'Milano', '', 200, 7);

Ed ecco i file che servono:

- index.php

codice PHP:

<?
 include('inc/conn.inc.php');
 include('inc/class/select.class.php');
 $obj = new select();
 $l1 = $obj->getL1();
?>
<!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" lang="it">
<head>
 <title>Select dinamiche con dati provenienti da Database</title>
<script type="text/javascript">

var http = createRequestObject();
var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;

function createRequestObject() {
 var ro;
 var browser = navigator.appName;
 if(browser == "Microsoft Internet Explorer"){
 ro = new ActiveXObject("Microsoft.XMLHTTP");
 }else{
 ro = new XMLHttpRequest();
 }
 return ro;
}

function addElement(ogg,val,text){
 var newOption;
 newOption = document.createElement("option");
 newOption.value = val;
 newOption.text = text;
 ogg.add(newOption, where); 
}

function removeElement(ogg){
 if(ogg.options.length > 0){
 while (ogg.options.length) {
 ogg.remove(0);
 } 
 }
}

function disabledElement(ogg,val){
 document.getElementById(ogg).disabled = val;
}

function loadingState(oggId){
 var id = document.getElementById(oggId).value;
 var City = document.getElementById('l3');
 // inizializzazione Città 
 removeElement(City);
 addElement(City,'sel','Seleziona una Città:');
 disabledElement('l3',true);
 http.open('GET','getState.php?id='+id, true);
 http.onreadystatechange = getState;
 http.send(null); 
}

function loadingCity(oggId){
 var id = document.getElementById(oggId).value;
 http.open('GET','getCity.php?id='+id, true);
 http.onreadystatechange = getCity;
 http.send(null); 
}

function getState(){
 var State = document.getElementById('l2');
 removeElement(State);
 id = document.getElementById('l1').value;
 if(id == 'sel'){
 disabledElement('l2',true);
 addElement(State,'sel','Seleziona prima un Continente:');
 }else{
 if(http.readyState == 4){
 if (http.status == 200) {
 var response = http.responseText;
 if(response == ''){
 disabledElement('l2',true);
 addElement(State,'sel','Nessuno Stato Presente');
 }else{
 removeElement(State);
 coppia = response.split(',');
 max = coppia.length;
 addElement(State,'sel','Seleziona uno Stato:');
 for(x=0;x<max;x++){
 val = coppia[x].split('-');
 addElement(State,val[0],val[1]);
 }
 disabledElement('l2',false);
 }
 }
 }else{
 addElement(State,'sel','Loading...');
 }
 }
}

function getCity(){
 var City = document.getElementById('l3');
 removeElement(City);
 id = document.getElementById('l2').value;
 if(id == 'sel'){
 disabledElement('l3',true);
 addElement(City,'sel','Seleziona una Città:');
 }else{
 if(http.readyState == 4){
 if (http.status == 200) {
 var response = http.responseText;
 if(response == ''){
 disabledElement('l3',true);
 addElement(City,'sel','Nessuna voce');
 }else{
 removeElement(City);
 coppia = response.split(',');
 max = coppia.length;
 addElement(City,'sel','Seleziona una Città:');
 for(x=0;x<max;x++){
 val = coppia[x].split('-');
 addElement(City,val[0],val[1]);
 }
 disabledElement('l3',false);
 }
 }
 }else{
 addElement(City,'sel','Loading...');
 }
 }
}
</script>

</head>
<body>
<form name="form">
<div id="content">
 <div id="label1">
 Select 1
 </div>
 <div id="select1">
 <select name="l1" id="l1" onChange="loadingState('l1')">
 <option value="sel" selected="selected">Seleziona un Continente:</option>
 <?
 for($x=0;$x<count($l1);$x++){
 ?>
 <option value="<?=$l1[$x]['l1_id']?>"><?=$l1[$x]['l1_name']?></option>
 <?
 }
 ?>
 </select>
 </div>
 <div id="label2">
 Select 2
 </div>
 <div id="select2">
 <select name="l2" id="l2" onChange="loadingCity('l2')" disabled>
 <option value="sel" selected="selected">Seleziona uno Stato:</option>
 </select> 
 </div> 
 <div id="label3">
 Select 3
 </div>
 <div id="select3">
 <select name="l3" id="l3" disabled>
 <option value="sel" selected="selected">Seleziona una Città:</option>
 </select> 
 </div> 
</div>
</form>
</body>
</html> 
codice PHP:
<?
 include('inc/conn.inc.php');
 include('inc/class/select.class.php');
 $id = $_REQUEST['id'];
 //$id = 7;
 $obj = new select();
 $l3 = $obj->getL3($id);
 $Js = '';
 for($y=0;$y<count($l3);$y++){
 if($y < (count($l3)-1)){
 $end = ",";
 }else{
 $end = "";
 }
 $Js .= $l3[$y]['l3_id']."-".$l3[$y]['l3_name'].$end;
 }
 echo $Js;
?>

- getState.php

codice PHP:

<?
 include('inc/conn.inc.php');
 include('inc/class/select.class.php');
 $id = $_REQUEST['id'];
 $obj = new select();
 $l1 = $obj->getL1($id);
 $Js = '';
 for($x=0; $x<count($l1); $x++){
 $l2 = $obj->getL2($l1[$x]['l1_id']);
 for($y=0;$y<count($l2);$y++){
 if($y < (count($l2)-1)){
 $end = ",";
 }else{
 $end = "";
 }
 $Js .= $l2[$y]['l2_id']."-".$l2[$y]['l2_name'].$end;
 }
 } 
 //echo "text";
 echo $Js;
?>


- inc/conn.inc.php (creare la cartella inc)


codice PHP:
<?php
 // Inizio - Connessione DataBase
 $host = 'localhost';
 $login = 'root';
 $password = 'password';
 $db = 'test';
 $conn = mysql_connect($host,$login,$password);
 mysql_select_db($db,$conn);
 // Fine - Connessione DataBase
?>
- inc/class/select.class.php (creare la cartella class dentro inc)
getCity.php

codice PHP:

<?php
class select{

 function select(){
 }
 
 function getL1($id=''){
 if(!empty($id)){
 $sSQL = "SELECT * FROM l1 WHERE l1_id = $id";
 }else{
 $sSQL = "SELECT * FROM l1 Order by l1_order";
 } 
 $ris = mysql_query($sSQL);
 while($row = mysql_fetch_assoc($ris)){
 $list[] = array('l1_id' => $row["l1_id"],
 'l1_name' => $row["l1_name"]); 
 } 
 return $list; 
 }
 
 function getL2($id){
 $sSQL = "SELECT * FROM l2 WHERE l2_l1id = $id Order By l2_order";
 $ris = mysql_query($sSQL);
 while ($row = mysql_fetch_assoc($ris)) {
 $list[] = array('l2_id' => $row["l2_id"],
 'l2_name' => $row["l2_name"]);
 }
 return $list; 
 }
 
 function getL3($id){
 $sSQL = "SELECT * FROM l3 WHERE l3_l2id = $id Order By l3_order";
 $ris = mysql_query($sSQL);
 while ($row = mysql_fetch_assoc($ris)) {
 $list[] = array('l3_id' => $row["l3_id"],
 'l3_name' => $row["l3_name"]);
 }
 return $list; 
 } 
 
}
?>

Ho fatto delle modifiche significative al Javascript e ho cambiato alcune cose alla classe in php

Vi saluto Max

Commenta questo articolo nel forum. icon smile Come popolare una select dinamica da un database con php mysql e ajax, parte seconda

rating on Come popolare una select dinamica da un database con php mysql e ajax, parte secondarating on Come popolare una select dinamica da un database con php mysql e ajax, parte secondarating on Come popolare una select dinamica da un database con php mysql e ajax, parte secondarating on Come popolare una select dinamica da un database con php mysql e ajax, parte secondarating on Come popolare una select dinamica da un database con php mysql e ajax, parte seconda (4 votes, average: 5,00 out of 5)
 loading Come popolare una select dinamica da un database con php mysql e ajax, parte seconda Loading ...

 

Nessun post correlato

Ti è piaciuto l'articolo? Abbonati ai Feed Rss per tenerti sempre aggiornato

16 commenti »

  1. P1pp0 Dice:

    Complimenti per il codice postato, grazie per l’aiuto.
    Ciao

    comment-bottom
  2. Giovi Dice:

    come mai su firefox non va!!! seleziono la prima categoria…nella seconda select mi viene loading!!!

    comment-bottom
  3. Giovi Dice:

    ho commentato questa parte di codice:

    //if(http.readystate == 4){
    [...]
    // }else{
    // addElement(_2cat,’sel’,'Loading…’);
    // }

    e va sia su firefox ke su IE…
    ma cosa comporta???
    non c’era li a caso!!!

    comment-bottom
  4. admin Dice:

    Ciao Giovi, lo script è testato su internet explorer e non su firefox, per quel che ne so aveva un problema con la cache per questo probabile che nn andava.
    Le linee che hai commentato aggiungono semplicemente la scritta loading al select, togliendole lo script carica direttamente dal database,, quindi probabile che sia il problema della cache, cmq grazie per la segnalazione.
    :)

    comment-bottom
  5. Gian Dice:

    Ciao, avrei un quesito da sottoporvi. Benché abbia trovato lo script molto interessante e funzionale per quanto riguarda il popolamento delle select, ho riscontrato un problema che non sono riuscito ancora a risolvere; tale script l’ho associato alle regioni, alle province e ai comuni d’Italia. Il problema sorge nel momento in cui tali dati debbano essere inseriti nella tabella del DB: anziché inserire il nome delle rispettive regioni, province e comuni, mi inserisce i valori numerisci ad essi associati. Mi sono reso conto ovviamente che vengono presi in considerazione i valori, però appena provo ad associare come valore il nome della regione, le select non non si popolano più.
    Un suggerimento per favore?
    Grazie

    comment-bottom
  6. Gian Dice:

    Per essere più chiaro, a scanso di equivoci, vorrei esprimere meglio il concetto che evidentemente non sarà risultato abbastanza comprensibile. Ho preso il tutorial e l’ho trasportato pari pari secondo le indicazioni, nel mio progetto di lavoro. Senonché, i dati estratti dal DB “test”, popolano le select in maniera ineccepibile. Il problema che tali dati, devono popolare una tabella di un DB. Anziché passare come valore il nome delle “select”, passa i valori numeri ad esse associati. Qualcuno sa come risolvere?
    Grazie

    comment-bottom
  7. admin Dice:

    Ciao Gian,

    hai un link di esempio per capire quello che vui fare?

    Scusami, sara che sono ancora un po rintontito con tutte ste feste ma ancora non ho capito bene cosa vuoi fare.
    :)

    comment-bottom
  8. Gian Dice:

    Ciao Admin, credo sia semplice. I dati estratti dal database mediante le select, possono a loro volta essere inseriti in una nuova tabella del db. Ma questo pare ovvio per qualsiasi altra operazione di input… via email per esempio. I dati associati alle select sono del tipo “etichetta” e del tipo “value”. Se alla tabella del DB voglio mandare i dati ad esempio della regione Campania, della provincia Napoli e del comune Sorrento, nella tabella e nelle rispettive colonne vengono fuori i valori “4 – 15 – 1224″ e non i nomi. Quindi in <option value=”"> viene preso in considerazione il valore valore numerico. Spero di essere stato. chiaro.

    comment-bottom
  9. admin Dice:

    option value=”< ?=$l1[$x]['l1_id']?>”

    cosi come ora questa option ha impostato il valore dell’id, per quel che ho capito tu invece del id vuoi passare il nome o un altro valore del campo giusto?

    Prova a sostituire ['l1_id'] con ['l1_name'], dovrebbe funzionare.

    Ciao :)

    comment-bottom
  10. Gian Dice:

    [url]http://starweb.starnet.it/gianpaolo/select/[/]
    Spero che l’esempio grafico sia più illuminante…

    comment-bottom
  11. Gian Dice:

    http://starweb.starnet.it/gianpaolo/select/
    Spero che l’esempio grafico sia più illuminante…

    comment-bottom
  12. Gian Dice:

    Grazie, ma la sostituzione ['l1_id'] con ['l1_name'] è uno dei primi tentativi che ho fatto; succede che le select non funzionano più. Ciò che mi sembra strano che uno script così tanto elaborato risulti essere fine a se stesso… quando deve passare i dati da un form a una tabella di un DB, passano i rispettivi valori numerici, come si può vedere nell’esempio che ho postato sopra: anziché passare il nome “Campania” passa il valore 4 ad esso associato, al posto di “Napoli” passa il valore 15… idem col comune “Sorrento” che fa passare il valore 1224.

    comment-bottom
  13. admin Dice:

    Ciao Gian,

    capisco cosa vuoi dire, ma in questo caso dovresti riscrivere a monte lo script, questo perche le select selezionano il valore in base all’id, infati come vedi ogni tabella ha un campo con l’id della tabella precedente, per es. la tabella l2 che contiene il campo l2_l1id.

    Qindi modificando il valore passato dalla select, di conseguenza non riesce lo script a selezionare la select successiva, per questo non funziona.

    A questo punto o riscrivi lo script riadattandolo alle te esigenze, oppure nella pagina successiva al form con le select, crei una query sql che seleziona, partendo dall’id il campo corrispondente e poi lo invii al database,per es:
    la select passa al posto di napoli il valore 15, cioe l’id corrispondente, nella pagina successiva, hai bisogno di due query, una per estrarre il campo nome(napoli) partendo dal valore passato dalla query : SELECT * FROM l2 WHERE l2_id = $_POST['citta'], e pi inserire il valore nel database.

    Secondo me a questo punto ,visto che cmq hai la base di questo script, ti conviene riscriverlo riadattandolo alle tue esigenze.

    comment-bottom
  14. Ale Dice:

    Ciao a tutti,

    ho usato lo script su firefox e ho lo stesso errore che aveva Giovi. Solo che anche commentando le righe di controllo se = 4 mi va via l’informazione dal campo stato ma mi fa scegliere la città.

    Come mai viene richiamato questo campo di nuovo se nella funzione non c’è nessuna nuova chiamata alla getState() ?
    Non è che bisogna chiudere la connessione con il server alla fine della getState e non basta http.send(null)?

    comment-bottom
  15. Paolo Dice:

    ciao a tutti,

    mi sono imbattuto anch’io lo stesso errore di Giovi e Ale, ma nemmeno io ho risolto commentando.
    Questo succede su alcune versioni di firefox e su safari.

    Facendo un pò di test e prove, vedo che su questi browser, dopo aver scelto la città http.readyState resta sempre uguale a 1.

    Qualcuno ha trovato qualche soluzione?

    Grazie

    comment-bottom
  16. Paolo Dice:

    risolto il problema descritto sopra:

    spostato tutto il blocco

    if (xmlHttp.readyState == 4) {
    …
    }

    dentro un codice del tipo:

    http.onreadystatechange = function ()
    {
    if (http.readyState == 4)
    {…}
    }

    al fine di controllare il readystate all’interno dell’evento onreadystatechange
    (altrimenti alcuni browser non si “accorgono” del cambio di valore del readystate)

    per maggiori chiarimenti vedete qua:

    http://p2p.wrox.com/ajax/40054-why-readystate-always-1-a.html

    comment-bottom

Trackbacks

RSS feed dei commenti a questo articolo. TrackBack URL

Lascia un commento