[jquery] ordine di esecuzione script sequenziale

[daniele50]

Ciao,
sto usando da poco jquery e non ho molta esperienza con javascript.
Sto scrivendo delle pagine in php per gestire un database ad uso interno (non è un sito pubblicato ma un 'gestionale' per i colleghi). In particolare ho una tabella dove, con delle input, permetto di inserire una serie di dati. Tramite una select si sceglie l'utente, in base a questa scelta vengono caricati e mostrati i dati in queste input. Il mio scopo è quello di eseguire una serie di operazioni in sequenza quando viene scelto l'utente dalla select, ecco cosa ho scritto:

1  $('select#utente').change(function(){
2    $('div#inserisci').fadeTo(0,0);
3    var utente = $('select#utente option:selected').val();
4    if (utente !== '') {
5      scriviUtenteSYS(utente);
6      loadContent(utente, giorno);
7      $('span#avviso01').fadeTo(1000,0);
8      $('div#inserisci').fadeTo(1000,1);
9   } else {
10    $('span#avviso01').fadeTo(1000,1);
11  }
12  });

1 quando l'utente cambia la selezione del menu a tendina (select);
2 faccio sparire il div che contiene i dati;
3 metto nella variabile la scelta fatta dal menu a tendina;
4 se la scelta non è nulla;
5 chiamo la funzione scriviUtenteSYS (scrivo l'operazione nel database per tracciare);
6 chiamo la funzione loadContent (carica i dati leggendoli dal database);
7 faccio sparire un testo;
8 faccio ricomparire il div che contiene i dati (caricati dalla funzione loadContent);
le altre righe non interessano...

Il mio problema è che mi viene mostrato il div con la griglia (8) prima ancora che vengano caricati i dati (6). Dopo circa mezzo secondo che compare il div arrivano anche i dati.
Non posso fare in modo che il div non compaia finchè i dati non vengano completamente caricati?

[m4rko80]

Ciao, hai provato a mettere il fade del div dentro la funzione che carica i dati? in quella dovresti avere l'esito del completamento. Quando ha finito allora mostra il div. Oppure fai un controllo sul return della funzione e a secondo del risultato mostri il div.

[daniele50]

Non ci avevo pensato...

Ho risolto mettendo

$('div#inserisci').fadeTo(1000,1);

alla fine della funzione loadContent:

function loadContent(u, g) {
  $.ajax({
    type: "POST",
    url: "pagine/timesheet/inserisci.php",
    data: "u="+u+"&g="+g,
    success: function(msg){
      $('div#inserisci').html(msg);
      $('div#inserisci').fadeTo(1000,1);
    }
  });
}

Grazie!