jquery e select dinamiche per provincia, comune e cap

nicogaglia

jquery e select dinamiche per provincia, comune e cap

Ciao a tutti,
premetto che nel db ho una struttura che mi mette in relazione tra di loro province comuni e cap e ho una form di test composta da due select box (una per la provincia e una per il comune) e una textbox nella quale verrà visualizzato il CAP del comune scelto.
Succede che:

Scelgo la provincia
Correttamente mi si popola dinamicamente la combo dei comuni
Scelgo il comune
Correttamente mi si visualizza il cap nella textbox
Il tutto senza ricaricare la pagina... e fin qui tutto bene... il fatto è che dopo aver visualizzato il cap, non mi rimane il comune selezionato nella seconda combo ma il 'selected' va al primo comune della lista. Come mai?

Di seguito il codice
codice:


$(document).ready(function(){

	$("#provincia").change(function() { 
	
	var prov = $("#provincia").val();
	var comune = $("#citta").val();
	
	$.ajax({  
	    type: "POST",  
	    url: "checkcomune.php",  
	    data: "provincia="+ prov + "&comune="+ comune,  
	    success: function(resp){  
	   
	    $("#citta").ajaxComplete(function(event, request, settings){ 
	
				$(this).html(resp);
	   
	   	});
	
	 		} 
	   
	});
	
	
	
	}); //fine provincia.change
	
});	

$(document).ready(function(){
		
	$("#citta").change(function() { 
	
	var comune = $("#citta").val();
	
	$.ajax({  
	    type: "POST",  
	    url: "checkcap.php",  
	    data: "comune="+ comune,  
	    success: function(resp){  
	   
	    $("#cap").ajaxComplete(function(event, request, settings){ 
	
				$(this).val(resp);
	   
	   	});
	
	 		} 
	   
	});
	
	
	
	}); //fine citta.change
	
});

..dove checkcomune.php è la funzione che mi restituisce la selectbox popolata con i comuni relativamente alla provincia selezionata e checkcap.php mi restituisce il cap del comune selezionato.

Qualcuno può dirmi come correggere?

Inizialmente valorizzo il codice comune con value = -1
La checkcomune.php fa questo.....


<?php

// con questa funzione viene estratto l'elenco dei comuni appartenenti alla provincia selezionata

if(isSet($_POST['provincia']))
{
		$provincia = $_POST['provincia'];
		
		include("dbconnection.php");
		
		$comuni = mysql_query("SELECT `id`,`comune` FROM `comuni` WHERE `idprov` = '$provincia'");
		
		while ($row = mysql_fetch_assoc($comuni)) {
			
		    if(isSet($_POST['comune'])){
		    	
		    	$comune = $_POST['comune'];
		    	
		    	if($comune == $row["id"]){
		    		
		    		$selected = "selected=\"true\"";
		    		
		    	}
		    	else {

						$selected = "";		    	
		    	
		    	}
		    	
		    	
		    }
		    
		    $msg .= '<option value=' . $row["id"] . $selected . '>' . $row["comune"] . '</option>';
		    
		}
		
		echo $msg;

}


?>

Sono disponibile per ulteriori info.

Grazie a tutti
Nicola

mirkoagrati

Ciao nicogaglia,
ho notato subito che hai 2 volte il richiamo a $(document).ready().

Prova ad utilizzarne solo uno,
ovviamente quello che da il via a tutte le varie chiamate.

Ciao

nicogaglia

Ciao Mirko,
inizialmente era tutto sotto un $("document").ready ma il comportamento era analogo.
Credo di avere una mezza idea sulla possibile causa ma non riesco a risolverla.
Sembra quasi che quando chiama la checkcap.php, mi richiami ancora la checkcomune.php, ma non passandogli nessun codice comune lui di default si posiziona sul primo.

Grazie
Nicola

mirkoagrati

Ciao,
un problema come quello che sospetti potrebbe essere dovuto a del codice HTML 'sporco' del tipo le due select hanno stesso id o name (o non lo hanno).

Prova a disabilitarle mano mano che prosegui con il flusso delle richieste.
Tipo scelta la provincia, prima di caricare i comuni disabiliti la select delle provincie.

Ciao

nicogaglia

No Mirko,
ogni elemento ha il suo id e il suo name.


<tr>
            <td align="left" valign="middle" >
                <label for="provincia">Provincia:</label>
                <select id="provincia" name="provincia">
                    <option>Seleziona la provincia</option>
                    
                    <?php
                        while ($row = mysql_fetch_assoc($provs)) {
                        ?>
                        <option value="<?php echo $row["id"] ?>"><?php echo $row["provincia"]?></option>    
                        <?php
                        }
                        
                        mysql_free_result($provs);

                    ?>
                    
              </select>
            </td>
          </tr>
          <tr>
            <td align="left" valign="middle" >
                <label for="citta">Città:</label>
                <select id="citta" name="citta">
                    <option value="-1">Seleziona il comune</option>
                </select>
            </td>
          </tr>
          <tr>
            <td align="left" valign="middle" >
                <label for="cap">Cap:</label>
                <input id="cap"  type="text" name="cap"/>
            </td>
          </tr>

mirkoagrati

