Usando jQuery para cadastrar dados

A linguagem em si para fazer o cadastramento no banco não é o foco no momento, usei ASP com JScript para isso e usei o jQuery com efeito .fadeIn(”slow”); para isso então vamos lá:

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery:

O Script completo e comentado para ter uma idéia de como funciona:
funcao_jquery.js

$(document).ready(function(){
	$('#btn_enviar').click(function(){
		// Pega valor dos campos Nome e E-Mail
		var nome_post = $('#Nome').val();
		var email_post = $('#EMail').val();
		// Envia para a função criada em ASP
		$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post},function(){
			// Lista dentro de uma UL>LI os dados postados
			$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
		});
		 // Apaga os Dados do Campo Nome e E-Mail
		$('#Nome').val("");
		$('#EMail').val("");

	return false;
	});
});

Na tela inicial temos esse modelo aqui com campo de Nome e E-Mail só para exemplo:
Imagem 01

Quando você cadastra ele gera uma LI dinamicamente sem refresh e com efeito fade:
Imagem 02

Segue o código completo:

<%@ Language="JavaScript" %>
<%
// Conexao com o Banco de Dados
var Conexao = Server.CreateObject("Adodb.Connection");
Conexao.ConnectionString = "Driver=MySQL ODBC 3.51 Driver; DataBase=paineldevendas13; Server=localhost; Uid=root; PassWord=root;";
Conexao.Open;
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Cadastrando com ASP</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="funcao_jquery.js"></script>
</head>
<body>
<h2>JQuery Cadastrando com ASP</h2>
<ul>
<%
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
	Response.Write("NADA ENCONTRADO");
}
else {
	while (!rs.EOF) {
		Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>") // Lista todos os cadastrados do banco
	rs.MoveNext();
	}
}
%>
</ul>

<br><strong>INSIRA DADOS NO BANCO</strong><br>

<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
	Nome: <input name="Nome" type="text" id="Nome" />
	<br>
	E-Mail: <input name="EMail" type="text" id="EMail" />
<input name="btAdd" type="submit" value="adicionar" id="btn_enviar" />
</form>
</body>
</html>
<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {
	Conexao.Execute("Insert Into Teste (Nome, EMail) Values ('"+Request.Form("Nome")+"', '"+Request.Form("EMail")+"')");
	Response.Write("");
}
%>

Baixar : jquery-1.2.6.js



Título de Notícia com efeito “Fade” em jQuery

Script simples em JavaScript usando jQuery para fazer efeito de fade em títulos de notícias, veja o exemplo:



  • Campanha incentiva registro civil
  • Carga de petróleo está avaliada em US$ 100 milhões.
  • Alongamento previne lesões na ‘corrida’
  • Obama disputa com Lula preferência no Rio

 

 

Para esse efeito usei um arquivo chamado “mask_news.js”, nele contem todas as informações necessárias para o desenvolvimento do script.

Abrindo esse arquivo você perceberá uma linha para dar tempo ao efeito, constando em segundos:

delay = delay || 3000;

 

Coloquei 3 segundos, mais fica a seu critério aumentar ou diminuir:

Veja o código completo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Título News</title>
<div style="background: #FF9933;">
<style type="text/css">
	#noticias {
		list-style: none;
		font: 12px Arial;
		font-weight: bold;
	}
</style>

<script language="javascript" src="jquery-1.2.6.js"></script>
<script language="javascript" src="mask_news.js"></script>

<script type="text/javascript">
	$(document).ready(
		function() {
			$("#noticias").newsTicker();
			parseSamples();
		}
	);
</script>
</head>
<body>
<ul id="noticias" style="">
  <li>Campanha incentiva registro civil</li>
  <li>Carga de petróleo está avaliada em US$ 100 milhões.</li>
  <li>Alongamento previne lesões na 'corrida'</li>
  <li>Obama disputa com Lula preferência no Rio</li>
</ul>
</body>
</html>

 

Segue abaixo os arquivos para download:
Baixar: jquery-1.2.6.js
Baixar: mask_news.js



Comparando Datas com JavaScript

<script language="javascript">
function checarDatas(){
    var NomeForm = document.Formulario;

    var data_1 = NomeForm.data_01.value;
    var data_2 = NomeForm.data_02.value;
    var Compara01 = parseInt(data_1.split("/")[2].toString() + data_1.split("/")[1].toString() + data_1.split("/")[0].toString());
    var Compara02 = parseInt(data_2.split("/")[2].toString() + data_2.split("/")[1].toString() + data_2.split("/")[0].toString());

    if (Compara01 > Compara02) {
        document.getElementById("resultado").innerHTML = "Data do Campo 01 Maior";
    }
    else {
          document.getElementById("resultado").innerHTML = "Data do Campo 01 Menor";
    }
    return false;
}
</script>
<div id="resultado"></div>
<form method="post" action="Teste.pl" name="Formulario" onsubmit="return checarDatas()">
    campo01: <input type="text" id="data_01" /><br />
    campo02: <input type="text" id="data_02" />
<input type="submit" />
</form>

 

Acesse também a Webly



ASPUpload : Usando o Persits.Upload - (Parte 02), Pegando o nome do Arquivo

<form method="post" enctype="multipart/form-data" action="Teste.asp?Enviar=$">
Arquivo: <input type="file" name="Campo" />
<input type="submit" value="Enviar" />
</form>

<%
If CStr(Request.QueryString("Enviar")) <> "" Then
	Dim Upload, PegaNomeCampo, NomeCampo

	Set Upload = Server.CreateObject("Persits.Upload") ' Criando o Objeto
	Upload.Save Server.MapPath("fotos") ' Salvando na pasta
	PegaNomeCampo = Upload.Files("Campo").FileName '  Pegando o conteúdo do campo todo

	NomeCampo = Right(PegaNomeCampo, Len(PegaNomeCampo) - InstrRev(PegaNomeCampo,"\")) ' Pegar os últimos valores do campo
	Response.Write("Upload com Sucesso! O Nome da Foto: "&NomeCampo) ' Exibindo na tela
End If
%>



Página 1 de 19123456»...Final »