Pulsante Indietro Maniglia una forma dinamica

https://stackoverflow.com/questions/1724739

19-09-2019
|

Domanda

Ho una forma con una serie di campi di testo. L'utente (tramite javascript) può aggiungere un numero arbitrario di campi di testo alla maschera. Dopo aver inviato il modulo e premendo il tasto back solo la forma viene visualizzato con i campi che erano la forma originale quando è stato reso prima (eventuali campi di testo aggiunti sono persi). Qual è il modo migliore per consentire il pulsante Indietro per rendere la forma nello stato quando l'utente lo ha presentato? Tutte le idee sono benvenute, alcune cose che ho provato sono:

Inserire i dati del modulo in un cookie (questo non funziona grande per una coppia ragioni, ma il più grande assassino per me è che i cookie sono limitati a 4K in dimensioni)
Inserire i dati del modulo in una sessione
Inviare il modulo tramite la tecnologia AJAX e quindi gestire la storia

Grazie per l'aiuto. Ho postato una forma di test sul mio sito web all'indirizzo http://fishtale.org/formtest/f1.php . Anche qui è una forma semplice esibendo il comportamento che ho citato:

<form action="f2.php" method="post">
<input type="text" name="text[]" id="text1"/>
<input type="submit" name="saveaction" value="submit form" />
</form>

<a href="f2.php" id="add_element">Add Form Element</a>

<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script>

<script type="text/javascript" >
    $('#add_element').click(function (event) {
        event.preventDefault();
        $('#text1').after('<input type="text" name="text[]" />');
    });
</script>

Questo è simile a una domanda che ho postato qualche tempo fa, modo migliore per BACK per lasciare Data Form , tuttavia, gli elementi di questa forma sono modificato dall'utente.

Soluzione

Non riesco a trovare una libreria prewritten per questo, ma sono sicuro che il suo stato risolto prima. Se dovessi io stesso vorrei prendere questo approccio:

Utilizza la modello di comando modo che ogni metodo che modifica dell'interfaccia utente della pagina aggiungendo controlli invoca anche un metodo AJAX per spingere il metodo richiamato (testuali Javascript rappresentazione) su una coda memorizzato nella sessione del server.
Dopo onLoad corpo completata, utilizzare un metodo di AJAX per interrogare la sessione del server per una coda di comando per la pagina che l'utente si trova su. Se uno è recuperato, solo eval ogni membro della coda per ricostruire dell'interfaccia utente della pagina nello stesso ordine che l'utente ha fatto.

Tenete a mente con questo approccio si sta registrando non solo aggiunte di controlli, ma rimozioni pure. Avrete bisogno di supporti statali separate per i controlli di input dell'utente, come caselle di testo (sarà anche probabilmente bisogno di sessione sul lato server con AJAX accesso metodo).

Altri suggerimenti

