Preencher um boleto com dados de uma linha após seleção da mesma

gustalevin · Junho 9, 2015

Em um site, eu possuo a seguinte função em javascript pra me trazer em uma tabela o resultado de uma consulta 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();
		}
	});
}

Como próximo passo, eu gostaria de poder clicar no botão que é gerado na última coluna da linha (da funçao verBoleto) e, assim, preencher um boleto (em formato de tabela) com os dados da respectiva linha.

Como faço isso?

gustalevin · Junho 10, 2015

Achei parte da solução, por enquanto.

Seria pegar o id dessa sua consulta e passar como parâmetro da função verBoleto();

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

Ai na função "verBoleto()" se faz uma consulta pelo ID e retorna o boleto montado somente com essas informações referente ao ID. Isso eu tô penando, por enquanto... tentei, por exemplo, no campo que recebe a data de emissão:

function verBoleto(id){
  $('#dataDoc1').val() = $data[id]['dataemissao'];
}

Mas por enquanto não funciona. Alguma ideia?

angelorubin · Junho 10, 2015

Olá,

Deixa-me ver se entendi, você quer colocar o resultado da busca ajax em um tabela, ao clicar em um botão em uma tabela já existente?

gustalevin · Junho 10, 2015

Olá,

Deixa-me ver se entendi, você quer colocar o resultado da busca ajax em um tabela, ao clicar em um botão em uma tabela já existente?

Não exatamente. A tabela que mostra todos os resultados da busca eu já tenho.

Eu quero que, quando eu clicar em visualizar em uma das linhas do resultado de busca, que ele preencha os dados dessa linha nos campos de um boleto (que eu fiz em forma de tabela).

Se necessário, eu coloco outros códigos da página pra melhor entendimento. Ou até prints da página.

angelorubin · Junho 10, 2015

Você quer que a partir de uma tabela já existente na tela, que ao clicar em um botão desta tabela existente, mostre outra tabela? Na tela? em um janela?

gustalevin · Junho 10, 2015

Você quer que a partir de uma tabela já existente na tela, que ao clicar em um botão desta tabela existente, mostre outra tabela? Na tela? em um janela?

Quase isso. Vou mostrar os prints.

Abaixo, o exemplo de uma consulta (cobri algumas informações nos prints por questão de segurança):

E quando eu clico em visualizar, ele me traz um boleto (criado com linguagem de tabelas):

Mas eu quero que no clicar em Visualizar o boleto já esteja preenchido. Por exemplo, se a data de emissão é 26/6/2014, então o campo Data do Documento (que eu defini com o id "dataDoc1") já recebe esse valor automaticamente após o clique. Mesma coisa pra outros campos.

Se precisar que eu coloque mais códigos da página, pode avisar.

angelorubin · Junho 10, 2015

Boa tarde,

Eu montei um exemplo bem básico aqui, veja se ajuda:

boleto.php

<!DOCTYPE html>
<html>
<head>
	<title>Preencher um boleto com dados de uma linha após seleção da mesma</title>
	<!-- Latest compiled and minified CSS & JS -->
	<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<script src="//code.jquery.com/jquery.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

	<h2>Boleto</h2>

	<div id="boleto-gerado">
	</div>

	<h2>Listagem</h2>

	<table class="table table-bordered table-condensed" id="listagem">
		<th>Razão Social</th>
		<th>Nosso Número</th>
		<th>Status</th>
		<th>Valor Doc.</th>
		<th>Data Emissão</th>
		<th>Data Vencimento</th>
		<th>Ações</th>
		<tr>
			<td>Minha Empresa LTDA</td>
			<td>111111111</td>
			<td>On</td>
			<td>120.00</td>
			<td>10/05/2015</td>
			<td>10/06/2015</td>
			<td><input class='botaoCad btn btn-success btn-sm' type='button' value='Visualizar'></td>
		</tr>
		<tr>
			<td>Outra Empresa LTDA</td>
			<td>2222222222</td>
			<td>Off</td>
			<td>150.00</td>
			<td>10/04/2015</td>
			<td>10/05/2015</td>
			<td><input class='botaoCad btn btn-success btn-sm' type='button' value='Visualizar'></td>
		</tr>
	</table>
	<script type="text/javascript" src="js/boleto.js"></script>
</body>
</html>

boleto.js

