Afro Netto

Olá Pessoal

Mais uma vez vamos mostrar como o JQUERY pode facilitar, e muito, a vida do programador. No tutorial que se segue você vai aprender como utilizar o Jquery para fazer de forma muito simples formulários dinâmicos de forma que seja possível executar códigos php sem reload de página. Isso permite que se busque dados no banco e se insira no formulário, por exemplo, em combo box. Vai de acordo com sua necessidade.

Basicamente nós iremos criar:

1.Um simples formulário em HTML(XHTML);
2.Arquivo php que irá receber dados do formulário;

Arquivos para download.

Obs. Recomendo que se faça o download pois a explicação também consta no código com melhor visualização que no blog.

Formulário:


<!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>



<script type="text/javascript" src="lib/js/jquery.js"></script>

<link rel="stylesheet" type="text/css" media="all" href="lib/css/estilo.css" />

<script type="text/javascript" language="javascript">

function enviaDados(){
$.ajax({ //chama-se o método "ajax" da biblioteca Jquery.
type:"post",// tipo de envio de dados
url:"ajaxAluno.php?funcao=InsereAluno",// arquivo que receberá os dados "ajaxAluno.php". Será enviado também uma variavel "funcao" contendo a string "InsereAluno"
datatType:"html", // tipo do arquivo que vai ser enviado
data:$(":input").serialize(), // define que todos inputs da página serão enviados.
contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",

success:function(resposta){ //caso tenha sucesso execute a função com o parametro "resposta". resposta será o "echo" retornado do arquivo "InsereAluno.php"
$("#dvAlert").html(resposta).attr("class","sucesso").fadeIn();// a div com id="dvAlert" receberá o conteúdo resposta. O simbolo # no jquery define uma referencia por meio do ID. "attr("class","sucesso")" define que o atributo classe dessa div deve ser igual a "sucesso", o qual está definido no css. "fadeIn() simplesmente define que a div deve aparecer com o efeito de fade. O mesmo ocorre para o fadeOut();"
setTimeout(function(){$("#dvAlert").fadeOut();},3000);
}
});
}
function addPergunta(){
$.ajax({ //chama-se o método "ajax" da biblioteca Jquery.
type:"post",// tipo de envio de dados
url:"ajaxAluno.php?funcao=outraFuncao",// arquivo que receberá os dados "ajaxAluno.php". Será enviado também uma variavel "funcao" contendo a string "outraFuncao"
datatType:"html", // tipo do arquivo que vai ser enviado
data:$(":input").serialize(), // define que todos inputs da página serão enviados.
contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",

success:function(resposta){ //caso tenha sucesso execute a função com o parametro "resposta". resposta será o "echo" retornado do arquivo "InsereAluno.php"
$("#dvPrincipal").append(resposta);// a div com id="dvPrincipal" receberá o conteúdo resposta após o conteúdo já existente. O simbolo # no jquery define uma referencia por meio do ID
}
});
}
</script>
<title>Incluir Aluno</title>
</head>
<body >
<center>
<div >
<h2>Cadastro Aluno</h2></div>
<center>
<fieldset>
<legend>Formulário</legend>
<div align="left" id="dvPrincipal">
<form>
<label>Nome: </label>
<input type="text" maxlength='50' name="txtNome" size="30" /><br/>

<label>Sobrenome:</label>
<input type="text" maxlength='50' name="txtSobrenome" size="30" /><br/>

<label>Matricula:</label>
<input type="text" maxlength='50' name="txtMatricula" size="30" /><br/>

<label>Curso:</label>
<input type="text" maxlength='50' name="txtCurso" size="30" />
</form>
</div>
<br/>
<input type="button" class="ok" value="Avançar" onclick="enviaDados()"; />
<input type="button" class="ok" value="AddOutraPergunta" onclick="addPergunta()"; />
<input type="reset" class="ok" value="Limpar" />
<br/><br/>
<div id="dvAlert"></div>
<br/>
</fieldset>
</center>
</center>
</body>
</html>

Arquivo que receberá os dados

<?
header("Content-Type: text/html; charset=ISO-8859-1",true); //linha para evitar problemas com acentuação
//
$funcao = $_GET["funcao"]; //recebe a variável "funcao"
switch ($funcao){
   case "InsereAluno":
   /*caso funcao seja igual a "InsereAluno" EXECUTE esse bloco de comandos.
   Você pode ter apenas um arquivo ajaxAluno.php com diversas funções, cada qual com sua importancia.Inserção,deleção, complemeto de formulário, etc.
   aqui você tem um arquivo no qual vc pode fazer pesquisa em banco, inserção, etc. Pode também estar complementando seu
   formulário com novos campos de acordo com sua necessidade.
   vou fazer de conta que inseri no banco*/
echo("Aluno inserido com sucesso");

break;

   case "outraFuncao":
   ?>
<label>Outra Pergunta:</label>
<input type="radio" maxlength='50' value="sim" name="txtOutraPergunta" size="30" />sim
<input type="radio" maxlength='50' value="não" name="txtOutraPergunta" size="30" />não
<br/>
   <?php
break;
}
?>

Qualquer dúvida estou à disposição.

Obrigado

Olá, tudo bem?

Antes de tudo quero deixar aqui meus agradecimentos à Caio Trevisan http://caiotrevisan.blogspot.com/), Diego Silva e João Marcos Moro (jmsmoro@hotmail.com) que me dão altos toques de flexigrid dentre outras coisas.

Não vou perder tempo explicando o que é o flexigrid. Existe muita coisa sobre o que é no Google, no entanto, muito pouco sobre como usá-lo.

O flexigrid

"Flexigrid é para os programadores que usam jQuery e permite modificar tabelas normais para super tabelas.

Algumas das modificações que permite são:

Poder ajustar o tamanho das colunas
Poder ajustar o altura
Organizar por ordem alfabética e numérica uma coluna bastando clicar na header
Interface bastante agradável
Converte qualquer tabela
Habilidade para usar Ajax
Paginação
Poder ocultar colunas"

ref: http://www.ptajax.com/225/componentes/flexigrid-para-jquery-da-uma-nova-vida-as-tuas-tabelas;

segue uma imagem do flexigrid

Bom, o primeiro passo é ter seu banco de dados pronto. Já que o flexigrid trata-se de uma ferramenta do jquery que trabalha puxando do banco os dados a serem listados. Além da conexão deste com sua aplicação. Para isso, Cassiano Trevisan elaborou um tutorial voltado exclusivamente para o exemplo que estou disponibilizando.

Baixado os arquivos disponibilizados você vai encontrar uma aplicação flexigrid , comentada linha à linha explicando o funcionamento da aplicação flexigrid.

Arquivos:

http://uploaddearquivos.com.br/download/3Flexigrid.rar

Quanto à seleção de conteúdo: será tratada em outro tutorial.

Qualquer dúvida estou a disposição.

Referências:

http://www.flexigrid.info/

http://www.ptajax.com/225/componentes/flexigrid-para-jquery-da-uma-nova-vida-as-tuas-tabelas;

Obrigado

Afro Netto

terça-feira, 2 de março de 2010

Tutorial Formulário HTML + AJAX +JQUERY

segunda-feira, 8 de fevereiro de 2010

Tutorial Flexigrid JQUERY

Apresentação

Seguidores

Arquivo do blog

Quem sou eu