javascript - page - Botón Atrás Manejar Una Forma Dinámica

title js

Question

Tengo un formulario con una matriz de campos de texto. El usuario (a través de javascript) puede agregar un número arbitrario de campos de texto al formulario. Después de enviar el formulario y presionar el botón Atrás, el formulario se muestra solo con los campos que estaban en el formulario original cuando se procesó por primera vez (todos los campos de texto agregados se pierden). ¿Cuál es la mejor manera de permitir que el botón Atrás renderice el formulario en el estado en que el usuario lo envió? Cualquier idea es bienvenida, algunas cosas que he probado son:

• Coloque los datos del formulario en una cookie (esto no funciona muy bien por un par de razones, pero para mí el mayor asesino es que las cookies están limitadas a 4K de tamaño)
• Poner los datos del formulario en una sesión.
• Envíe el formulario a través de AJAX y luego administre el historial.

Gracias por la ayuda. He publicado un formulario de prueba en mi sitio web en http://fishtale.org/formtest/f1.php . También aquí hay una forma simple que muestra el comportamiento que mencioné:

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

Esto es similar a una pregunta que publiqué hace un tiempo, sin embargo, los elementos de este formulario son modificados por el usuario.

Answer 1

¿Qué tal crear un <input type="hidden"> (sin name o fuera del formulario para que no se envíe) en el que almacena una lista codificada de campos adicionales para agregar y sus valores? Si bien el navegador no recordará los campos recién agregados en ''atrás'', recordará los valores de los campos ocultos que se encontraban en el formulario desde el principio.

Aquí hay un ejemplo que guarda los campos adicionales en la descarga de documentos y los recupera en listo:

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

Notas:

• Puede usar form.onsubmit lugar de window.onbeforeunload si solo lo necesita para recordar valores sobre un envío. onunload no funciona ya que algunos navegadores ya habrán almacenado los valores de formulario anteriores antes de que ocurra ese evento.

• En Firefox la posición de la entrada oculta es importante. Por alguna razón, si lo coloca debajo de los campos agregados dinámicamente, Firefox se confunde acerca de qué entrada es y no recuerda el valor.

• Este ejemplo no funciona en Opera. Se puede hacer que funcione en la ópera, pero es un dolor. La llamada de Opera de los eventos de carga y descarga es inconsistente, por lo que tiene que usar onsubmit en su lugar, o establecer el campo oculto en un intervalo de sondeo, o algo así. Peor aún, cuando Opera recuerda valores de campos de formulario anteriores, ¡en realidad no los completa hasta después de que se haya activado la carga! Esto ya causa muchos, muchos problemas de scripting de formularios. Puede solucionar esto poniendo un pequeño tiempo de espera en su carga para esperar hasta que los valores del formulario hayan entrado si necesita compatibilidad con Opera.

Answer 2

Bloquea el uso del botón Atrás. Cuando se presiona el botón Atrás, vuelva a enviar la página anterior para el usuario con los nuevos campos incluidos, ya sea visiblemente si tiene sentido, u oculto. De esa manera, el usuario puede usar el botón Atrás normalmente y usted tiene control total sobre la apariencia de la página '''' anterior ''''.

En su caso de uso específico, solo necesita representar la página con todos los campos visibles y rellenados con los valores que se enviaron.

Este es un buen patrón a seguir para cualquier tipo de proceso de asistente en el que proporcione una secuencia de formularios para que el usuario los complete y ellos pueden elegir regresar a un formulario anterior.

Para que quede perfectamente claro, le sugiero que utilice este consejo para capturar el evento onUnload para activar el envío del formulario (de modo que obtenga los valores ingresados) y para volver a enviar la página anterior que se hubiera mostrado "atrás" (sin los valores) . La única alternativa es usar Ajax para enviar los valores ingresados ​​cada vez que el usuario deja un campo, y luego hacer que cada página verifique con el servidor a través de AJAX para recuperar valores adicionales para mostrar.

Aquí hay algunas páginas adicionales que discuten tomar el control sobre la función del botón Atrás y usar el evento de descarga para conservar los datos de formularios:

• Dominar el botón Atrás con Javascript
• No dejes que la puerta te golpee
• Evento de descarga de navegador cruzado y el botón Atrás
• Datos de formularios de portlet persistentes en WebSphere Portal V5.1

Answer 3

En buenos navegadores, puede hacer que funcione perfectamente simplemente sin romperlo .

Firefox 1.5 utiliza el almacenamiento en memoria caché para páginas web completas, incluidos sus estados de JavaScript, para una única sesión del navegador. Ir hacia atrás y hacia adelante entre las páginas visitadas no requiere la carga de la página y los estados de JavaScript se conservan. source

Esto es compatible con Opera y WebKit también. Sin embargo, el caché DOM solo es posible si se adhiere a las reglas:

1. No use onunload , onbeforeunload .

2. No use Cache-control: no-store o must-revalidate .
   En PHP debes cambiar session.cache_limiter de patently_ridiculous (creo que lo nocache ) a none .

   session_cache_limiter(''none'');

3. Lamentablemente HTTPS también está fuera.

Si no obligas a los navegadores a volver a cargar la página, no lo harán. Mantendrán sin cambios el DOM y sus valores, exactamente como sugiere RFC 2616 .

Sin embargo , si está buscando un lugar para guardar los datos, hay un hackeo increíblemente inteligente: window.name puede almacenar megabytes de datos . No se envía al servidor y no se comparte entre ventanas.

También hay cookies de Flash y HTML 5 localStorage se implementa en IE8 y Safari 4.

Answer 4

No puedo encontrar una biblioteca preescrita para esto, pero estoy seguro de que se ha resuelto antes. Si tuviera que hacerlo yo mismo tomaría este enfoque:

1. Use el patrón de comando para que cada método que modifique la IU de la página agregando controles también invoque un método AJAX para insertar el método invocado (representación textual de Javascript) en una cola almacenada en la sesión del servidor.

2. Una vez que el cuerpo onLoad se complete, utilice un método AJAX para consultar en la sesión del servidor una cola de comandos para la página en la que se encuentra el usuario. Si se recupera uno, solo eval cada miembro de la cola para reconstruir la IU de la página en el mismo orden en que lo hizo el usuario.

Tenga en cuenta que con este enfoque está registrando no solo las adiciones de controles, sino también las eliminaciones. Necesitará titulares estatales separados para los controles de entrada del usuario, como cuadros de texto (también es probable que necesite una sesión del lado del servidor con acceso al método AJAX).

Answer 5

Paso 2: El script que procesa el formulario coloca los valores ingresados ​​en una matriz y almacena esa matriz en una variable de sesión (o texto / db / lo que encuentre apropiado).

Paso 1: La secuencia de comandos que genera el formulario agrega un javascript (que a su vez completa el formulario) si se encuentra esa variable de sesión (y también borra la variable de sesión).

Answer 6

Puede crear su propio botón Atrás en la parte superior de la página web y hacerlo más grande y bonito que el botón Atrás del navegador web estándar.

Bajo el capó, su código podría saber cuál era el estado anterior y volver a él o, si no hubiera un estado anterior, tal vez pueda llamar la función de retroceso del navegador.