Effetto loading chiamata ajax
- Questo topic ha 1 risposta, 2 partecipanti ed è stato aggiornato l'ultima volta 11 anni, 11 mesi fa da jqueryitalia.
- AutorePost
- 26 Maggio 2012 alle 16:40 #1705RiddlerPartecipante
Salve a tutti,
non sono un grande esperto di JQuery, lo sto iniziando ad usare ora, ma ho fatto qualcosina in javascript.Vorrei sfruttare un lager in trasparenza per l’invio di una mail attraverso il modulo contatti, la parte server è funzionante e riceve correttamente i dati per l’invio, ma vorrei far visualizzare un messaggio di attesa (tipo loading … con testo) durante la comunicazione con il server.
E’ possibile anche per il messaggio di avvenuta spedizione o errore fare un popup un po’ più bellino del solito alert?
Grazie in anticipo
Questo è il mio form con la parte jquery
form:
<form method=”post” action=”/” id=”input_form”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name” required placeholder=”Name” />
<label for=”name”>Subject:</label>
<input type=”text” name=”subject” id=”subject” required placeholder=”Subject” />
<label for=”email”>Email:</label>
<input type=”email” name=”email” id=”email” required placeholder=”email@example.com” />
<label for=”message”>Message:</label>
<textarea name=”message” id=”message” required></textarea>
<input type=”submit” value=”Send Message” />
</form>JQuery
$(document).ready(function(){
$(“#input_form”).submit(function(){
var querystring = $(this).serialize();
function pippo(){
var dt = new Date();
}
$.ajax({
url: ‘http://127.0.0.1:8080/ServiceM.ashx’,
type: “POST”,
data: querystring,
success: function(result) {
$(“#load”).fadeIn();
$(“#popupContact”).fadeOut(“slow”);
popupContactStatus = 0;
var msg = “PROBLEMI con il server, provare in un altro momento…”;
if(result){
msg = (result==’OK’) ? ‘Magic Endor Vi risponderà appena possibile.nRiceverete copia della mail appena inviata.’ : ‘PROBLEMI durante l’invio della mail, riprovare più tardi …’;
}
$(“#load”).fadeOut(“slow”);
alert(msg);
}
});
return false;
});
});—
Riddler31 Maggio 2012 alle 07:33 #2063jqueryitaliaAmministratoreCiao Riddler.
Per il loader, puoi utilizzare il callback beforeSend della funzione ajax.Per il messaggio di corretto invio (o altre tipologie di messaggi) ti consiglio jQuery Alert Dialogs di abeautifulsite che trovi qui http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/ - AutorePost
- Devi essere connesso per rispondere a questo topic.