L'ultimo articolo scritto su Sir Bit risale a marzo 2014. La versione che state visitando è un archivio: le pagine sono accessibili come sempre e gli autori potrebbero rispondere ai commenti, ma non saranno inseriti dei nuovi articoli. Visita questa pagina per i dettagli.

Jquery – Ricaricare la pagina subito dopo il submit di un form

Pagina di libro in procinto di sfogliarsi

A volte può essere necessario ricaricare la pagina solo dopo un certo lasso di tempo

Per esigenze di un cliente, mi è capitato di dover ricaricare la pagina subito dopo l’invio di un form di login. Più in concreto, la pagina di destinazione del form si apriva a parte, mentre la pagina corrente doveva essere ricaricata subito dopo.
Non solo: la pagina del form doveva ricaricarsi qualche secondo dopo l’invio, così da lasciare il tempo al cookies di settarsi e di “mostrare” al sito che l’utente era effettivamente loggato.

Una simile operazione può essere fatta facilmente con il semplice utilizzo di javascript e jquery.
Il concetto è semplice e richiede un codice di implementazione molto breve.

Ridotto ai minimi termini, il form è qualcosa di simile al seguente. Cliccando sul link “Login”, si richiamerà la funzione login_submit().

1
2
3
4
5
6
<form id="login" method="post" action="" target="_blank">
	<input type="text" name="username" value="" /><br />
	<input type="password" name="password" value="" />
</form>
<br /><br />
<a href="javascript:void(0)" onclick="login_submit()">Login</a>

Diamo un’occhiata al cuore dello script: due semplici funzioni javascript.


1
2
3
4
5
6
7
8
function login_submit(){
	$('#login').submit();
	setTimeout(ricarica_pagina, 3000);
}

function ricarica_pagina(){
	window.location.reload();
}

La funzione login_submit() che era stata richiamata si occupa, prima di tutto, di effettuare il submit del form che ha “id=login” (che, nel nostro caso, avendo “target=_blank” si aprirà in una nuova pagina dopo l’invio dei dati).
Subito dopo fa uso della funzione setTimeout per richiamare la funzione ricarica_pagina(), il cui scopo è di riavviare la pagina corrente. Ma questa funzione sarà richiamata dopo un’attesa di 3 secondi (3mila millisecondi), dando il tempo ai cookies di settarsi.

Copyright immagini

(1) https://www.fontfont.com/fonts/page-sans

Etichette
Etichette:,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.