$(function(){

	function pegarItemBoleto(boleto){
		
		var itensBoleto = [];

		$(boleto).each(function(index, value){
			if(index != 6){
				itensBoleto.push(value.lastChild.data);
			}
		});

		return itensBoleto;

	}

	function gerarBoleto(boleto){

		var itens = pegarItemBoleto(boleto);

		$('#boleto-gerado').empty();
		
		$.ajax({
			url: 'templates/boleto.html',
			dataType: 'html',
			success: function(data){
				var parsedHtml = $.parseHTML(data);
				$('#boleto-gerado').append(parsedHtml);
				$('#nosso-numero').text(itens[1]);
				$('#valor-doc').text(itens[3]);
			}
		});

	}

	$(document).on('click', '.botaoCad', function(){
		var boleto = $(this).parents('tr').find('td');
		gerarBoleto(boleto);
	});

});

boleto.html

<style type="text/css">
#boleto-parceiro {
	height: 85px;
	width: 666px;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #000000;
}
.am {
	font-size: 9px;
	color: #333333;
	height: 10px;
	font-weight: bold;
	margin-bottom: 2px;
	text-align: center;
	width: 320px;
	border-top-width: 1px;
	border-right-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-left-color: #000000;
}
#boleto{
	height: 416px;
	width: 666px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
}

#tb_logo {
	height: 40px;
	width: 666px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
#tb_logo #td_banco {
	height: 22px;
	width: 53px;
	border-right-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}
