0
I have a customer portal, and in this customer portal will have a page of "my purchases" there will show the products purchased, and when you click on it will appear the "tracking" of this product with various information. I do this with data from an API.
HTML from the "my shopping" :
<div class="container">
<div class="flex-row row">
<div class="col-xs-6 col-sm-4 col-lg-4" id="produtoUm">
<div class="thumbnail">
<div class="caption">
<a href="postagem.php" ><h3 class="produto"></h3> </a>
<p class="flex-text text-muted status"></p>
<br>
<p><a class="btn btn-primary" id="myButton" onclick="myButton">Acompanhar Pedido</a></p>
</div>
<!-- /.caption -->
</div>
<!-- /.thumbnail -->
</div>
<!-- <div="teste"></div>
<a class="btn btn-info" onclick="Enviar1()" role="button">Acompanhar Pedido</a> -->
<div class="col-xs-6 col-sm-4 col-lg-4" id="produtoDois">
<div class="thumbnail">
<div class="caption">
<a href="postagem.php" ><h3 class="produtoDois"></h3> </a>
<p class="flex-text text-muted statusDois"></p>
<br>
<p><a class="btn btn-primary" id="myButton" onclick="myButton">Acompanhar Pedido</a></p>
</div>
<!-- /.caption -->
</div>
<!-- /.thumbnail -->
</div>
The product will be automatically put there by the api These buttons I made to go to the "tracking" page of the product, but as I said, always shows only 1 product, and not the product that was clicked
HTML da página de rastreio:
<div class="container">
<div class="table-responsive">
<table class="table table-status">
<thead>
<tr class="status">
<th class="thCenter">Status:</th>
<!-- <td id="info-status">ENTREGUE</td> -->
</tr>
</thead>
</table>
</div>
</div>
<div class="container" id="oi">
<div class="table-responsive">
<table class="table">
<thead>
<tr class="nome" id="testa">
<th class="thCenter ">Nome</th>
<!-- <td id="info-nome">THIAGO</td> -->
</tr>
<tr class="cpf tata">
<th class="thCenter">CPF</th>
<!-- <td>02798477425</td> -->
</tr>
<tr class="produto">
<th class="thCenter">Produto</th>
<!-- <td>COLCHAO GAZIN SUPREME COMPOSTO 138X188X21CM 1PL 660120 ./PR</td> -->
</tr>
<tr class="cidade">
<th class="thCenter">Cidade</th>
<!-- <td>MACEIO</td> -->
</tr>
<tr class="codproduto">
<th class="thCenter">Código do Produto</th>
<!-- <td>12819009</td> -->
</tr>
<tr class="codcliente">
<th class="thCenter">Código do Cliente</th>
<!-- <td>12819009</td> -->
</tr>
<!-- Tabela adicionada apenas para mudar a cor do caminhão (table invisible) -->
<tr class="cliente sr-only">
<th class="thCenter">Quantidade</th>
<!-- <td id="info-qtd">1</td> -->
</tr>
</thead>
</table>
</div>
</div>
Code to pull the api:
var endereco = `http://apiaqui`;
$.ajax({
url: endereco,
crossDomain: true,
complete: function(res){
var meuJSON = JSON.parse(res.responseText);
var a = [meuJSON];
a.forEach(function(element) {
console.log(element);
for (var i = 0; i < 1; i++) {
element[i]
var adiciona = element;
AdicionaNome(adiciona[i]);
AdicionaCPF(adiciona[i]);
AdicionaProduto(adiciona[i]);
AdicionaCidade(adiciona[i]);
AdicionaCodigoProduto(adiciona[i]);
AdicionaCodigoCliente(adiciona[i]);
AdicionaStatus(adiciona[i]);
ActiveStatusImage(adiciona[i]);
ActiveOnlyPostagem(adiciona[i]);
adicionaClienteNaTabelaViagem(adiciona[i]);
ActiveQtdViagem(adiciona[i]);
}
});
}
});
And so on the page when he clicks on the product of "my purchases" will appear the customer data and that specific product. But how do I do when clicking on a certain product on the page "my purchases" appears only the data of that product, and not of another? When I do
AdicionaNome(adiciona[0]);
AdicionaCPF(adiciona[0]);
AdicionaProduto(adiciona[0]);
Shows only the data that is in sequence 0. Would have a more practical way to do this without I need to do multiple pages with each product sequence?
you need to add in your api the method that returns only the data of a single product filtering by your
ID– Leandro Angelo
the product ID are the same, only one more field is placed for another product description
– Maria
Add your html to the question.
– Leandro Angelo
@Leandroangelo Pronto
– Maria
Okay, explain to me exactly what you want to do without using the word API, I think you’re confusing the nomenclature a little bit. API in this context is only the application that is on the server, receives requests/posts and returns the JSON information to be applied on the screen by Javascript
– Leandro Angelo
I’ll try to explain in detail...It’s like this... a customer can buy a product in a store, right? Just like you can buy 2, 3, 4...so the customer wants to know where his product is, right? if it’s been forwarded, that’s all. Then he’ll enter the customer portal with his data, there will be a page with all the products he bought, then he will click on a product to see his "tracking", then in this, I wanted to make only one page for all these products, Not 1 page for every product he bought. Understands?
– Maria
Is the tracking code already present in the return of the ajax you posted? Add in your question the funtion
AdicionarProduto()– Leandro Angelo
Already yes, it is the penultimate code that I put in the question. Pq along with the product, comes other data like: name, Cpf,city...
– Maria
You need to submit a product code in Ajax for the API to return the product data.
– Sam
Instead of putting the "product" Ids, "product Two"... put the product ID that is recognized by the API, and in Ajax you send this code
– Sam
I put these Divs with these Ids just to make visible or invisible if you have any more product q a
– Maria
And how I would put to send the product code to ajax?
– Maria