integrare ajax a php per combo dipendenti

[13manuel84]

ho 3 combo dipendenti l'una dall'altra (famiglia -> Gruppo -> sottogruppo) e come si intuisce devo selezionare un vlaore dalla prima e a seconda di quel valore popolare la seconda, e poi a seconda del valore della seconda popolare la terza. I valori sono presi da un db. Lo vorrei fare in ajax perché mi sembra più elegante come soluzione e vorrei impararlo una volta per tutte, solo che non ho trovato esempi che mi aggradino, così sto tentando di farlo io seguendo un tutorial, ma mi sono fermato al primo...


ho messo la mia combo:

$s.="<select name=\"famiglia\" id=\"famiglia\" onchange=sndReq(1,0,0);>";
while ($row=mysql_fetch_assoc($res))
{
    $s.="<option value=\"".$row['FAMIGLIA_ID']."\">".$row["FAMIGLIA"]."</option>";
}
$s.="</select>"; 

mentre questo è il js:

function createRequestObject() {  
     var ro;  
     var browser = navigator.appName;  
     if(browser == "Microsoft Internet Explorer"){  
         ro = new ActiveXObject("Microsoft.XMLHTTP");  
     }else{  
         ro = new XMLHttpRequest();  
     }  
     return ro;  
 }  
   
 var http = createRequestObject();  
   
 function sndReq(famiglia, gruppo, sottogruppo) {  
     http.open('get', 'assegna-categorie.php?famiglia='+famiglia);  
     http.onreadystatechange = handleResponse;  
     http.send(null);  
 }  
   
 function handleResponse() {  
     if(http.readyState == 4){  
         var response = http.responseText;  
           
     }  
 }

il problema è che non so come gestire la risposta...come faccio a sapere quale "famiglia" mi è stata selezionata? dove me lo trovo il valore? e poi ocme faccio a popolare la seconda combo in base a quel valore?


Avete un qualche esempio o suggerimento?





Grazie per ogni aiuto!

[13manuel84]

ok! a fargli scrivere la famiglia selezionata ce l'ho fatta, ma ora come lo prendo quel valore?

il mio php è diventato così:

<div id="pippo"></div>  
<?php
echo (isset($_REQUEST['famiglia']))?"famiglia|".$_REQUEST['famiglia']:"";
?>
Elenco delle famiglie disponibili:
<?php
$sql="SELECT * FROM famiglia";
$res=mysql_query($sql);
$s.="<select name=\"famiglia\" id=\"famiglia\" onchange=sndReq(this.value,0,0);>";
while ($row=mysql_fetch_assoc($res))
{
	$s.="<option value=\"".$row['id_famiglia']."\">".$row["famiglia_ita"]."</option>";
}
$s.="</select>";
?>

mentre il js è questo:

function createRequestObject() {  
     var ro;  
     var browser = navigator.appName;  
     if(browser == "Microsoft Internet Explorer"){  
         ro = new ActiveXObject("Microsoft.XMLHTTP");  
     }else{  
         ro = new XMLHttpRequest();  
     }  
     return ro;  
 }  
   
 var http = createRequestObject();  
   
 function sndReq(famiglia, gruppo, sottogruppo) {  
     http.open('get', 'assegna-categorie.php?famiglia='+famiglia);  
     http.onreadystatechange = handleResponse;  
     http.send(null);  
 }  
   
 function handleResponse() {  
     if(http.readyState == 4){  
         var response = http.responseText;
         var update = new Array();
         update=response.split('|');
         document.getElementById('pippo').innerHTML = update[1];
     }  
 }

lui mi scrive il valore corretto selezionato all'interno del div pippo, ma se io volessi passare quel valore ad una funzione php che devo fare?

[13manuel84]

riproviamoci! Questo è il codice completo del mio form:

<?php
echo (isset($_REQUEST['famiglia']))?"famiglia|".$_REQUEST['famiglia']:"";
echo "<form name=\"f1\" id=\"f1\" action=\"f1\" method=\"post\">";
echo "<table class=\"content\">";
echo "<tr>";
echo "<td>";
echo "famiglia";
$sql="SELECT * FROM famiglia";
$res=mysql_query($sql);
echo "<select name=\"famiglia\" id=\"famiglia\" onchange=sndReq(this.value,0,0);>";
echo "<option value=\"\">seleziona</option>";
while ($row=mysql_fetch_assoc($res))
{
    echo "<option value=\"".$row['id_famiglia']."\">".$row["famiglia_ita"]."</option>";
}
echo "</select>";
echo "</td>";
echo "<td>";
echo "<select name=\"gruppo\">";
echo "<option value=\"\">seleziona</option>";
if (isset($famiglia) && $famiglia!="")
{
    $sql2="SELECT * FROM gruppo WHERE id_famiglia=".$famiglia;
    $res2=mysql_query($sql2)or die(mysql_error());
    while ($row2=mysql_fetch_assoc($res2))
    {
        echo "<option value=\"".$row2["id_gruppo"]."\">".$row2["gruppo_ita"]."</option>";
    }
}
echo "</select>";
echo "</td>";
echo "<td>";
echo "sottogruppo";
echo "</td>";
echo "<td>";
echo "aggiungi";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</form>";
?>

mentre il js è identico a prima. Questo "funziona". L'ho messo tra virgolette perché non fa esattamente quello che vorrei, ma vi spiego cosa fa:

Al primo ingresso nella pagina vedo due combo (una riempita con le famiglie e una vuota che dovrà contenere i gruppi). Al momento della selezione della prima combo succede che mi compare un'altra coppia di combo identica alla prima.
La prima coppia è formata da:
famiglie con l'elemento selezionato e gruppo con l'elenco dei gruppi per quella famiglia.
La seconda coppia è formata da due combo vuote!


Perché mi duplica le combo? sto diventando matto! nessuno di voi mi sa spiegare il motivo?

[VaLvOnAuTa]

Ma tu richiami la stessa pagina del form?
Io generalmente uso una pagina esterna.
La funzione js sotto viene chiamata all'onchange della selectfamiglia, svuota (eventualmente) la selectgruppi e manda una richiesta alla pagina "showgruppi.php" esterna

function mostra_gruppi(famiglia) {
 var http = createObject();
 var asd = document.getElementById('selectgruppi');
 while (asd.options.length > 0)
  asd.options[0]=null;
 http.open('get', './ajax/showgruppi.php?famiglia='+famiglia);
 http.onreadystatechange = function handleSelect() {
  if(http.readyState == 4){
   var response = http.responseText;
   eval(response);    
  }
 }
 http.send(null);
}

La pagina showgruppi.php sarà così:

<?php
header("Cache-Control: no-cache, must-revalidate");
$testo = 'objSelect = document.getElementById(\'selectgruppi\'); ';
$testo .= 'objSelect.options[0] = new Option(\'- Seleziona un gruppo -\',\'0\'); ';
$id = $_GET['famiglia'];
$query('SELECT id,nome FROM `gruoppi` WHERE famiglia='.$id.' ORDER BY nome');
$q = mysql_query($query);
$i = 1;
while($row = mysql_fetch_object($q)){
  $testo .= 'objSelect.options['.$i.'] = new Option(\''.$row->nome.'\',\''.$row->id.'\'); ';
  $i++;
 }
} 
$testo .= 'if (objSelect.options.length > 1) { objSelect.disabled = \'\'; } else { objSelect.disabled = \'disabled\'; } ';
$testo .= 'objSelect.options.selectedIndex = 0;' ;
echo $testo;
?>

Che mi restituisce del codice javascript che verrà interpretato con la funzione javascript "eval()" presente in mostra_gruppi().

[13manuel84]

gli esempi che ho visto io richiamavano tutti la stessa pagina, è per questo che l'ho fatto nella medesima pagina.

E quindi nel mio caso dovrei avere 3 pagine diverse? :master:

[VaLvOnAuTa]

Originariamente inviato da 13manuel84
gli esempi che ho visto io richiamavano tutti la stessa pagina, è per questo che l'ho fatto nella medesima pagina.

E quindi nel mio caso dovrei avere 3 pagine diverse? :master:

Io in genere uso degli script esterni che mi restituiscano l'informazione che mi serve (nel caso sia del semplice testo) o del codice javascript da far elaborare alla funzione eval() (nel caso in cui debba popolare delle select).
Nel caso tuo avrei una pagina principale (quella del form) e due script esterni (giocando con il codice potresti ridurla ad un'unico script).
Non so se è la soluzione migliore ma è quella che trovo più comoda.

[13manuel84]

ora provo a farla andare senza l'uso di ajax, poi quando ho un po' più di tempo provo a smanettarci un po'


Intanto grazie mille!

[13manuel84]

io ho fatto un js così:

function mostra_gruppi(famiglia) {
 var http = createObject();
 var asd = document.getElementById('selectgruppi');
 while (asd.options.length > 0)
  asd.options[0]=null;
 http.open('get', 'showgruppi.php?famiglia='+famiglia);
 http.onreadystatechange = handleSelect(http);
 http.send(null);
}

function createObject() {  
     var ro;  
     var browser = navigator.appName;  
     if(browser == "Microsoft Internet Explorer"){  
         ro = new ActiveXObject("Microsoft.XMLHTTP");  
     }else{  
         ro = new XMLHttpRequest(); 
     }  
     return ro;  
}
 
function handleSelect(http) {
  if(http.readyState == 4){
   var response = http.responseText;
   eval(response);    
  }
}

e un php così:

<?php
header("Cache-Control: no-cache, must-revalidate");
$testo = "objSelect = document.getElementById('selectgruppi'); ";
$testo .= "objSelect.options[0] = new Option('- Seleziona un gruppo -','0'); ";
$id = $_GET['famiglia'];
$query('SELECT id_gruppo,gruppo_ita FROM `gruppi` WHERE id_famiglia='.$id.' ORDER BY gruppo_ita')or die(mysql_error());
$q = mysql_query($query);
$i = 1;
while($row = mysql_fetch_object($q)){
  $testo .= "objSelect.options['.$i.'] = new Option('".$row->gruppo_ita."','".$row->id_gruppo."'); ";
  $i++;
}
$testo .= "if (objSelect.options.length > 1) { objSelect.disabled = ''; } else { objSelect.disabled = 'disabled'; } ";
$testo .= 'objSelect.options.selectedIndex = 0;' ;
echo $testo;
?>

ma alla selezione della famiglia non succede assolutamente niente, ho sbagliato qualcosa? :master:

[13manuel84]

ce l'ho fatta!!!


per chi fosse interessato ho seguito passo passo questo ottimo articolo: http://www.masterdrive.it/archive/in...p?t-12869.html

[13manuel84]

ragazzi ho solo un altro piccolo problema......................



perché i caratteri accentati li vedo come un rombo nero con al centro un punto di domanda??