Tornare indietro con Ajax Jquery

paci

Nuovo Utente
7 Feb 2010
11
0
0
Sto cercando di creare un modulo per inviare messaggi passando attraverso una pagina di controllo dei dati inseriti caricata utilizzando Ajax, lo script che richiama la pagina è il seguente:

HTML:
$(document).ready(function() {  
  $("form#Contatti").submit(function(){  
    var nome = $("#nome").val();
    var Indirizzo = $("#Indirizzo").val();  
    var CAP = $("#CAP").val();
    var Comune = $("#Comune").val();
    var Provincia = $("#Provincia").val();
    var Stato = $("#Stato").val();
    var Email = $("#Email").val();
    var Telefono = $("#Telefono").val();
    var Messaggio = $("#Messaggio").val();
    var informativa = $("#informativa").val();
	$("div#SpazioContatti").html('<div style=\'text-align:center; \'><img src=\'images/LoaderFormeromaN.gif\' /></div>');
    $.ajax({  
      url: "Controllo1.asp?lingua=<%= request.querystring("lingua")%>",  
      type: "POST",
      data :"nome=" + escape(nome) + "&Indirizzo=" + escape(Indirizzo) + "&CAP=" + escape(CAP) + "&Comune=" + escape(Comune) + "&Provincia=" + escape(Provincia) + "&Stato=" + escape(Stato) + "&Email=" + escape(Email) + "&Telefono=" + escape(Telefono) + "&Messaggio=" + escape(Messaggio) + "&informativa=" + escape(informativa),
      dataType: "html",
      success: function(msg) {  
        $("div#SpazioContatti").html(msg)
      },
      error: function(){
        alert("Chiamata fallita!!!");
      } 
    }); 
    return false;  
  });
});

La pagina viene caricata correttamente, però, a questo punto sarebbe necessario il pulsante indietro nel caso in cui l'utente voglia modificare i dati, il classico javascript:history.back() non funziona perché non porta alla pagina contente il modulo già compilato, ma alla pagina visitata in precedenza.
Come posso fare? Qualcuno potrebbe aiutarmi?
Grazie
 

Mr. PHP

Utente Attivo
31 Gen 2013
141
0
0
Credo che non si possa fare il back della pagina visualizzando i contenuti inseriti. Ti consiglio di usare diciamo un Overlay per il ritorno del Messaggio di Successo o Errore. Cmq ho modicato un po il codice vedi se va...
Codice:
<script type="text/javascript">
$(document).ready(function() {  
	
  $("form").submit(function(){  
	
	/* A tutti gl input o select ecc... nel form va inserito il NAME invece che L' ID */
	$.post( 'percorso/file.php', $(this).serialize(), function(data){
		alert(data);
	});
	
    return false; 
     
  });
  
});
</script>
 
Ultima modifica:

paci

Nuovo Utente
7 Feb 2010
11
0
0
Ti ringrazio per lo script che mi hai fornito, certamente più elegante, lo proverò, però io uso asp e temo che senza l'istruzione "escape" il server mi elimini gli spazi bianchi nel contenuto dei vari campi.
Per il momento ho rinunciato alla pagina di controllo, nel sito in cui lo utilizzo, dovendo spedire semplici e-mail, di fatto non è necessaria.
Diverso sarebbe in casi differenti come prenotazioni e/o acquisti, una soluzione sarebbe visualizzare la pagina di controllo in un div contestuale alla form, quindi consentendo le eventuali correzioni un po' come avviene nell'anteprima di questo forum, è un po' macchinoso, e, soprattutto presenta l'inconveniente che utenti poco esperti o distratti potrebbero uscire dalla pagina senza avere di fatto spedito il messaggio, sarebbe quantomeno necessario un'alert che, all'uscita dalla pagina senza l'avvenuta spedizione, avvisi che il messaggio non è stato spedito, sapresti suggerirmi uno script che finzioni in tal senso?
Grazie
 

sebastianoweb

Nuovo Utente
10 Giu 2016
27
0
1
Ciao a tutti, anche io avrei il bisogno di creare un pulsante indietro per tornare al contenuto precedente che è sempre richiamato da ajax.
Io in pratica realizzo app basate su web per iOS e le faccio installare nella home del dispositivo tramite l'installazione di un profilo che aggiunge l'icona nella home.
In quanto le app spesso le strutturo a gab come quelle native spesso c'è la necessità di dover tornare indietro ad esempio se uno apre l'articolo deve poter tornare alla lista titoli.
Mi sembra strano che non ci sia una funzione apposita di jquery o ajax.
Mi è venuta però un idea ma devo ancora testarla:
Forse facendo creare un array ad ogni click si riesce poi a creare dinamicamente un pulsante che torni indietro tramite il numero dell'array. Forse è la soluzione migliore e più semplice, in sostanza ci creiamo noi un history contenente il nome della pagina scelta così ad ogni click il nuovo nome pagina viene inserito in questo array. Che ne pensate voi?
 

sebastianoweb

Nuovo Utente
10 Giu 2016
27
0
1
Ciao a tutti, girovagando per il web mi è venuta in mente la nuova history api che con l'html 5 permette adesso, oltre che a navigare avanti ed indietro tra le pagine, anche di aggiungerne di nuove.

Per tornare alla pagina precedente che era stata richiamata con ajax ed inserita magari in un div, è possibile farlo in maniera molto semplice:

aggiungiamo la seguente riga di codice javascript nella funzione che viene richiamata al click che inserisce la pagina nel div:
history.pushState(null,"Titolo pagina","pagina.ext");
Analiziamo la riga di codice di cui sopra:
history.pushState permette di accedere alla cronologia ed aggiungere un nuovo elemento;
null, primo argomento non è altro che il numero che andrà alla nuova risorsa, se settato su null il numero sarà auto incrementato;
Il secondo argomento è il titolo della pagina;
Il terzo ed ultimo è la pagina vera e propria che dovrà poi essere richiamata;

Il nome della pagina, quindi nell'ultimo argomento è possibile inserire una variabile contenente il nome della pagina portato tramite una funzione e poi con un'aggiunta di scringa aggiungervi l'estensione, qualora nella variabile vi fosse solo il nome del file senza estenzione.

Per essere più chiaro ecco di seguito una mia funzione:

// Creo la funzione che andrò a richiamare in ogni pulsante per cambiare pagina/contenuto:

window.pagina=function (nome_file) {
// agisco sulla history ed aggiungo la pagina così poi potrò ritornarvi
history.pushState(null,nome_file,nome_file+".php");
// nel secondo argomento non ho messo il +".php" in quanto è il titolo e non serve l'estensione, estensione che quindi ho aggiunto nel terzo argomento perchè il file dovrà essere richiamato

// carico la pagina in un div con ajax
$.ajax({
type:"POST",
url:nome_file+".php",
datatype:"html",
success:function (html) {
// selezione il div dove inserire la pagina e la inserisco
$("#contenuto").html(html);
}
});
}

Ora di seguito un pulsante di esempio che apre il file nel div specificato:

<button onClick="pagina('news');">News</button>

Come vedete, nella funzione richiamata con l'onClick ho inserito come parametro il nome news, senza l'estensione perchè tanto l'aggiungerà la funzione in automatico, questo io lo preferisco così come titolo della pagina posso utilizzare lo stesso nome del file con le dovute accortezze di rimozione di eventuali trattini o underscore.

ora la funzione per tornare indietro:

// creo la funzione che dovrà essere chiamata dal pulsante indietro:
window.backPage=function () {
// vado indietro
history.back();
// con l'ajax aggiungo la nuova pagina richiamata andando indietro nel div content
$.ajax({
type:"POST",
url:location.href,
datatype:"html",
success:function (html_precedente) {
$("#content").html(html_precedente);
}
});
}
nell'url ho inserito la funzione location.href di javascript in quanto nell'indirizzo reale della pagina automaticamente andando indietro ci viene ripreso l'indirizzo compreto di tutto il percorso del file tipo http://www.miosito.it/news.php e di conseguenza bisogna inserire tutto l'indirizzo nell'url di ajax in maniera da prendere quel file in url ed inserirlo nel div

