Keep data when you click back

Question

Keep data when you click back

Navigation

#1 by (1 votes)

0

I have a page that contains a PivotTable where the user adds new rows and then clicks a button to calculate the order value where I point to a new page showing the total order value and some other information. >

The problem is that when he clicks back to change some information and recalculates the lines he added do not appear, only the first one that was initially loaded when opening the page with the information he typed.

The function I'm using to add new lines is below:

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

javascript jquery

asked by anonymous 07.11.2018 / 01:39

1 answer

Bring records from today's date up to 1 month ago SQLSERVER Only render my element if it is not empty with * ngIf

score 1 · Accepted Answer

I will suggest an easy method, although it may not be ideal.

In the window object, there is the history attribute, which is a reference of your tab's browsing history. You can store serializable information in this attribute. It may be a string, an array, or a JSON non-circular, I suggest you save the internal HTML of your table.

When the user clicks the add a new row button, invoke the replaceState method. The second argument is just a placeholder, pass an empty string so it does not cause an error.

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, '');

Now you have the current state of your table in this state of navigation, when the user clicks back, you can access history.state to rebuild your table.

On this same page that the table exists, invoke a function like this when loading the page:

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