Javascript Variabili Scope e Update Risultati

[Gioiello]

Non riesco a capire come mai dichiaro una variabile in un punto iniziale della funzione, poi la funzione esegue una rimozione dei valori di una dropdownlist e reinserimento, ma il valore della dropdownlist è ancora quello vecchio e non riesco a riportarmi quello nuovo nemmeno con la variabile che ho dichiarato all'inizio.

Posto il codice, considerando che i tre alert (visualizzano in ordine: campo_vuoto(ok), campo_nuovo(ok), campo_vecchio(NO!!).

$('#primary').change( function() {   
                            var primary = $('#primary option:selected').text();
                            var secondary_var= $('#secondary option:selected').text();
                               $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    url:"index.php/pages/get_secondary/"+primary,
                                    success: function(secondaries){
                                                $('#secondary').show();
                                                $('#secondary').empty();
                                                alert($('#secondary option:selected').text());  
                                                $.each(secondaries,function(id, secondary){
                                                                        var opt = $('<option />');
                                                                        opt.val(id);
                                                                        opt.text(secondary);
                                                                        $('#secondary').append(opt);
                                                                    }
                                                );
                                                $('#secondary>option:eq(0)').attr('selected', true);
                                                secondary_var= $('#secondary option:selected').text(); 
                                                alert($('#secondary option:selected').text());                            
                                            }
                            });
                               alert($('#secondary option:selected').text());    
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url:"index.php/pages/get_tertiary/"+secondary_var,
                                success: function(tertiaries){
                                            $('#tertiary').empty();
                                            $.each(tertiaries,function(id, tertiary){
                                                                    var opt = $('<option />');
                                                                    opt.val(id);
                                                                    opt.text(tertiary);
                                                                    $('#tertiary').append(opt);
                                            });                                  
                                }
                                });
                         }); 

[Vindav]

è un problema di asincronismo, la funzione success viene richiamata quando il server ha terminato l'operazione

[Gioiello]

Ok, grazie avevo intuito bene però nella confusione non ero andato a guardare anche perché non capivo asincrono con cosa. Grazie Mille.

Per correttezza si aggiunge:

 async:   false, 

tra le option di $.ajax

[Vindav]

è una soluzione, ma io personalmente non agirei cosi, credo sia inutile rendere sincrone le operazioni in questo caso. Ad occhio ti basta includere la seconda chiamata ajax dentro la funzione success della prima chiamata e dovresti risolvere. Tieni conto che con chiamate sincrone se l'elaboriazione del server è molto lunga il client rimarrà "bloccato" fino a che il server non termina l'operazione.