I'm developing an application and in it, I have a method of searching clients by name, right at the beginning, I collect basic information for each client.
Follow the code:
function atualizaGrid(){
if ($("#filtrar").val())
filtro = "/" + $("#filtrar").val();
$.ajax({
type: "get",
url: "https://rootURL/api/clientes/nome"+filtro,
// dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result, jqXHR) {
var clientes = JSON.parse(result);
$("#listaClientes").empty();
$.each(clientes,function(i, cliente) {
var row = "<div class='mdl-cell mdl-cell--12-col'><hr>"
+"<input type='text' id='input_cliente' value="+cliente.id_cliente+" style='display:none'>"
+"<ul class='demo-list-icon mdl-list'>"
+"<button class='buttons' type='button' onclick='detalhesCliente()'>Mais detalhes</button>"
+"<li class='mdl-list__item'>"
+"<span class='mdl-list__item-primary-content'>"
+"<i class='material-icons mdl-list__item-icon'>person</i>"
+cliente.nome
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<span class='mdl-list__item-primary-content'>"
+"<i class='material-icons mdl-list__item-icon'>contact_phone</i>"
+cliente.telefone
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<span class='mdl-list__item-primary-content'>"
+"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.email
+"</span>"
+"</li>"
+"</ul>"
+"</div>"
+"<div class='mdl-cell mdl-cell--2-col-phone buttons' style='float:right;'>"
+"Excluir"
+"</div>"
+"<div class='mdl-cell mdl-cell--2-col-phone buttons' style='float: left;'>"
+"Editar"
+"</div>"
+"</div><p id='demo'></p><br><br>"
$("#listaClientes").append(row);
});
},
});
}
The search by name method is working, however, when clicking on the "More details" button of each client, I want to display complete information inherent to the requested client. But if the first search returns more than one client, I can not get the other ID
that is displayed.
My code only catches me if the search by name returns a single customer. For example, if the search returns two "Gabriel"
clients I only get all information about the first.
function detailsCustoms:
function detalhesCliente(){
if ($("#input_cliente").val())
filtro = "/" + $("#input_cliente").val();
$.ajax({
type: "get",
url: "https://rootURL/api/clientes"+filtro,
// dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result, jqXHR) {
var clientes = JSON.parse(result);
$("#listaClientes").empty();
$.each(clientes,function(i, cliente) {
var row = "<div class='mdl-cell mdl-cell--12-col' style='text-align:center'>"
+"<nav class='mdl-cell mdl-cell--12-col'>"
+"<a title='show more'>Dados pessoais"
+"<button class='mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon'><i class='material-icons' style='color:#008b76'>list</i></button></a></nav>"
+"<ul class='demo-list-icon mdl-list' >"
+"<li id='id_cliente' style='display:none'>"
+cliente.id_cliente
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Nome: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>person</i>"
+cliente.nome
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Telefone: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_phone</i>"
+cliente.telefone
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Email: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.email
+"</span>"
+"</li>"
+"<div class='mdl-cell mdl-cell--12-col' style='text-align:center'><h6>Endereço<i class='material-icons' style='color:#fb4040'>location_on</i></h6><hr></div>"
+"<li class='mdl-list__item'>"
+"<b>Rua: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.rua
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Bairro: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.bairro
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Cidade°: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.cidade
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>N°: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.numero
+"</span>"
+"</li>"
+"<li class='mdl-list__item'>"
+"<b>Complemento: </b>"
+"<span class='mdl-list__item-primary-content'>"
// +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
+cliente.complemento
+"</span>"
+"</li>"
+"</ul>"
+"</div>"
+"<div class='mdl-cell mdl-cell--2-col-phone buttons' style='float:right;'>"
+"Excluir"
+"</div>"
+"<div class='mdl-cell mdl-cell--2-col-phone buttons' style='float: left;'>"
+"Editar"
+"</div>"
+"</div><br><br>"
$("#listaClientes").append(row);
});
},
});
}