Javascript and SQL - Fill out a boleto with data from a row after selecting it

Question

On a website, I have the following function in Javascript to bring me in a table the result of a query SQL.

function buscaBoletos(){
$.ajax({
    async: false, cache: false,
    url: '[:raiz]emissaoBoletos/getBoletos',
    data: ({
        unidade: $('#comboUnidades').val(),
        de: $('#txtData1').val(),
        ate: $('#txtData2').val()
    }),
    dataType: 'json',
    success: function(data) {
        $('#divBoletosLista').hide();
        var retorno = "";
        if (data.length > 0){
            for(var i = 0;i< data.length;i++){
                retorno += "<tr>";
                retorno += "<td style='text-align:left; width:300px'>"+data[i]['razaosocial']+"</td>";
                retorno += "<td style='width: 100px'>"+data[i]['nossonumero']+"</td>";
                retorno += "<td style='width: 80px'>"+data[i]['status']+"</td>";
                retorno += "<td style='width: 80px'>"+data[i]['valor']+"</td>";
                retorno += "<td style='width: 100px'>"+data[i]['dataemissao']+"</td>";
                retorno += "<td style='width: 100px'>"+data[i]['datavencimento']+"</td>";
                retorno += "<td><input class='botaoCad' type='button' value='Visualizar' style='float:none' onclick='verBoleto()'></td>";
                retorno += "</tr>";
            }
        } else {
            retorno = "<tr><td colspan='7' align='center'>"+$('#lblSemRegistros').val()+"</td></tr>";
        }
        $('#bodyBoletosLista').html(retorno);
        $('#divBoletosLista').show();
        $('#divTelaBoleto').hide();
    }
});}

As next, step I would like to be able to click the button that is generated in the last column of the row (of the function verBoleto()) and thus fill in a billet (in table format) with the respective row data.

How do I do that?

Answer 1

I found the solution. On the onclick of the View button:

onclick='verBoleto("+ data[i]['nossonumero'] +","+ data[i]['valor'] +","+ data[i]['dataemissao'] +","+ data[i]['datavencimento'] +","+ data[i]['razaosocial'] +");'

And in function itself, within js:

$('#dataDoc1').val(dataemissao);
$('#vencDoc1').val(datavencimento);
$('#sacado1').val(razaosocial);
$('#nossoNum1').val(nossonumero);
$('#valDoc1').val(valor);

For now, I can fill in for Nossonumero. For Value I fill in, but do not take the number with a right comma (170,90 is only 170). Dates it turns into a number. And Social Reason doesn’t even work View.

Answer 2

I will suggest some changes, the first is to move the code chunk that mounts the line to another function, we will do this to create a closure, this way it will be easier to pass the data to the function verBoleto.

The second point has no relation to the problem, but it is a good practice, avoid doing unnecessarily DOM objects selection, do them only once at the beginning of the script.

finally, do not declare your events inline in your HTML, use an Eventlistener.

var bodyBoletosLista = $("#bodyBoletosLista");
var lblSemRegistros = $("#lblSemRegistros");
var divBoletosLista = $('#divBoletosLista');
var divTelaBoleto = $("#divTelaBoleto");
var comboUnidades = $("#comboUnidades");
var txtData1 = $("#txtData1");
var txtData2 = $("#txtData2");

function verBoleto(event, data) {
    console.log(data.razaosocial);
    console.log(data.nossonumero);
    console.log(data.status);
    console.log(data.valor);
    console.log(data.dataemissao);
    console.log(datavencimento);
}

function montarLinha(data) {
    var html = "";
    html += "<tr>";
    html += "<td style='text-align:left; width:300px'>" + data.razaosocial + "</td>";
    html += "<td style='width: 100px'>" + data.nossonumero  + "</td>";
    html += "<td style='width: 80px'>" + data.status  + "</td>";
    html += "<td style='width: 80px'>" + data.valor  + "</td>";
    html += "<td style='width: 100px'>" + data.dataemissao  + "</td>";
    html += "<td style='width: 100px'>" + data.datavencimento +"</td>";
    html += "<td><input class='botaoCad' type='button' value='Visualizar' style='float:none'></td>";
    html += "</tr>";

    var linha = $(html);
    var botaoCad = $(".botaoCad", linha);   
    botaoCad.on("click", function (event) {
        verBoleto(event, data);
    })

    bodyBoletosLista.append(linha);
}

function buscaBoletos(){
    $.ajax({
        async: false, cache: false,
        url: '[:raiz]emissaoBoletos/getBoletos',
        data: ({
            unidade: comboUnidades.val(),
            de: txtData1.val(),
            ate: txtData2.val()
        }),
        dataType: 'json',
        success: function(data) {
            divBoletosLista.hide(); 

            bodyBoletosLista.html("");              
            if (data.length > 0){
                for(var i = 0;i< data.length;i++){
                    montarLinha(data[i]);
                }
            } else {
                var semRegistros = $("<tr><td colspan='7' align='center'>" + lblSemRegistros.val() + "</td></tr>");
                bodyBoletosLista.append(semRegistros);
            }

            divBoletosLista.show();
            divTelaBoleto.hide();
        }
    });
}

optionally, you can use a replacement function to mount your HTML.

HTML

<template id="tmplBoleto">
    <tr>
        <td style='text-align:left; width:300px'>{razaosocial}</td>
        <td style='width: 100px'>{nossonumero}</td>
        <td style='width: 80px'>{status}</td>
        <td style='width: 80px'>{valor}</td>
        <td style='width: 100px'>{dataemissao}</td>
        <td style='width: 100px'>{datavencimento}</td>
        <td><input class='botaoCad' type='button' value='Visualizar' style='float:none'></td>
    </tr>"
</template>

Javascript

var tmpl = document.getElementById("tmplBoleto").innerHTML;
var html = tmpl.replace(/{(\w+)}/g, function(str, prop){
    return data[prop];
});

Answer 3

You can do it the following way: take the id of this query and pass as parameter of its function verBoleto();

onclick="verBoleto("+ data[i]['id'] +");"

Ai in its function "verBoleto()" you make a query by the ID and returns your billet mounted only with this information referring to the ID.