7

Eu tenho uma tabela que, dependendo da quantidade de um valor X, ele insere um conjunto de atributos ao fim da página (campos). Esse elementos têm eventos atribuídos à eles. Mas essa não é a questão.

Problema é que: como eu adiciono os elementos depois que o DOM está carregado (no momento que eu preencho o valor de X), quando eu perto o botão "Voltar", depois de qualquer operação, e volto à mesma tela, os valores inclusos nesses campos adicionados posteriormente não tem seus valores recarregados e nem mesmo os próprios campos.

EDIT
Cenário:
Eu tenho um formulário que gera campos adicionais, baseados em outros campos já presentes. Esses campos variam em tamanho, logo não posso incluí-los com "display:none" e simplesmente mostrá-los depois.

Então meu usuário preenche o formulário, gera os campos adicionais e aperta o botão de "Salvar", mas o formulário não passa na validação.

Nesse caso eu poderia(deveria) redirecionar o usuário para a tela anterior.
Aí surge o problema: Como os campos adicionais foram gerados depois do DOM ser carregado e renderizado, eles não aparecem quando o usuário retorna à tela, pois o browser pega essas informações do DOM*.

Eu imagino que deve haver uma outra forma de fazer isso que falei, mas isso foi só pra dá um exemplo. Eu realmente preciso incluir no DOM elementos adicionados posteriormente.

Alguém sabe se é possível adicionar esses elementos no DOM, mesmo depois que ele é carregado?

*Essa informação de que ele carrega do DOM eu consegui de fontes "não confiáveis", por comentários em um blog.

5
  • Só para compreender melhor seu problema. Você precisa que os valores persistam na tabela? Commented 6/02/2014 às 16:16
  • Isso! Quando eu sair da página e voltar, gostariam que ainda estivessem (retornassem para) lá. Commented 6/02/2014 às 16:28
  • Sua pergunta não ficou muito clara. Tive a mesma dúvida que o @LuizPicolo, você podia edita-la neste ponto.
    – gvsrepins
    Commented 27/02/2014 às 2:19
  • Também não consegui compreender qual é exatamente o seu problema. Commented 27/02/2014 às 11:51
  • Editei a pergunta, pode ser que ajude a entender melhor o problema. Commented 27/02/2014 às 12:29

5 Respostas 5

6

Acho que a questão não é de adicionar valores no DOM, pois você mesmo disse que está fazendo isso, é em manipular eles de forma que eles recuperem seu estado quando navegando na página.

Um jeito é você salvar os estados dos elementos que você adicionou no browser, seja via Cookie (não é uma boa solução) ou via Web Storage (mais legal essa).

Então ao carregar o DOM, você pode verificar se os dados estão salvos para re-adicionar os elementos no DOM, conforme o necessário e alterar seus atributos.

Mas para responder a pergunta, sim é possível, exemplo:

$('body').append(document.createElement('div'));// vai adicionar uma div no body

// nativo:

document.body.appendChild(document.createElement('div')); // mesma coisa só que sem jquery

EDIT, por causa do comentário do autor:

Se você tem uma tabela e quer armazena-la por completo, para não solicitar novamente para o servidor, uma solução não muito elegante é transformar o conteúdo em string, armazenar em um storage (de preferencia por causa do tamanho) e depois fazer a evaluação na hora de colocar de volta, exemplo:

Salvando conteúdo da tabela:

localStorage.setItem('minhaTabela', $('#minhaTabela').html());

Recuperando conteúdo da tabela:

$('#minhaTabela').html(localStorage.getItem('minhaTabela'));

Verifique se o usuário tem suporte a localStorage e se existe valor salvo no item que vc vai armazenar os dados da tabela.

2
  • Nesse caso, você está adicionando uma DIV. Posso fazer com toda uma tabela HTML? Por que, na minha implementação, uma função php monta toda a tabela, e depois só inclui dentro de uma DIV com id. Seria possível, nesse caso? Commented 6/02/2014 às 18:05
  • Sim seria possível. Vou editar a resposta para falar desse caso então. Commented 6/02/2014 às 18:08
5

Realmente não gosto da ideia de voltar no histórico e manter as novas configurações do form como geradas. Isso elimina a opção do usuário de voltar e corrigir um input errado que pode ter gerado a própria configuração atual do seu form.

Vejo duas soluções:

(1) A minha preferida - trabalhar sempre para frente, sem me preocupar com o handling do histórico do browser: Use um validador de formulário como o Webforms2 (https://github.com/westonruter/webforms2). Já utilizei no passado e é muito versátil. Segue tutorial: http://goo.gl/gmo2H . Fácil de usar em combinação com modernizr.

(2) A que eu não gosto - usar Web Storage com fallback em Cookies. Essa solução é pior, pois você precisa fazer um check se o Web Storage é suportado. Para browsers anteriores implemente um fallback salvando a configuração do form em memória através do uso de Cookies. Quem não tem navegador atualizado geralmente não curte tanto internet e gosta menos quando os sites não funcionam corretamente com seus navegadores ultrapassados. Ainda, nem todo mundo possui Cookies habilitados. Pelo seu uso excessivo, eles já foram considerados os vilões da internet e muita gente antiga ainda tem a mania de desabilitar os Cookies.

Entretanto, meu conselho é: Manter as boas práticas. Formulário deve ser validado no momento do envio, não depois. Se o envio fracassar, o usuário não deve ser redirecionado a nenhuma página, deve permanecer onde está e preencher corretamente os campos realçados. Um approach correto iria validar as informações antes da comunicação browser/bancodedados.

Não conheço nenhum site AAA que redirecionaria um usuário para outra página enquanto o formulário ainda não tiver sido preenchido corretamente e por completo.

Boa Sorte!

5

O melhor caminho para que os dados persistam na tabela é utilizar localStorage ou sessionStorage . HTML5 - LOCAL STORAGE

Aqui tem um exemplo de utilização. Os dados são mantidos no localStorage.

https://github.com/luizpicolo/Snipplr

http://snipplr.herokuapp.com/

5
  • "persistir na tabela" != "Gravar no banco", certo? Commented 6/02/2014 às 16:40
  • 1
    Sim, persistência neste caso no sentido de conservar-se, mas se conservar na tabela. Commented 6/02/2014 às 16:48
  • Editei com um exemplo Commented 6/02/2014 às 16:51
  • ... é que passei muito tempo nos C#'s da vida. Eles costumam chamar dizer que persistência == gravar. Commented 6/02/2014 às 17:07
  • Webforms chega a ser um saco de tanta persistência as vezes desnecessária.
    – 2madera
    Commented 28/02/2014 às 13:58
4
+25

Nesse caso eu poderia(deveria) redirecionar o usuário para a tela anterior.

Discordo absolutamente de que deveria redirecionar o usuário para a tela anterior, caso signifique o que entendi - voltar no histórico do navegador - tipo history.go(-1) (que equivale ao botão "Voltar" do navegador).

Isso, na minha opinião, seria uma gambiarra medonha.

Penso que você poderia fazer uma dentre essas duas coisas:

1ª opção - após processar o formulário no servidor, e o mesmo não validar, seja redirecionando adiante ou não (via header Location para o mesmo URL, caso queira evitar re-envio dos dados do form se o navegador recarregar a página), você vai precisar montar o DOM alterado, a partir dos dados do request no lado do servidor, isto é, ao invés de fazer a alteração no DOM no lado do cliente, usando JavaScript / jQuery, você vai ter que mandar o formulário de volta com o HTML já alterado, a partir do servidor.

2ª opção - validar o form via Ajax, ou seja, você evita o submit padrão, e faz um $.post (ou equivalente) para enviar os dados do formulário por Ajax. Se não validar, beleza, o DOM permanece ali, montado. Se validou e fez o que tinha que fazer, aí então você muda a página via JavaScript com window.location ou a atualiza de algum outro modo. O importante aqui é processar o retorno da chamada Ajax e tomar a ação adequada em caso de erro (mensagem ao usuário) ou sucesso.


Dito isso, me lembrei do MantisBT, um software que eu gosto, mas que em certas condições diz para o usuário voltar para a página anterior quando o envio de um form dá erro. No caso, funciona tranquilo porque não há manipulação do form pelo JavaScript. Aliás, é uma aplicação que existe desde o tempo em que "rodar com JavaScript desabilitado" era um requisito... :-)

No seu caso, se você precisar mesmo rebobinar no histórico do navegador, o jeito é usar web storage como o o pessoal falou. Porém, esteja atento: Internet Explorer 7 e anteriores não suportam web storage. A alternativa seria mesmo cookies.

Mas para que dar passos para trás quando você pode caminhar para frente? Usando post via Ajax você está dando um passinho adiante rumo ao mundo das SPA (Single Page Application)!

1
  • Cara...show de bola!! Commented 1/03/2014 às 13:32
1

Existe a possibilidade de validar os dados sem enviar o formulário? Através do evt.preventDefault()?

Outro jeito, seria pegar todas as informações e fazer o tratamento disso no reload da página. Envia os dados já preenchidos, valida e recria os elementos, você pode criar um javascript que lê um JSON com essas informações, que pode ser colocada através do GET e ir recriando elementos. Ou uma rotina no load da página para validar os dados ao recarregar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .