Ecco a breve cosa sto facendo e perché:
- Ho un modulo, che è preelaborato con diversi script secondo l'input dell'utente
- Di solito lo script viene eseguito in meno di secondi, tuttavia uno script potrebbe richiedere circa 10 secondi a seconda del carico del server ecc.
- Ora voglio implementare questo "popup" contenente: "Attendere mentre ... "Sto usando blockUI per questo - semplice plugin per l'implementazione Questo.
- Tuttavia, blockUI per l'esecuzione veloce degli script è abbastanza stupido, come utente vedrà solo il popup lampeggiante sullo schermo.
- Pertanto, voglio impostare il timeout per esso, come 1000ms, in modo da bloccare l'interfaccia utente viene visualizzato anche se il modulo sarebbe già stato completato
- Finora ho provato molte cose, ora sostanzialmente uso preventDefault per annullare l'invio del modulo per setTimeout, ma Im impossibile completare il modulo in seguito.
Modifica: ho scoperto che javascript è un linguaggio asincrono, senza preventDefault (interrompe l'invio del modulo) setTimeout non si avvia mai e l'azione ritorna immediatamente vera.
<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
<input type="submit" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
$("#my_submit").click(function(event) {
$.blockUI({
message: $("#form_loading_message")
});
var form = $("#my_form");
event.preventDefault();
setTimeout(function () {
form.unbind("submit").submit();
$.unblockUI();
}, 1000);
});
Se hai idea di come farlo, per favore, sono aperto anche per altri suggerimenti ...
risposte:
0 per risposta № 1Non ho familiarità con blockUI, ma ... Ecco come lo farei:
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_submit").click(function() {
$("#form_loading_message").show();
setTimeout("submitForm()", 1000);
});
});
function submitForm(){
$("#my_form").submit();
}
</script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
<input type="button" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
</body>
</html>
0 per risposta № 2
Come non ho scoperto come farlojavascript, ho usato la funzione php sleep () prima di reindirizzare l'utente su un'altra pagina. Naturalmente prevenire Default doveva essere rimosso poiché bloccava l'azione di invio. Questa soluzione risolve il caso d'uso per me: solo per mostrare all'utente un messaggio che la pagina sta caricando.