View Image in Javascript

Asked

Viewed 64 times

0

I have table made in Javascript, follow the image below: inserir a descrição da imagem aqui

Follow the Javascript code (Code is working perfectly):

$(".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();
            }
        });
});

Only instead of appearing the product code in the product column (as the image sent) I need to appear image of this product.

I put This way, but I did something wrong and I would like the help of colleagues because I have no experience with 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();
            }
        });
});

The error you present is Required String Parameter 'parametroBuscaClient' is not present

javascript
  • 2

    It’s not the solution to your mistake, but you messed up a little bit in time to do the srcimages. Use single quotes in the javascript string, and then use double quotes around the srcimage. And don’t forget to put the file extension. Example: '<th class="text-center col-lg-1"> <img src="FS56EB.jpg"/></th>'

  • Thanks for the help and explanation, I put the code as Paz commented below and now I will look for why the error occurs in Back. I appreciate the help.

2 answers

1

As the user Máttheus Spoo pointed out, there is a syntax error in the creation of your table with image, when you put 2 signals " javascript "understands" that you are closing your string, so to circumvent this you should use simple quotes, ie put in the string parts of your html that will be inserted 'string aqui!'.

Then your code would look like this:

$(".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();
            }
        });
});

But as mentioned in the comment, this example solves your image error, but does not resolve the error you mentioned: "Required String Parameter 'parametroBuscaCliente' is not present".

This is a difference error of information received by backend, or is it expecting a type of data and you are sending another type.

  • Thanks for the help so far, another question, no js I do not need to put the image path no? I have a folder called images in the project in which I saved the images. As the table was done in js and is already displayed I thought I should put the image path in js .

  • Why did it work before and not now? because this table is being mounted in js if I go back to the old code it works and list by code more if put the images give this error.

  • If the images are inside a folder, you have to refer to their path. In this case use "<th class='text-center col-lg-1'> <img src='imagens/" + data[0][0] + ".png'/></th>" + . About the error, have you tried to check which value is set to date[0][0]? maybe you find out what is occurring. With this data alone we have no way of finding out.

  • What I’m THINKING is that when doing GET, you would need to pass a third parameter in order to get the date value[0][0], but since we don’t know how your backend is, we can’t be sure. Also try to insert a line the key parametroBuscaClient inside the object data: , and put some valid value in, see what happens.

  • Thanks for the help Máttheus I really will see here is something on the back .. work with Thymeleaf . agardeço the help.

0

I was able to place the images instead of the code using only javascript follows the resolution of the problem, because if someone is going through something similar can solve.

 $(".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 I added 

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

in my project I have a folder images/products with all the images I use in the project .

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.