tutto qua, più semplice a farsi che a dirsi

ricapitoliamo con un codice completo:

// funzione cambio pagina e aggiunta nella history della stessa

window.pagina=function (pagina) {
history.pushState(null,pagina,pagina+".php");
$.ajax({
type:"POST",
url:pagina+".php",
datatype:"html",
success:function (html) {
$("div#content").html(html);
}
});
}

window.indietro=function () {
history.back();
$.ajax({
type:"POST",
url:location.href,
datatype:"html",
success:function (html_precedente) {
$("div#contenuto").html(html_precedente);
}
});
}

Lascio a voi il metodo che più vi viene comodo per richiamare le funzioni di cui sopra, o chiamatele con un onClick su link o bottone o tramite link con href ad esempio <a href="javascript:indietro();">Indietro</a>
 
Discussioni simili
Autore Titolo Forum Risposte Data
R Aggiornare WP e riuscire poi a tornare indietro. WordPress 24
F Tornare indietro di pagina html da flash Flash 0
cosov sistema per tornare indietro senza usare Javascript Classic ASP 1
M Form: come tornare ai campi già compilati dopo invio PHP 1
T [PHP] tornare alla pagina con gli input già compilati PHP 2
A Link che non mi faccia tornare in cima alla pagine HTML e CSS 3
PoLe Il PoLe sta per tornare!! Discussioni Varie 10
borgo italia tornare alla pagina Javascript 2
G Tornare in un punto preciso dell'animazione! Flash 3
T Tornare alla pagina di provenienza Classic ASP 5
K Bottone torna indietro Javascript 6
D Logout che rientra col tasto indietro del browser PHP 5
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
M [PHP] Parametro valido su pagina avanti e indietro PHP 0
giancadeejay [PHP] Indietro senza ricaricare la pagina PHP 2
O cambio destinazione pulsante indietro del browser. HTML e CSS 0
D Problema pulsante torna indietro HTML e CSS 0
A Disabilitare tasto indietro del telefono Sviluppo app per Android 1
L indietro e avanti tra foto PHP 0
T Errore nel link "Torna Indietro" [era:Funzione javascript] Javascript 0
B ritorno all'indietro PHP 1
Cforever disabilitare tasto indietro del browser ASP.NET 0
G Piccolo manuale online con tasti pag. avanti/indietro Classic ASP 5
G Consiglio per pagina avanti/indietro HTML e CSS 3
dark ..un'ora indietro Supporto Mr.Webmaster 2
F access ricerca record con apostrofo. MS Access 0
F Cerco Hosting con VECCHIE versioni di php Hosting 0
C Come ricreare questo calcolatore di prezzi a step con woocommerce? WordPress 0
C Segnalo barra laterale di navigazione ASSENTE con Chrome Comunicazioni dallo Staff 5
G Guadagna dalla Vendita di Articoli Sponsorizzati con GuestPostMax.com! Guadagnare col Sito 0
P Hosting multidominio con Plesk Hosting 0
L Soluzione con INNER JOIN Database 0
S passare un valore da un form a un file .php con metodo post PHP 4
A Redirect 301 genera url statico con variabili Web Server 0
T problemi con dati menu a tendina HTML e CSS 2
T Query con date MS Access 1
F Url dinamiche da cambiare con categoria, subcategoria e title PHP 2
L Aiuto con DataGridView Visual Basic 1
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
M Aggiunta prodotti nel carrello con lo stesso in e varianti diverse PHP 0
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
B Non riesco a trovare i cognomi con i caratteri speciali in Access (Microsoft 365) MS Access 0
N Problema con position absolute e overflow HTML e CSS 4
M Estrarre soltanto i prodotti con stessa descrizione PHP 10
felino [Wordpress] Gallery con foto selezionabili dall'utente WordPress 0
G Invio di più valori con la stessa checkbox PHP 4
csi Inviare file jpg in locale alla stampante con php PHP 0
otto9due Proteggere una cartella e file con password tramite .htaccess e .htpasswd Web Server 0

Discussioni simili