1

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

        });
    },

});
}    
2
  • 2
    você tem de passar os dados do cliente por parâmetro na função detalhesCliente(cliente), posta o código da função detalhesCliente() para te ajudarmos melhor. Commented 7/10/2017 às 22:54
  • Caique, Boa noite. atualização postada. Commented 7/10/2017 às 23:45

1 Resposta 1

0

O código mostra sempre os detalhes do primeiro cliente pq os inputs de todos os clientes tem o mesmo id, e a query "$("#input_cliente").val()" vai retornar sempre o primeiro input.

Vc pode consertar isso passando o id do cliente para a função detalhesCliente:

       +"<button class='buttons' type='button' onclick='detalhesCliente(" + cliente.id_cliente + ")'>Mais detalhes</button>"

E na função usar esse id no filtro:

function detalhesCliente(clienteId){
    var filtro = "/" + clienteId;
1
  • Valeu Thiago, funcionou. Commented 9/10/2017 às 22:57

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .