Acesso ao BD - sem refresh e com marcação

leandro_clp · Dezembro 20, 2011

Boa noite pessoal.

Estou desevolvendo uma aplicação que posteriormente será lançada em site.

Trata-se da baixa de pagamentos de parcelas de prestações de serviços feitas por um admin a ser criado...

Estou usando o SQL Server 2008 e o script traz do BD todas as parcelas em aberto e as que estão pagas (criei checkboxes para me trazer da seguinte maneira: se marcada, parcela paga; se não marcada, parcela em aberto...)

O que preciso é ir dando baixa, ou seja, marcar as checkboxes e atualizar o BD...o detalhe é que queria fazer isso sem dar refresh na pagina toda vez...o ideal seria que a cada marcação o BD fosse atualizado e que ela ficasse destacada (por exemplo, marquei o checkbox, seu valor fica de outra cor...assim saberei as que marquei naquele periodo)...

Pesquisei algo sobre iframes, mas nao achei nenhum exemplo que interaja com um BD ainda e tb sobre o AJAX...o que recomendam?

Nao sei se fui bem claro...mas agradeço desde já a ajuda...

Abs!

xanburzum · Dezembro 20, 2011

use JQuery para não ter o reload da page

Fagner Dos Santos · Dezembro 24, 2011

Amigo use ajax é muito fácil de implementar e você acaba com todas as dores de cabeça.

Você irá precisar de tres arquivos basicamente, dois asp e um javascript onde vai o ajax. Aí vai um exemplo de cadastro:

Default.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cadastro AJAX</title>

<script LANGUAGE="Javascript" SRC="loadAjax.js"></SCRIPT>

</head>

<body>


<%

if acao = "novo" then

set rs=conexao.execute("SELECT * FROM boletos")

btnAdd = "<input type='button' onclick='javascript:showDados();' value='Adicionar' style='font-size:12px;' id='btn_add' />"

rs.close
set rs = nothing

end if
%>


           <div id="bordaradius">

           <table width="100%" border="0" cellspacing="2" cellpadding="0" style="line-height:31px;">
             <tr>
               <td width="2%" class="tdcad">Procedimento:</td>
               <td width="81%" class="tdcad">
               <form name="form" method="post">
               <div class="main_busca">
               <input type="text" name="procedimento" id="procedimento" size="60" autocomplete="off" class="camponome" />
               <div id="txtHint" class="resultado" align="left"></div>
               </div>
               </form>

           <!--===========================================================-->
           <!--------- AJAX PARA A BUSCA ----------->
           <script type="text/javascript">

           function showHint(str)
           {
           var xmlhttp;
           var conteudo = document.getElementById("txtHint").innerHTML;
           if (str.length==0)
             { 
             document.getElementById("txtHint").innerHTML="";
             document.getElementById("txtHint").style.visibility='hidden';
             return;
             }
           if (window.XMLHttpRequest)
             {// code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp=new XMLHttpRequest();
             }
           else
             {// code for IE6, IE5
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
           xmlhttp.onreadystatechange=function()
             {
             if (xmlhttp.readyState==4 && xmlhttp.status==200)
               {
               document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
               document.getElementById("txtHint").style.visibility='visible';
               }
		  if (conteudo.length == 0)
               {
               document.getElementById("txtHint").style.visibility='hidden';
               }
             }
           xmlhttp.open("GET","includes/buscapro.asp?palavra="+str,true);
           xmlhttp.send();
           };

           </script>


               </td>
             </tr>
             <tr><td>
             <div id='recpro'></div>
             </td></tr>
           </table>
           </div>
</body>
</html>

loadAjax.js

// JavaScript Document

function AjaxPro(){
document.getElementById('recpro').innerHTML='<div align="center" style="height:280px; vertical-align:top;" class="carregando"><br><br><br><img src="img/carregando.gif"><br /></div>'

var procedimento=document.getElementById('procedimento').value;

if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}	
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		//valor vai ser igual ao response.write do ASP ou o que estiver em html
		document.getElementById("recpro").innerHTML=xmlhttp.responseText;
	}
  }
//   +"&campo="+campo
xmlhttp.open("GET","includes/rec_pro.asp?gravar=ok&procedimento="+procedimento, true);

xmlhttp.send();

};

rec_pro.asp



<%
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open = "Driver={MySQL ODBC 5.1 DRIVER}; DATABASE=****; SERVER=***; UID=***; PASSWORD=;"
response.CharSet = "iso-8859-1"


procedimento = request("procedimento")




ON ERROR RESUME NEXT

if gravar = "ok" then


	SQL = "INSERT INTO guia (data, procedimento, fatura)"
	SQL = SQL & " VALUES"
	SQL = SQL & "('" & data & "' "
	SQL = SQL & ", '" & procedimento & "'"
	SQL = SQL & ", 'N')"

	conexao.execute(SQL)


end if




set rs = server.CreateObject("ADODB.Recordset")
SQLx = "SELECT * FROM tabela WHERE procedimento = '"&procedimento&"'"
rs.open SQLx, conexao
%>

<div style="height:250px; overflow:auto;">
<table width="100%" border="0" cellspacing="4" cellpadding="0" style="font-size:11px;" id="tablist">
<thead style="font-size:12px;">
<tr>
   <td class="topproc" width="75%">PROCEDIMENTO</td>
   <td class="topproc" width="5%">FATURA</td>
   <td class="topproc" width="5%">BAIXA</td>
   <td class="topproc" width="5%" align="center">QTD</td>
   <td class="topproc" width="5%" align="center">VALOR</td>
   <td class="topproc" width="5%">EXCLUIR </td>  
</tr>
</thead>

<TBODY>
<%

   cont = 0
   while not rs.eof


%>
<tr onMouseOver=this.style.backgroundColor='#B8E600'; onmouseout=this.style.backgroundColor=''; height="22" class="tr_proced">
<td valign="middle" width="8%"><div id="bordaradius" align="left"><%=rs("procedimento")%> - <%=nomepro%></div></td>
   <td valign="middle" width="1%" align="center"><div id="bordaradius"><%=fatura%></div></td>
<td valign="middle" width="6%"><div id="bordaradius" style="letter-spacing:1px;"> <%=rs("baixa")%></div></td>
<td valign="middle" width="1%" align="center"><div id="bordaradius"><%=Vqtd%></div></td>
   <td valign="middle" width="7%" align="center"><div id="bordaradius"><%=formatnumber(replace(rs("valor"), ".", ","), 2)%></div></td>
<td align="center" width="5%"><%=btnExcluir%></td>
</tr>
<%
cont = cont + 1
rs.movenext
wend
%>	
</TBODY>
</table>
</div>

<DIV style="border-top:inset 1px #999; border-bottom:groove 1px #CCC; height:0px;"> </DIV>
<table width="100%" border="0" cellspacing="4" cellpadding="0" style="font-size:11px;">
 <tr>
 </td>
 <td class="botproc" height="5" style="font-size:14px;"> TOTAL</td>
 <td class="botproc" height="5" style="color:#666666; font-size:14px;"><strong><%=formatnumber(total, 2)%></strong></td>
 </tr>
</table>
<%
rs.Close
set rs = nothing
'------------------
%>

É mais ou menos por aí. o arquivo javascript poderia ser implementado dentro do default, a questão de ser separado é só por questões de organização do código.

O arquivo rec_pro.asp, fica como se fosse um iframe na página, e para ele aparecer na página precisa de um ID, nesse caso usou o ID da div (recpro) no arquivo default.asp. E nesse arquivo você manda todos os comandos possíveis através do ajax, seja de leitura, escrita ou alteração (CRUD).

Assim o script dá um innerHTML no div, tranquilo.

Entrar

Arquivado

Acesso ao BD - sem refresh e com marcação

Recommended Posts

leandro_clp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante