Tornare indietro con Ajax Jquery

[paci]

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:

$(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]

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...

<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>

 

[paci]

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]

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]

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",
urlagina+".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>