O código apresentado na Listagem 4 que é parte arquivo pendentes_ajax.js. A essência desse código é a mesma da função anterior, apresentada na Listagem 3. Porém, há a criação de outros elementos. É, bsicamente, realizada uma requisição HTTP à URL do controller, que retorna um JSON com todos os pagamentos pendentes de determinado usuário. Em seguida, usando funções do
JavaScript.document, são criados os elementos necessários que são vinculados aos
elementos já criados no HTML. <div class='container'>
<div class="row">
<div class="col-md-2"></div> <div class="col-md-8">
<label class="titulo">De quem iremos receber dinheiros:</label> </div>
<div class="col-md-2"></div> </div>
<div class='row'>
<div class="col-md-2"></div>
<div class="col-md-8" style="position: relative"> <input type="text" id="cliente" name="cliente" class="inputText"
style="width: 100%;"
onkeyup="completar('#cliente', '#listacli');" placeholder="Digite aqui o nome do cliente..."/> <div
hidden="true" name="listacli" id="listacli" style=" background-color: #f5f5f5; width: 90%; position: absolute; top:50px; left: 25px; z-index: 100; "> </div> </div> <div class="col-md-2"></div> </div> <div class="row"> <div class="col-md-2"></div> <div class="col-md-4" hidden='true' id="vias-vazio" name='vias-vazio'> <div class="row">
<div class="col-md-11" style=' margin-top: 20px; margin-top: 20px;
padding: 10px;
background-color: #fff5d1;'>
Infelizmente, no momento, não temos dinheiro pra receber dessa pessoa :( </div>
</div> </div>
<div class="col-md-4" hidden='true' id="vias-a-cobrar" name='vias-a-cobrar'> <div class="row">
<div class="col-md-12" style='margin-top: 20px;'>
<div class='col-md-12' style=' background-color: #FDFFB1; padding-top: 10px;
padding-bottom: 10px;'>
<div class="col-md-12" name='totalvias' id='totalvias' style='margin-top: 8px;
font-size: 13pt;'></div> <div class='col-md-12'>
<button class='btn btn-warning col-md-12' onclick="mostralabel('#confirm')" name='pagar-todas' id='pagar-todas'>Pagar todas</button>
</div>
<div class='col-md-12' style='display: none' name='confirm' id='confirm'>
<div class='col-md-12' style='text-align: center; margin-top: 10px;
margin-bottom: 10px; font-size: 11pt'> Realmente deseja pagar tudo? </div>
<div class='col-md-6'>
<button class='btn btn-warning col-md-12' onclick="hideLabel('#confirm')" name='pagar-todas' id='pagar-todas'>Era brincadeira</button>
</div>
<div class='col-md-6'>
<button class='btn btn-warning col-md-12' onclick="pagartodas('#cliente')" name='pagar-todas' id='pagar-todas'>Sim desejo!</button>
</div> </div> </div>
<div class='col-md-12' style=' background-color: #FDFFB1; padding-top: 10px;
padding-bottom: 10px; margin-top: 10px;'> <div class="col-md-12">
<select name="mes-soma" id="mes-soma" class="col-md-12"
onchange="somarMes('#cliente', '#total-vias-mes', '#mes-soma')" style=" border: 0; background-color: #FDFFB1; text-align: center"> <option value='01'>Janeiro</option> <option value='02'>Fevereiro</option> <option value='03'>Março</option> <option value='04'>Abril</option> <option value='05'>Maio</option> <option value='06'>Junho</option> <option value='07'>Julho</option> <option value='08'>Agosto</option> <option value='09'>Setembro</option> <option value='10'>Outubro</option> <option value='11'>Novembro</option> <option value='12'>Dezembro</option> </select> </div>
<div class='col-md-12' style='margin-top: 8px; font-size: 13pt;
text-align: center; margin-bottom: 10px'
<div class='col-md-12'>
<button class="btn btn-warning col-md-12" onclick="mostralabel('#confirm-2')" >Pagar mês</button>
</div>
<div class='col-md-12' style='display: none' name='confirm-2' id='confirm-2'>
<div class='col-md-12' style='text-align: center; margin-top: 10px;
margin-bottom: 10px; font-size: 11pt'> Quer pagar esse mês mesmo? </div>
<div class='col-md-6'>
<button class='btn btn-warning col-md-12' onclick="hideLabel('#confirm-2')" name='pagar-todas' id='pagar-todas'>Era brincadeira</button>
</div>
<div class='col-md-6'>
<button class='btn btn-warning col-md-12' onclick="pagarmes('#cliente', '#mes-soma'); hideLabel('#confirm-2')"
name='pagar-todas' id='pagar-todas'>Sim desejo!</button> </div> </div> </div> </div> </div> </div> <div class="col-md-4">
<div class="col-md-12 container-blue"
id='apresenta-cliente' name='apresenta-cliente' style='margin-top: 20px;
display: none;'> </div>
<div name='apresentar-vias' id='apresentar-vias' class='divescondeescroll col-md-12'
style='display: none'>
<div class='escondeescroll col-md-12' style=' margin-top: 20px; padding: 8px; overflow: auto; max-height: 210px;'> <div class='row'> <div class="col-md-6">Data</div> <div class="col-md-6">Valor</div> </div>
<div class='row' id='lista-vias' name='lista-vias'> </div>
</div>
<button style='margin-top: 10px; float: left' class="btn btn-warning"
onclick="selecionarvencidas(this, '#cliente')"> Selecionar vencidas</button> <button style='margin-top: 10px; float: right'
class="btn btn-warning"
onclick="mostralabel('#confirm-3'); somarsel('#cliente', '#v-selected', '#confimr-pagar-sel')"> Pagar Selecionadas</button>
</div>
<div class='col-md-12' style='display: none' name='confirm-3' id='confirm-3'>
<div id="confimr-pagar-sel" name="confimr-pagar-sel" class='col-md-12' style='text-align: center;
margin-top: 10px; margin-bottom: 10px; font-size: 11pt'> </div>
<div class='col-md-6'>
<button class='btn btn-warning col-md-12' onclick="hideLabel('#confirm-3')" name='pagar-todas' id='pagar-todas'>Era brincadeira</button>
</div>
<div class='col-md-6' style="margin-bottom: 50px">
<button class='btn btn-warning col-md-12' onclick="pagarselecionadas('#v-selected'); hideLabel('#confirm-3')"
name='pagar-todas' id='pagar-todas'>Sim desejo!</button> </div>
</div> </div>