0

Tenho uma página que contém uma tabela dinâmica onde o usuário vai adicionando novas linhas e depois clica num botão para calcular o valor do pedido onde direciono ele para uma nova página mostrando o valor total do pedido e algumas outras informações.

O problema é que quando ele clica em voltar para alterar alguma informação e calcular novamente as linhas que ele adicionou não aparecem, somente a primeira que já foi carregada inicialmente ao abrir a página com as informações que ele digitou.

A função que estou utilizando para adicionar novas linhas está abaixo:

AddTableRow = function () {

    var cols = "";
    var nLinhas = document.getElementsByClassName('row1').length + 1;
    var newRow = $('<tr class="row1" id="' + nLinhas + '">');

    cols += '<td class="cell"><input type="text" name="cods[]" class="cods" size="20%"><input type="hidden" name="apagado[]" value="0"></td>';
    cols += '<td class="cell"><input type="text" name="descri[]" size="40" class="descri" size="50%"></td>';
    //cols += '<td class="cell"><input type="text" name="preco[]" id="preco" size="10%" readonly="readonly" step="any" placeholder="0.00"></input></td>';
    cols += '<td class="cell"><input type="number" name="qtde[]" size="5%"></input></td>';
    cols += '<td class="cell"><input type="text" name="numoc[]" size="5%" maxlength="6"></input></td>';
    cols += '<td class="cell"><input type="text" name="itemoc[]" size="5%" maxlength="4"></input></td>';
    cols += '<td class="cell"><button onclick="RemoveTableRow(this)" type="button" size="5%">Remover</button></td>';
    cols += '</tr>';

    newRow.append(cols);
    $("#itens").append(newRow);

    return false;
};

tela com os produtos digitados

tela com os produtos calculados

tela após clicar em voltar

1
  • você usar uma session para guardar as informações Commented 7/11/2018 às 2:02

1 Resposta 1

1

Vou sugerir um método fácil, embora talvez não seja o ideal.

No objeto window, existe o atributo history, que é uma referência do histórico de navegação da sua aba. Você pode guardar uma informação serializável nesse atributo. Pode ser uma string, um array ou JSON não circular, eu sugiro você guardar o HTML interno da sua tabela.

Quando o usuário clicar no botão de adicionar uma nova linha, invoque o método replaceState. O segundo argumento é apenas um placeholder, passe uma string vazia para não causar erro.

let tabela = document.getElementById('minha_tabela');

/*Altera o atributo value do HTML para ser o mesmo valor do JavaScript*/
for (let el of tabela.querySelectorAll('input')) {
    el.setAttribute('value', el.value);
}

/*Podesmos querer guardar mais de uma informação além da tabela, então vamos declarar um JSON para poder armazenar mais informações eventualmente*/
let historico = history.state ? history.state : {};
historico.tabela = tabela.innerHTML;

history.replaceState(historico, '');

Agora você tem o estado atual da sua tabela nesse estado da navegação, quando o usuário clicar em voltar, você pode acessar o history.state para reconstruir sua tabela.

Nessa mesma página que existe a tabela, invoque uma função como essa ao carregar a página:

function carregaTabela() {
    /*se existir algum conteúdo no state E existir uma tabela esse if é executado, senão é ignorado*/
    if (history.state && history.state.tabela) {
        document.getElementById('minha_tabela').innerHTML = history.state.tabela;
    }
}
4
  • André, primeiramente muito obrigado pela ajuda. Utilizei o que você falou e quase funcionou, ele devolve a tela com a mesma quantidade de linhas, porém os dados digitados dentro da linha somem, sabe como corrigir isso? Commented 7/11/2018 às 1:28
  • Tem razão, esqueci que ao se digitar um valor no input, o atributo value declarado no elemento do HTML não é alterado, por isso está vazio. Se quisermos isso temos que alterar o valor manualmente. Tente com a alteração feita.
    – Andre
    Commented 7/11/2018 às 1:51
  • Excelente André, funcionou perfeitamente, muito obrigado cara! Commented 7/11/2018 às 12:44
  • Renato, só um detalhe, eu recomendei você invocar essa função quando apertar o botão de adicionar, mas o certo mesmo seria chamar quando qualquer valor for alterado, ou então apenas quando o botão de calcular for ativado para armazenar o valor final.
    – Andre
    Commented 7/11/2018 às 15:08

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 .