Originariamente inviata da
fermat
e cambiando la funzione così, non ci sono problemi:
...
il refresh viene correttamente eseguito nel done.
Chiaro, con location.reload stai ricaricando la pagina, quindi quel modal, anche se fosse stato aperto, te lo ritroverai chiuso dopo il refresh della pagina. Ma questo prescinde dal problema in questione.
Originariamente inviata da
fermat
in bootstrap 3 in effetti funziona senza problemi.
il problema si presenta in bootstrap 4.
Sì, hai ragione, ho fatto qualche altro test con bootstrap 4 e il problema effettivamente si presenta, eccome.
Dopo qualche accurata ricerca posso dirti che il problema dipendere dal fatto che la chiusura del modal sia richiamata mentre ancora sta avvenendo l'animazione di apertura (animazione dovuta all'applicazione della classe fade), quindi l'azione di chiusura viene praticamente bypassata. Infatti, il fatto che ti succede random, è dovuto ai tempi di attesa della risposta dopo la chiamata AJAX, che sono chiaramente casuali o quantomeno non prevedibili. Se l'attesa è abbastanza lunga da far terminare l'animazione di apertura (quindi il completamento del fade), allora anche la chiusura sarà eseguita; al contrario, se l'attesa è troppo breve perché sia terminata l'animazione di apertura, allora l'azione di chiusura sarà allegramente snobbata.
Puoi testare semplicemente con una cosa del genere:
codice:
$('#modal_wait').modal('show');
$('#modal_wait').modal('hide');
La finestra modale resterà aperta nonostante sia chiamata la chiusura subito dopo la sua apertura e (importante) in console riceverai, da JavaScript, un errore di questo tipo: "Error: Modal is transitioning", che la dice tutta.
Forse una piccola carenza nella gestione delle animazioni del modal, ma comunque risolvibile o aggirabile in qualche modo.
Se puoi fare a meno dell'animazione fade, ti basterà togliere questa classe dal tag HTML e hai risolto. Certo è un modo drastico.
"Ma no! l'effetto dissolvenza ci dev'essere, ecchecavolo!!!"
In questo caso non ci sono metodi ufficiali documentati; alcuni usano un setTimeout per ritardare di qualche mezzosecondo la chiamata della nuova azione così da avere "sicurezza" che la precedente transizione sia terminata ma, per quanto semplice, mi pare comunque un modo piuttosto artigianale e non troppo preciso; altri usano gli eventi forniti col modal ma non ho trovato tecniche troppo valide da applicare al tuo caso in particolare.
Nel mio piccolo ho provato comunque ad architettare qualcosa con l'evento shown.bs.modal. Ho fatto qualche test e pare funzionare. Qui lo script applicato al tuo caso:
codice:
function importFornitori(){
/*
** Imposto qualche variabile di controllo per il transition
*/
$('#modal_wait').data('mi-sto-aprendo-abbiate-pazienza', true)
/*
** Imposto l'evento di fine transition che chiude modal se richiesto
*/
.on('shown.bs.modal', function(t){
$(this).removeData('mi-sto-aprendo-abbiate-pazienza');
if ($(this).data('chiuditi-cribbio')) $(this).off('shown.bs.modal').modal('hide');
})
/*
** Lancio il modal
*/
.modal('show');
$.ajax({
type: "GET",
url: '.............',
complete: function () {
/*
** Controllo se modal è transitioning e gli dico che deve assolutamente chiudersi
*/
if ($('#modal_wait').data('mi-sto-aprendo-abbiate-pazienza'))
$('#modal_wait').data('chiuditi-cribbio', true);
else
$('#modal_wait').modal('hide');
}
});
}
Tieni conto che qui ho preferito lanciare l'apertura del modal prima della chiamata AJAX evitando l'uso dell'evento beforeSend, utilizzato invece da te, perché ritengo che in questo caso non sia necessario interpellare tale evento. La cosa non dovrebbe comunque cambiare anche utilizzandolo.
La chiusura del modal invece è chiamata nell'evento complete, perché tale evento è innescato qualunque sia la risposta della chiamata AJAX. Potrai poi eventualmente definire le tue altre azioni all'interno degli eventi error e success, che poi sono analoghi ai metodi fail e done. Vedi poi tu come meglio impostare la cosa.
E' possibile che ci siano altre soluzioni più o meno valide rispetto a quella proposta qui da me, ma personalmente non ne sono a conoscenza. Ho visto comunque che l'argomento è discusso con varie sfaccettature sul web.
Rispondi quotando
!