Come sulla creazione di un <input type="hidden"> (senza name o all'esterno del modulo in modo che non è presentato) in cui memorizzare un elenco codificato di campi aggiuntivi per aggiungere e il loro valore? Mentre il browser non si ricorderà campi appena aggiunto su ‘back’, è si ricordare i valori dei campi nascosti che erano in forma fin dall'inizio.

Ecco un esempio che salva i campi extra documento scarico e li recupera il pronto:

<input type="hidden" id="remembertexts" />

<form action="http://www.google.com/" method="get">
    <div id="texts">
        <input type="text" name="text[]" value="" />
    </div>
    <div>
        <input type="submit" />
        <input type="button" id="addtext" value="+" />
    </div>
</form>

<script type="text/javascript">

    // Add new field on button press
    //
    $('#addtext').click(function() {
        addInput('');
    });

    function addInput(text) {
        $('#texts input').eq(0).clone().val(text).appendTo('#texts');
    };

    // Store dynamic values in hidden field on leaving
    //
    $(window).bind('beforeunload', function() {
        var vals= [];
        $('#texts input').each(function() {
            vals.push(encodeURIComponent(this.value));
        });
        $('#remembertexts').val(vals.join(';'));
    });

    // Retrieve dynamic values on returning to page
    //
    $(function() {
        var extratexts= $('#remembertexts').val().split(';').slice(1);
        $.each(extratexts, function() {
            addInput(decodeURIComponent(this));
        });
    });
</script>

Note:

È possibile utilizzare form.onsubmit invece window.onbeforeunload se avete solo bisogno di ricordare i valori su una sottomissione. onunload non funziona come alcuni browser avranno già memorizzati i vecchi valori della forma prima che si verifichi tale evento.
In Firefox la posizione del input nascosto è importante. Per qualche ragione, se lo metti sotto i campi in modo dinamico aggiunto, Firefox si confonde su quale ingresso è e non riesce a ricordare il valore.
In questo esempio non funziona in Opera. Può essere fatto funzionare in Opera, ma è un dolore. chiamata di Opera di carico e scarico di eventi è incoerente quindi bisogna usare onsubmit, invece, o impostando il campo nascosto in un intervallo di polling, o qualcosa del genere. Peggio ancora, quando Opera ricorda precedenti valori di modulo di campo, in realtà non li compila fino dopo onload ha sparato! Questo fa sì che già molti, molti problemi sotto forma di script. È possibile risolvere che mettendo un piccolo timeout nel vostro onload di aspettare fino a quando i valori di forma sono andati in se avete bisogno di compatibilità Opera.

In buone browser si può avere perfettamente funzionante semplicemente non romperla .

Firefox 1.5 utilizza la cache in memoria per intere pagine Web, inclusi i loro stati JavaScript, per una singola sessione del browser. Andando avanti e indietro tra le pagine visitate non richiede il caricamento della pagina e gli stati JavaScript sono conservati. fonte

Questo è supportato in Opera e WebKit troppo. Tuttavia cache di DOM è possibile solo in si tiene fede alle regole:

Non utilizzare onunload, onbeforeunload.
Non utilizzare Cache-control: no-store o must-revalidate.
In PHP è necessario modificare session.cache_limiter da patently_ridiculous (penso che scriverlo nocache) per none.
```
session_cache_limiter('none');
```
Purtroppo HTTPS è anche fuori.

Se non forzare i browser per ricaricare la pagina, non lo faranno. Faranno mantenere il DOM e dei suoi valori invariati, esattamente come RFC 2616 suggerisce .

Tuttavia , se siete in cerca di posto per riporre i dati, non c'è trucco incredibilmente intelligente - window.name può memorizzare megabyte di dati . Non è inviato al server, e non è condivisa da una finestra all'altra.

Ci sono anche i cookie Flash e HTML 5 localStorage sia implementata in IE8 e Safari 4.

Passaggio 2:. Lo script l'elaborazione del modulo mette i valori inseriti in un array e negozi che array in una variabile di sessione (o testo / db / qualunque cosa a trovare appropriato)

Fase 1: Lo script che emette il modulo aggiunge una javascript (che a sua volta riempie il modulo) se tale variabile di sessione viene trovato (e di eliminare la variabile di sessione)

Si potrebbe creare il proprio pulsante Indietro nella parte superiore della pagina web e renderlo più grande e più bella di browser web standard di nuovo il pulsante.

Sotto il cofano il codice poteva sapere quello che lo stato precedente era e tornare ad esso o se non ci fosse stato precedente si può forse chiamare la funzione Indietro del browser?

bloccare l'utilizzo del pulsante Indietro. Quando si preme il pulsante Indietro, debba ripeterlo pagina precedente per l'utente con i nuovi campi inclusi, sia visibilmente se questo ha un senso, o nascosto. In questo modo l'utente è in grado di utilizzare il pulsante Indietro normalmente e si ha il pieno controllo su l'aspetto della 'pagina '' precedente'.

Nel tuo caso uso specifico, è sufficiente a rendere la pagina con tutti i campi visibili e compilato con i valori che sono stati presentati.

Questo è un buon modello da seguire per qualsiasi tipo wizard di processo in cui si fornisce una sequenza di forme per l'utente di compilare e si può scegliere di tornare ad una forma precedente.

Per rendere perfettamente chiaro, sto suggerendo di utilizzare questo consiglio a catturare l'evento onUnload per innescare modulo di presentazione (in modo da ottenere i valori inseriti) e rerender la pagina precedente che "indietro" avrebbe mostrato (senza i valori). L'unica alternativa è quella di utilizzare Ajax per inviare i valori immessi ogni volta che l'utente lascia un campo, e poi ogni pagina di controllo con il server tramite la tecnologia AJAX per recuperare i valori aggiuntivi da visualizzare.

Ecco alcune pagine aggiuntive che discutere prendendo il controllo sulla funzione del pulsante indietro e che utilizzano l'evento unload per salvare i dati forme:

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow