0

Estou tentando pegar o ID do botao que é uma várival e jogar em outra página pra realizar um fetch API. Só que esse botão é feito automaticamente, ele depende de quantas compras tem no cpf do cliente, se lá tiver 2 compras, sera dois botoes.

Aí para cada botão será gerado um id do botao automaticamente, que sera o id do produto que está no banco de dados.

Aí quando eu clico no botão, ele deve direcionar para outra página, e deve pegar o id do botao clicado, mas quando clico no botão, ele ta pegando o ultimo ID do produto comprado do cliente, e nao aquele id que eu cliquei.

Primeiro js da página1:

                var names = [];
                names[0] = element.ID;
                localStorage.setItem("names", JSON.stringify(names));

             $('.produto-1').append(`<div class="col-xs-6 col-sm-4 col-lg-12">
             <div class="thumbnail">
                 <div class="caption">
                     <h3>${element.PRODUTO}</h3> <img class="fon" src="img/icon/guido.ico"/>
                     <p class="flex-text text-muted">${element.STATUS}</p>
                     <br>
                        <p><a class="btn btn-primary m" type="button" id="${element.ID}" value="${element.ID}" onClick="${element.ID}" href="progress.php">Acompanhar Pedido</a></p>                           
                        </div>
             </div>
         </div>`);

Criei essa classe produto-1 pra criar a mensagem mostrando o nome do produto, status dele e montar o botao com o id do produto.

Aí se por acaso tiver 2 produtos, isso é criando automaticamente aí nesse código.

No código:

var names = [];
names[0] = element.ID;
localStorage.setItem("names", JSON.stringify(names));

Pego o ID do produto.

Quando clicar no botao vai direcionar para a pagina2 e nela eu tenho o seguinte js:

    function Progress() {

    var storedNames = JSON.parse(localStorage.getItem("names"));
    console.log(storedNames);

      jQuery.support.cors = true;

            //  Default options are marked with *
             fetch('http://API_AQUI', {
                 method: 'POST',
                 headers: {'Content-Type':'application/x-www-form-urlencoded'},
                 body: `ID=${storedNames}`

             }).then(response => response.json().then(data => ({
                 data: data,
                 status: response.status
             })
             ).then(res => {
                 res.data.map(element => {
                     var text = element;
                     console.log(text);

                     $('.progresso-1').append(`${element.NOME}`);
                     $('.progresso-2').append(`${element.PRODUTO}`);
                     $('.progresso-3').append(`${element.CPF}`);
                     $('.progresso-4').append(`${element.CIDADE}`);
                     $('.progresso-5').append(`${element.ENTREGAPREVISTA}`);
                     $('.progresso-6').append(`${element.CODPRODUTO}`);
                     $('.progresso-7').append(`${element.CODCLIENTE}`);
                     $('.progresso-8').append(`${element.ENTREGAPROGRAMADA}`);
                     $('.progresso-9').append(`${element.NOTAFICAL}`);
                     $('.progresso-10').append(`${element.QTDPEDIDO}`);
                     $('.progresso-11').append(`${element.ENTREGACONFIRMADA}`);
                     $('.progresso-12').append(`${element.MONTAGEMPREVISTA}`);
                     $('.progresso-13').append(`${element.MONTCONFIRMADA}`);

            })
        })
    )

}

O var storedNames = JSON.parse(localStorage.getItem("names")); pega o ID do produto, mas nao ta pegando o id do produto clicado, e sim sempre o ultimo ID de todos os produtos que o cliente tem.

Tem alguma forma de eu conseguir resolver esse problema?

8
  • o botao é direcionado a uma página, como tem dizendo o href, e eu coloquei a variavel do id no id do botao. Não fiz evento que pega o click
    – Maria
    23/02/2018 às 16:27
  • Pelo localStorage, mas ele nao envia no que foi clicado, e sim no ultimo id que tá no db
    – Maria
    23/02/2018 às 16:46
  • Não, a consulta faz de maneira correta, até pq fiz testes no proprio bd e no postman para testar a api. O botão está só enviando o id 8, no caso o numero 8. A página que mostra os dados é uma página dinâmica, é apenas 1 página feita, aí dependendo do botão clicado, ele mostra determinado dado
    – Maria
    23/02/2018 às 16:54
  • O map irá percorrer a array, e o localStorage.setItem('pegaId', pegaId); irá ser sempre o último valor da array, porque em cada iteração na array, o valor do localStorage é alterado, ficando com o valor do último item
    – Sam
    23/02/2018 às 17:02
  • 1
    Como o dvd disse, o seu localStorage.setItem está somente substituindo valores. De uma olhada nesse exemplo. stackoverflow.com/questions/3357553/… 23/02/2018 às 18:14

0

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

Pesquise outras perguntas com a tag .