Ciao,
non mi viene in mente niente, potresti tracciare cosa succede assegnando vari alert agli eventi onfocus() e lostfocus(),
per capire quando avviene il cambiamento (prima, dopo o durante la chiamata ajax).

Hai Firefox?
Con FF e FireBug puoi debuggare comodamente il tuo codice JavaScript tracciando i vari step anche sulla console.

Ciao

nicogaglia

Si, uso già firebug ma solo per controllare le chiamate asincrone e le risposte del server.
Sinceramente non so co me si fa a debuggare il Javascript

Grazie
Nicola

mirkoagrati

Se proprio non ne vieni a capo,
ti consiglio di informarti meglio sulle potenzialità e sull'utilizzo di firebug.

Comunque, sempre per FF,
ci sono altre extension per il debug di codice Javascript.

Ciao

mirkoagrati

Ciao nicogaglia,
mi è venuta in mente una soluzione.

Purtroppo non so dirti perchè si verifica quel problema, ma per ovviare potresti salvarti lo stato dei vari componenti che hai sulla pagina prima di eseguire la chiamata e riutilizzarli per ri-settare li stessi componenti successivamente alla chiamata ajax.

Ciao

nicogaglia

Ci ho pensato....
ci provo e ti faccio sapere.

Grazie
Nicola

nicogaglia

Ehm...
scusa la mia ignoranza ma... a livello di codice tu come faresti?
Mi fai un esempiO?:?

mirkoagrati

Ciao,
io prevederei delle variabili a livello di pagina e le valorizzerei prima di ogni chiamata ajax.

ES:
[PHP]
var provincia = null;
var comune = null;
var cap = null;

$(document).ready(
.................
)
[/PHP]

Prima di richiedere i comuni valorizzi la variabile provincia con la provincia scelta e prima di richiedere il cap salvi il valore scelto del comune nella variabile comune.

Spero di essere stato chiaro.
Ciao

nicogaglia

Rieccomi alla carica...
purtroppo non sono riuscito a fare come mi hai indicato, Mirko.
Vado per ordine....

Seleziono la provincia dalla prima combo.
Mi fa una chiamata alla checkcomune.php e gli passa come parametri:
comune=-1;
provincia=72; ad esempio (value della provincia selezionata)
La check comune mi restituisce giustamente l'elenco di tutti i comuni senza nessuno già selezionato (giustamente perchè -1 non corrisponde a nessuno dei values dei comuni.
Seleziono il comune dalla seconda combo:
Mi richiama alla checkcap.php passandogli come parametro il codice del comune:
comune=72012; ad esempio
Correttamente mi restituisce il cap corrispondente al comune selezionato, ma la combo dei comuni mi mostra sempre il primo comune della lista.

Dovrei quindi fare in modo di ripassare il parametro codice comune corretto alla checkcomune... ma come lo intercetto, al caricamento della pagina?

Grazie
Nicola

mirkoagrati

Ciao,
cerco di portarti parte dell'esempio:

[php]

//variabili globali
var prov_glob= null;
var com_glob= null;
var cap_glob= null;

$("#provincia").change(function() {
//SALVO IL VALORE SCELTO PER LA PROVINCIA
prov_glob = $("#provincia").val();

var prov = $("#provincia").val();
var comune = $("#citta").val();

$.ajax({  
    type: "POST",  
     url: "checkcomune.php",  
    data: "provincia="+ prov + "&comune="+ comune,  
    success: function(resp){  
   
    $("#citta").ajaxComplete(function(event, request, settings){ 

            $(this).html(resp);
   
       });

         } 
   
});

}); //fine provincia.change
[/php]
E poi la stessa cosa quando si scatena l'evento onchange sui comuni.
Finita la function che gestisce la scelta dei comuni riassegni alla select dei comuni il valore salvato in com_glob.

Ciao

nicogaglia

Niente da fare.
[...]

Grazie
Nicola

senamion

Io l'ho fatto usando il plugin jquery: linkedSelect

nicogaglia

Ciao,
ho provato, i risultati non sono proprio come mi aspettavo, è di una lentezza impressionante (forse per la grossa mole di dati da trattare) inoltre mi da un popup con un errore js.

Grazie
Nicola

senamion

A me funziona benissimo, dipende come l'hai applicato, io ho tre select, la prima delle regioni è normale, selezionata la regione presento le provincie e poi i comuni:


$(document).ready(function(){
$('#provincia').linkedSelect('ajaxsave.php?ps=comune','#comune',{firstOption: 'Selezionare il comune', loadingText: 'Attendere...'});
$('#regione').linkedSelect('ajaxsave.php?ps=provincia','#provincia',{firstOption: 'Selezionare la provincia', loadingText: 'Attendere...'});
});

ajaxsave.php mi torna i dati necessari.

nicogaglia

Ah c'è proprio il metodo linkedselect...
Io invece ho cercato quella parola su google e ho trovato altro... che ho provato... con tutte le conseguenze che ti ho descritto.

Ti sarei grato se mi posteresti il link alla libreria.

Grazie mille
Nicola

nicogaglia

Ho provato anche a cercarla tra i plugin sul sito ufficiale ma non me lo ha trovato