Bootstrap alert: usare lo stesso div per due messaggi consecutivi

[robertino_salemi]

Ciao ragazzi,
ho creato una semplice funzione che richiamo per visaulizzare dei messaggi all'utente:

function showMessageEvent(textToShow, cssClass) {
$("#resultMessageEvent").fadeOut("slow", function () {
$("#resultMessageEvent").addClass(cssClass);
$("#resultMessageEvent").html(textToShow);
});

$("#resultMessageEvent").show("slow").delay(3000).fadeOut("slow", function () {
$("#resultMessageEvent").removeClass(cssClass);
$("#resultMessageEvent").html("");
});
}


Esempio:
Primo messaggio:
showMessageEvent("Caricamento in corso...", "alert-warning");

Se la chiamata Ajax è success, il secondo messaggio:
showMessageEvent("Evento aggiornato!", "alert-success");

Succede che vengono rimossi la classe e il test riferiti al caso warning e solo dopo viene visualizzato il div success senza testo!

Come mai?

Grazie.

[Kaya]

Ho buttato qua un jksfiddle di test https://jsfiddle.net/cm3g97j2/

Onestamente non ho capito cosa ti aspetti che faccia e che non fa..

[robertino_salemi]

Grazie sempre! :)

Ho commentato alcune righe del tuo script riportandolo al mio caso
https://jsfiddle.net/robertinosalemi/urw04h51/3/

Gli step che vorrei realizzare:
1. Viene visualizzato il primo messaggio
2. Nella funzione showMessageEvent è impostato un delay di 3 secondi, ma vorrei comunque che dopo 1 secondo, venga nascosto il primo e visualizzato il secondo...

[Kaya]

Scusa ma non comprendo: se metti un delay di 3 secondi come puoi impostare che vada via dopo 1 secondo?
vuoi che si nasconda di colpo mentre fa il fadeout dopo 1 secondo ?

non comprendo proprio..

[robertino_salemi]

Forse mi sono spiegato male, scusami.

Vorrei che:
1. l'utente clicca su Inserisci nel form
2. scatta una chiamata ajax che esegue i dovuti controlli e visualizza un messaggio del tipo "Caricamento in corso..."
3. se la chiamata torna success.... qualora il messaggio precedente è ancora visibile, viene nascosto e viene visualizzato il messaggio "Evento inserito".

[aksh37]

Non é la soluzione migliore, ma comunque devi fare uso delle Promises.
Se usi jQuery, se mi ricordo bene, le richieste AJAX ritornano una Promise.

https://jsfiddle.net/aob4v1nj/

[Kaya]

Forse mi sono spiegato male, scusami.

Vorrei che:
1. l'utente clicca su Inserisci nel form
2. scatta una chiamata ajax che esegue i dovuti controlli e visualizza un messaggio del tipo "Caricamento in corso..."
3. se la chiamata torna success.... qualora il messaggio precedente è ancora visibile, viene nascosto e viene visualizzato il messaggio "Evento inserito".

Secondo me hai sbagliato approccio.
Per fare quello che vuoi devi:
chiamare la funzione show, e al suo interno quando è completata allora richiami lo script esterno che fa quello che deve fare e controllando quello che ti ritorna mostrare success oppure errore.
Rapidamente dovrebbe essere

$( "#clickme" ).click(function() {
$( "#book" ).show( "slow", function() {
//qua dentro la funzione show ha finito, richiami lo script che fa i controlli:
$.post( "test.php", { name: "John", time: "2pm" })
.done(function( data ) {
if (data.controlloIsOk == 1){
$("#resultMessageEvent").html("OK VA TUTTO BENE. ANCHE CON FADEOUT");
} else {
$("#resultMessageEvent").html("NO ERRORE " + data.messaggioErrore);
}
});
});
});

Spero di essermi spiegato