Estou desenvolvendo um aplicativo e nele, tenho um método de pesquisa dos clientes por nome, logo no começo, realizo a coleta de informações básicas de cada cliente.
Segue o código:
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);
});
},
});
}
O método de pesquisa por nome esta funcionando, porém, ao clicar no botão "Mais detalhes" de cada cliente, quero que seja exibido informações completas inerentes ao cliente solicitado. Mas, se a primeira pesquisa retorna mais de um cliente, eu não consigo pegar o outro ID
que é exibido.
Meu código só me atende se a pesquisa por nome retornar um único cliente. Por exemplo, se a pesquisar retornar dois clientes "Gabriel"
eu só consigo todas informações sobre o primeiro.
função detalhesClientes:
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);
});
},
});
}