0

Tenho tabela feita no Javascript, segue a imagem a seguir: inserir a descrição da imagem aqui

Segue o código do Javascript(Código está funcionando perfeitamente):

$(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                    "<th class='text-center col-lg-1'>" + data[0][0] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";
                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td>" + data[i][1] + "</td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
});

Só que ao invés de aparecer o código do produto na coluna produto (como a imagem enviada) eu preciso que apareça imagem deste produto.

Coloquei Desta maneira, porém fiz algo errado e gostaria da ajuda dos colegas pois não tenho experiência com Js.

$(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                if(data[0][0] == 'BS56EF'){
                    "<th class='text-center col-lg-1'> <img src="BS56EF"/></th>" +
                }
                if(data[0][0] == 'FP56EA'){
                    "<th class='text-center col-lg-1'> <img src="FP56EA"/></th>" +
                }
                 if(data[0][0] == 'FS56EB'){
                    "<th class='text-center col-lg-1'> <img src="FS56EB"/></th>" +
                }
                 if(data[0][0] == 'FS56EB'){
                    "<th class='text-center col-lg-1'> <img src="FS56EB"/></th>" +
                }



                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";
                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td>" + data[i][1] + "</td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
});

O erro que apresenta é Required String parameter 'parametroBuscaCliente' is not present

2
  • 2
    Nao é a solução pro seu erro, mas você bagunçou um pouco na hora de fazer o srcdas imagens. Use aspas simples na string do javascript, e ai use aspas duplas ao redor do srcda imagem. E não se esqueça de colocar a extensão do arquivo. Exemplo: '<th class="text-center col-lg-1"> <img src="FS56EB.jpg"/></th>' 30/08/2018 às 21:07
  • Obrigada pela ajuda e explicação, coloquei o código conforme o Paz comentou abaixo e agora vou procurar o porque o erro ocorre no Back. Agradeço a ajuda.
    – Joyce SD
    31/08/2018 às 12:12

2 Respostas 2

1

Como o usuário Máttheus Spoo ressaltou, existe um erro de sintaxe na criação da sua table com imagem, quando você coloca 2 sinais " o javascript "entende" que você está fechando sua string, então para contornar isso você deve usar aspas simples, ou seja colocar nas partes de string do seu html que será inserido 'string aqui!'.

Então seu código ficaria assim:

$(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                if(data[0][0] == 'BS56EF'|| data[0][0] == 'FP56EA' || data[0][0] == 'FS56EB' || data[0][0] == 'FS56EB'){
                    "<th class='text-center col-lg-1'> <img src='" + data[0][0] + ".png'/></th>" +
                }


                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";
                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td>" + data[i][1] + "</td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
});

Porém como mencionado no comentário, esse exemplo resolve seu erro de imagem, mas não resolve o erro que você mencionou: "Required String parameter 'parametroBuscaCliente' is not present".

Esse é um erro de diferença de informação recebida pelo backend, ou seja ele espera um tipo de dados e você esta enviando outro tipo.

5
  • Obrigada pela ajuda até aqui, mais uma dúvida, no js eu não preciso colocar o caminho da imagem não? tenho uma pasta chamda imagens no projeto no qual eu salvei as imagens . Como a tabela foi feita no js e já é exibida pensei que deveria colocar o caminho da imagem no js .
    – Joyce SD
    31/08/2018 às 12:08
  • porque que antes funcionava e agora não? pois essa tabela está sendo montada no js se eu voltar para o código antigo ele funciona e lista por código mais se colocar as imagens dar este erro.
    – Joyce SD
    31/08/2018 às 12:17
  • Se as imagens estão dentro de uma pasta, tem sim que se referir ao caminho das mesmas. No caso então utilize "<th class='text-center col-lg-1'> <img src='imagens/" + data[0][0] + ".png'/></th>" + . Sobre o erro, já tentou checar qual valor é atribuido para data[0][0]? talvez você descubra o que está ocorrendo. Só com esses dados não temos como descobrir. 31/08/2018 às 12:40
  • O que eu estou ACHANDO é que, na hora de fazer o GET, você precisaria passar um terceiro parametro para poder pegar o valor de data[0][0], mas como não sabemos como está seu backend, não temos como ter certeza. Tente também inserir uma linha a chave parametroBuscaCliente dentro do objeto data: , e ponha algum valor válido dentro, veja o que ocorre. 31/08/2018 às 12:45
  • Obrigada pela ajuda Máttheus realmente vou ver aqui é algo no back .. trabalho com thymeleaf . agardeço a ajuda.
    – Joyce SD
    31/08/2018 às 13:15
0

Consegui colocar as imagens em vez do código utilizando somente o javascript segue a resolução do problema,pois caso alguém esteja passando por algo semelhante possa solucionar.

 $(".js-tbody-historico-cliente").on("change", function() {
    var codigo_cliente = $(codigoCliente).val();
    var tipo_busca = $(tipoBusca).val();
    $
        .ajax({
            type: "GET",
            url: "/buscahistoricocliente",
            data: ({
                codigoCliente: codigo_cliente,
                tipoBusca: tipo_busca
            }),
            dataType: 'json',
            success: function(data) {
                var text = "";

                text += "<thead><tr>" +
                    "<th class='text-center col-lg-1'>" + data[0][0] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][1] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][2] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][3] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][4] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][5] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][6] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][7] + "</th>" +
                    "<th class='text-center col-lg-1'>" + data[0][8] + "</th>" +
                    "</thead>";


                for (i = 1; i < data.length; i++) {
                    text += "<tbody><tr>" +
                        "<td> <img src= /images/produtos/" + data[i][1] + ".png /></td>" +
                        "<td>" + data[i][4] + "</td>" +
                        "<td>" + data[i][5] + "</td>" +
                        "<td>" + data[i][6] + "</td>" +
                        "<td>" + data[i][7] + "</td>" +
                        "<td>" + data[i][8] + "</td>" +
                        "<td>" + data[i][9] + "</td>" +
                        "<td>" + data[i][10] + "</td>" +
                        "<td>" + data[i][11] + "</td>" +
                        "</tr></tbody>";
                }
                $("#js-tbody-historico-venda-cliente").html(text);
                $("#graficosCliente").show();
            }
        });
}); 

no For acrescentei

"<td> <img src= /images/produtos/" + data[i][1] + ".png /></td>" +

no meu projeto eu tenho uma pasta images/produtos com todas as imagens que utilizo no projeto .

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 .