.ld {font: bold 15px Arial; color: #000000}
.td_7_sb {
	height: 26px;
	width: 7px;
}
.td_7_cb {
	width: 7px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #000000;
	height: 26px;
}
.td_2 {
	width: 2px;
}
.tabelas td{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
.direito {
	width: 178px;
}
.titulo {
	font-size: 9px;
	color: #333333;
	height: 10px;
	font-weight: bold;
	margin-bottom: 2px;
}
.var {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 13px;
}
.direito .var{
	text-align: right;
}
</style>

<div id="boleto-parceiro">
    <table style="width:666px; height:28px; border-bottom:solid; border-bottom-color:#000000; border-bottom-width:2px; border-top:solid; border-top-color:#000000; border-top-width:2px; margin-bottom: 5px;" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td>
                <div class="titulo">Nosso Número</div>
                <div class="var" id="nosso-numero">5252525</div>
            </td>
            <td class="td_7_cb"> </td>
            <td>
                <div class="titulo">Espécie.</div>
                <div class="var">R$</div>
            </td>
            <td class="td_7_cb"> </td>
            <td>
                <div class="titulo">Quantidade</div>
                <div class="var"> </div>
            </td>
            <td class="td_7_cb"> </td>
            <td>
                <div class="titulo">Valor Documento</div>
                <div class="var" id="valor-doc">220,00</div>
            </td>
            <td class="td_7_cb"> </td>
            <td>
                <div class="titulo">Espécie Doc.</div>
                <div class="var">DS</div>
            </td>
            <td class="td_7_cb"> </td>
            <td>
                <div class="titulo">Agência / Código Cedente</div>
                <div class="var" style="text-align:right">5252/5525252-1</div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td>
                <div class="titulo">Sacador / Avalista</div>
                <div class="var"> </div>
            </td>
            <td class="td_7_sb"> </td>
            <td valign="top" style="width:320px;">
                <div class="am">Autenticação Mecânica</div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
</div>
<div id="boleto">
    <table border="0" cellpadding="0" cellspacing="0" id="tb_logo">
        <tr>
            <td rowspan="2" valign="bottom" style="width:150px;"><img src="../imagens/logoreal.jpg" alt="Banco Real" width="150" height="40" title="Logo Banco Aqui" /></td>
            <td align="center" valign="bottom" style="font-size: 9px; border:none;">Banco</td>
            <td rowspan="2" align="right" valign="bottom" style="width:6px;"></td>
            <td rowspan="2" align="right" valign="bottom" style="font-size: 15px; font-weight:bold; width:445px;"><span class="ld">35691.01805 01632.490007 00000.050203 4 22550000015000</span></td>
            <td rowspan="2" align="right" valign="bottom" style="width:2px;"></td>
        </tr>
        <tr>
            <td id="td_banco">356-5</td>
        </tr>
    </table>
    <table class="tabelas" style="width:666px; border-left:solid; border-left-width:2px; border-left-color:#000000;" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td style="width: 468px;">
                <div class="titulo">Local do Pagamento</div>
                <div class="var">Pagável em qualquer banco até a data de vencimento</div>
            </td>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">Vencimento</div>
                <div class="var">10/08/2009</div>
            </td>
            <td class="td_2"> </td>
        </tr>
        <tr>
            <td class="td_7_sb"> </td>
            <td>
                <div class="titulo">Cedente</div>
                <div class="var">Empresa S/A</div>
            </td>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">Agência / Código do Cedente</div>
                <div class="var">5252/5525252-1</div>
            </td>
            <td> </td>
        </tr>
    </table>
    <table class="tabelas" style="width:666px; border-left:solid; border-left-width:2px; border-left-color:#000000;" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td style="width:103px;">
                <div class="titulo">Data  Documento</div>
                <div class="var">31/07/2009</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:133px;">
                <div class="titulo">Número Documento</div>
                <div class="var">1717</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:62px;">
                <div class="titulo">Espécie Doc.</div>
                <div class="var">DS</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:34px;">
                <div class="titulo">Aceite</div>
                <div class="var">S</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:103px;">
                <div class="titulo">Data Processamento</div>
                <div class="var">10/08/2009</div>
            </td>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">Nosso Número</div>
                <div class="var">5252525</div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
    <table class="tabelas" style="width:666px; border-left:solid; border-left-width:2px; border-left-color:#000000;" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td style="width:118px;">
                <div class="titulo">Uso Banco</div>
                <div class="var"> </div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:55px;">
                <div class="titulo">Carteira</div>
                <div class="var">20</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:55px;">
                <div class="titulo">Espécie</div>
                <div class="var">R$</div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:104px;">
                <div class="titulo">Quantidade</div>
                <div class="var"> </div>
            </td>
            <td class="td_7_cb"> </td>
            <td style="width:103px;">
                <div class="titulo">Valor</div>
                <div class="var"> </div>
            </td>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">Valor do Documento</div>
                <div class="var">220,00</div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
    <table class="tabelas" style="width:666px; border-left:solid; border-left-width:2px; border-left-color:#000000;" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td rowspan="5" class="td_7_sb"> </td>
            <td rowspan="5" valign="top">
                <div class="titulo" style="margin-bottom:18px;">Instruções (texto de responsabilidade do Cedente)</div>
                <div class="var">Juros/Mora ao Dia : R$ 0,35 apos 15/09/2009<br />
                    Multa de 2,00% apos 1 dia(s) do vencimento.
                </div>
            </td>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">(-) Desconto / Abatimento</div>
                <div class="var"> </div>
            </td>
            <td class="td_2"> </td>
        </tr>
        <tr>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">(-) Outras Deduções</div>
                <div class="var"> </div>
            </td>
            <td class="td_2"> </td>
        </tr>
        <tr>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">(+) Multa / Mora</div>
                <div class="var"> </div>
            </td>
            <td class="td_2"> </td>
        </tr>
        <tr>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">(+) Outros Acréscimos</div>
                <div class="var"> </div>
            </td>
            <td class="td_2"> </td>
        </tr>
        <tr>
            <td class="td_7_cb"> </td>
            <td class="direito">
                <div class="titulo">(=) Valor Cobrado</div>
                <div class="var"> </div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
    <table class="tabelas" style="width:666px; height:65px; border-left:solid; border-left-width:2px; border-left-color:#000000;" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td valign="top">
                <div class="titulo">Sacado</div>
                <div class="var" style="margin-bottom:5px; height:auto">Nome do Sacado<br />
                    Rua do Sacado, Número / Complemento<br />
                    Cidade/UF - CEP: 36000-000
                </div>
                <div class="titulo">Sacador / Avalista</div>
            </td>
            <td class="td_7_sb"> </td>
            <td class="direito" valign="top">
                <div class="titulo">CPF / CNPJ</div>
                <div class="var" style="text-align:left;">000.000.000-000 </div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
    <table style="width:666px; border-top:solid; border-top-width:2px; border-top-color:#000000" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_7_sb"> </td>
            <td style="width: 417px; height:62px;">[ Imagem do Código de Barras ]</td>
            <td class="td_7_sb"> </td>
            <td valign="top">
                <div class="titulo" style="text-align:left;">Autenticaçao Mecânica / FICHA DE COMPENSAÇAO</div>
            </td>
            <td class="td_2"> </td>
        </tr>
    </table>
</div>

gustalevin · Junho 11, 2015

Cara, me ajudou mais ou menos. Mas eu guardei aqui os códigos pra tentar estudar alguma coisa.

Infelizmente o site eu assumi de outro desenvolvedor, e ele tem necessidade além dos arquivos PHP e JS de mais dois arquivos em PHP, que ficam em diretórios chamados Model e Controller. Por isso não consigo colocar esses códigos lá.

Vou passar essa dúvida pra seção PHP do fórum. Obrigado mesmo assim, Angelo.

Arquivado

Preencher um boleto com dados de uma linha após seleção da mesma

Recommended Posts

gustalevin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gustalevin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

gustalevin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

gustalevin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

gustalevin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante