Voltar Botão Handle de forma dinâmica

https://stackoverflow.com/questions/1724739

19-09-2019
|

Pergunta

Eu tenho um formulário com uma variedade de campos de texto. O usuário (através de javascript) pode adicionar um número arbitrário de campos de texto ao formulário. Após enviar o formulário e pressionando o botão de volta o formulário exibe apenas com os campos que estavam na forma original quando foi processado primeiro (quaisquer campos de texto adicionais são perdidos). Qual é a melhor maneira de permitir que o botão Voltar para tornar a forma no estado quando o usuário enviou isso? Todas as idéias são bem-vindas, algumas coisas que eu tentei são:

Coloque os dados do formulário em um cookie (este não funciona ótimo para um casal razões, mas a principal causa de morte para mim é que os cookies estão limitados a 4K em tamanho)
Coloque os dados do formulário em uma sessão
Envie o formulário via AJAX e depois gerir a história

Obrigado pela ajuda. Eu publiquei uma forma de teste no meu site em http://fishtale.org/formtest/f1.php . Também aqui é uma forma simples exibindo o comportamento que mencionei:

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

Este é semelhante a uma pergunta que eu postei há um tempo atrás, Best Way Para o botão traseiro para deixar Formulário de dados , no entanto, elementos deste formulário são modificados pelo usuário.

Solução

Não consigo encontrar uma biblioteca pré-escrita para isso, mas eu tenho certeza que a sua sido resolvido antes. Se eu tivesse que eu mesmo gostaria de tomar esta abordagem:

Use a padrão de comando para que cada método que modifica UI da página adicionando controles também invoca um método AJAX para empurrar o método invocado (representação Javascript textual) em uma fila armazenadas na sessão do servidor.
Depois que o corpo onload concluída, use um método AJAX para consultar a sessão do servidor para uma fila de comando para a página que o usuário está ligado. Se um é recuperado, apenas eval cada membro da fila para reconstruir UI da página na mesma ordem que o usuário fez.

Tenha em mente com esta abordagem que está a gravar não apenas adições de controles, mas remoções bem. Você vai exigir que os titulares de estado separados para controles de entrada do usuário, como caixas de texto (você também irá provavelmente necessidade sessão do lado do servidor com acesso método AJAX).

Outras dicas

Que tal criar um <input type="hidden"> (sem name ou fora da forma por isso não é submetido) no qual você armazena uma lista codificada de campos extra para adicionar e seus valores? Enquanto o navegador não vai se lembrar campos recém-adicionado em ‘voltar’, ele irá lembre-se os valores dos campos ocultos que estavam na forma desde o início.

Aqui está um exemplo que salva os campos extra no descarregamento documento e as recupera no 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>

Notas:

Você pode usar form.onsubmit vez de window.onbeforeunload se você só precisa se lembrar de valores através de uma submissão. onunload não funciona como alguns navegadores já terá armazenados os antigos valores do formulário antes que o evento ocorre.
No Firefox a posição da entrada escondida é importante. Por alguma razão, se você colocá-lo abaixo dos campos dinamicamente adicionados, Firefox fica confuso sobre qual a entrada é e não consegue lembrar o valor.
Este exemplo não funciona no Opera. Ele pode ser feito para funcionar no Opera, mas é uma dor. chamada de eventos de carga e descarga da Opera é inconsistente então você tem que usar onsubmit vez, ou definindo o campo escondido em um intervalo de pesquisa, ou algo assim. Pior ainda, quando Opera lembra os valores de campo de formulário anteriores, ele realmente não preenchê-los até que após onload foi despedido! Isso já faz com que muitos, muitos problemas de scripts de formulário. Você pode resolver isso, colocando um pequeno tempo de espera em seu onload que esperar até que os valores do formulário ter ido se você precisar de compatibilidade Opera.

Nos bons navegadores, você pode tê-lo funcionando perfeitamente simplesmente não quebrá-lo .

O Firefox cache 1,5 usos na memória para páginas inteiras da Web, incluindo seus estados JavaScript, para uma única sessão do navegador. Indo para trás e para a frente entre as páginas visitadas não requer nenhum carregamento da página e os estados de JavaScript são preservados. fonte

Este é suportado no Opera e WebKit também. No entanto cache do DOM só é possível em você seguir as regras:

Não use onunload, onbeforeunload.
Não use Cache-control: no-store ou must-revalidate.
Em PHP você deve alterar session.cache_limiter de patently_ridiculous (eu acho que eles soletrá-lo nocache) para none.
```
session_cache_limiter('none');
```
Infelizmente HTTPS também está fora.

Se você não forçar navegadores para recarregar a página, eles não vão. Eles vão manter o DOM e seus valores inalterados, exatamente como RFC 2616 sugere .

No entanto , se você está procurando lugar para esconder os dados, não há corte incrivelmente inteligente - window.name pode armazenar megabytes de dados . Não é enviada ao servidor, e não é compartilhada entre as janelas.

Existem também os cookies Flash e HTML 5 localStorage é implementado no IE8 e Safari 4.

Passo 2:. O script processamento dos puts forma os valores inseridos em uma matriz e lojas que array em uma variável de sessão (ou text / db / o que você achar apropriado)

Passo 1:. O script que gera a forma adiciona um javascript (que por sua vez preenchimentos na forma) se essa variável de sessão é encontrada (e também limpa a variável de sessão)

Você pode fazer seu próprio botão de volta no topo da página web e torná-lo maior e mais bonita do que o botão padrão web navegador de volta.

Sob o capô seu código poderia saber o que o estado anterior era e reverter para ele ou se não havia estado anterior pode talvez chamar a função Voltar do navegador?

Bloquear o uso do botão de volta. Quando o botão Voltar é pressionado, são renderizados a página anterior para o usuário com os novos campos incluídos, de forma visível se isso faz sentido, ou escondidos. Dessa forma, o usuário é capaz de usar o botão voltar normalmente e você tem total controle sobre a aparência da página '' anterior ''.

Em seu caso de uso específico, você só precisa processar a página com todos os campos visíveis e preenchidos com os valores que foram submetidos.

Este é um padrão bom seguir para qualquer tipo assistente do processo onde você fornecer uma seqüência de formulários para o usuário a preencher e eles podem escolher para voltar a uma forma anterior.

Para deixar bem claro, eu estou sugerindo que você use este conselho em capturar o evento onUnload para gatilho formulário de inscrição (para que você obtenha os valores inseridos) e rerender a página anterior que "back" teria exibido (sem os valores). A única alternativa é usar Ajax para enviar os valores inseridos cada vez que as folhas usuário um campo, e depois ter cada cheque página com o servidor via AJAX para recuperar valores adicionais para exibição.

Aqui estão algumas páginas adicionais que abordam a tomar o controle sobre a função do botão para trás e usando o evento de descarregamento de persistir dados de formulários:

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow