Webpoint

Vou falar neste post sobre um plugin para jQuery que deve ser aprendido como parte de sua documentação: o jQuery form plugin

Ele é muito útil para enviar formulário usando ajax, além de controlar a validação client-side de maneira triunfante. Se você não tem idéia de como usar o jQuery para pegar os valores do formulário de uma maneira fácil para ser passado pelo método $.post do jQuery, ou usa o método value() para fazer isto, depois deste plugin você vai fazer isto de uma maneira muito mais eficiente.

Exemplo ilustrativo

Para vocês entenderem o que estou falando, acessem este link: http://www.alexandremagno.net/portfolio_dev/site/contato. Tentem enviar o formulário sem preencher nenhum campo, ou deixando campos vazios e e-mail incorretos. O formulário fez a validação de uma maneira bonita, simples e intuitiva. Isto pode ser totalmente configurado para o plugin, a imaginação é o limite .

Preencha corretamente o formulário e envie(aproveite e deixe uma mensagem para mim ). Ele foi enviado usando ajax, com todos os campos passados para o jQuery, processados pelo php, retornado pelo XML e devolvido ao usuário. Tudo feito pelo plugin. Tentem enviar também sem preencher algum campo ou digitar um e-mail não válido, ele irá mostrar uma validação eficiente e personalizável.

ler artigo completo

Os dois primeiros parágrafos foram traduzidos de Why do my events stop working after an Ajax request? E o restante do texto uma abordagem sobre o tema

Frequentemente, quando você adiciona um evento click (ou qualquer outro) para todos os links usando $('a').click(fn), você encontrará que os eventos não funciona mais depois que você carrega um novo conteúdo para a página usando uma requisição Ajax.

Quando você chama $('a') ele retorna todos os links na página no momento e .click(fun) adiciona o handler para cada individual elemento. Quando novos links são adicionados, eles não são afetados pelos manipuladores de eventos(que seria o handler).

O que acontece é um problema da própria requisição httprequest, não de alguma framework, poderia culpar até o javascript, mas ele nunca pensou que fosse ficar tão famoso com o Ajax, que nunca sonhou em ser uma ferramenta tão utilizada e cogitada.

Existe uma solução para jQuery chamada Livequery que permite que os eventos sejam reativados depois da página ser carregada com um novo dom, mas ela faz isto de maneira automática, carregando eventos e dependendo da dimensão do projeto, realmente deixa a memória do lado cliente sobrecarregada.

Existe um método chamado event delegation que permite anexar eventos somente necessários para o funcionamento dos novos eventos no dom carregado.

Este método é essencial para quem trabalha em um projeto Ajax maior.

Este é um post de compartilhamento sobre o assunto, e estejam abertos a comentar.

Vou mostrar neste post como validar em tempo real um login antes dele poder digitar a senha. Assim, quando o usuário digitar um login e pressionar TAB ou clicar com o mouse no campo de senha ele será alertado se este login é valido ou não. No exemplo que vou mostrar exibe um alerta, mas você pode fazer de outras maneiras, como mudar a classe do campo, adicionar uma mensagem, dentre outras coisas.

Usando ajax, você pode fazer requisições no servidor em qualquer evento javascript, seja um clique em um link ou um caractere digitado no teclado. Basta usar a imaginação e competência para usar no lugar certo e de uma maneira que facilite a vida, ao invés de complicar.

O raciocínio é o seguinte. Quando o usuário sair do campo de login (evento onBlur do javascript), uma requisição com o método $.post do Jquery será feita, passando o valor digitado no campo de login para ser processado. Se for encontrado algum registro no banco ele retorna em forma de xml o valor, caso contrário retorna outro valor. Esse valor então é processado na função de callback do método $.post e assim pode-se escrever um alerta ou usar o Jquery para fazer o que for preciso para alertar o usuário de que o login está errado.

Com poucas linhas de código é possível fazer isto com Jquery:

$("input[@name=login]").blur(function(){
var login = $(".login").val();
 
$.post("login_request.php",{login: login},
 
function(data){
 
var retorno = parseInt($(data, 'login').text());
 
if(retorno) {
 
alert("login encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// encontrado
 
} else {
 
alert("login não encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// não encontrado
 
}
 
});
 
});

No código acima, o campo com o atributo name com o valor login é selecionado e passado um evento blur do Jquery, que equivale ao evento onBlur do Javascript, ou seja, quando o usuário sair do campo ele é acionado. O valor do campo de login, que possui também uma classe login é guardada na variável login, para ser usado pelo método $.post do Jquery, que irá passar esse valor para o arquivo login_request.php que irá retornar o XML com a resposta do login encontrado ou não. O código do callback aceita como parâmetro data, que é o xml retornado para ser trabalhado com o Jquery, assim nas linhas:

 
var retorno = parseInt($(data, 'login').text());

O jquery seleciona o nó login e pega o valor dele através do método text. Preste bastante atenção na notação $(data,'login'). Ela procura uma tag login com a referência em data(o nó principal do xml, como se fosse o body). O parseInt irá transformar o valor em número, que é 1 para o login encontrado e 0 para o não encontrado. Assim a estrutura condicional abaixo irá emitir dois alertas caso retorne 1(verdadeiro) ou 0(falso).

O código do arquivo PHP encontra-se abaixo:

header('Content-type: text/xml');
 
$login = $_POST['login'];
 
include('global.php');
 
$db = conectar();
 
$consulta = "SELECT login from dados where nome='$login'";
 
$resultado = mysql_query($consulta,$db);
 
$encontrado = mysql_num_rows($resultado);
 
echo '
<principal><login>' . $encontrado . '</login></principal>';

O PHP irá fazer a consulta e irá verificar se há na tabela dados o login com o nome passado pelo método $.post do Jquery. Então ele irá retornar um XML com essa estrutura caso for encontrado:

 
<principal><login>1</login></principal>

Com isto fizemos passamos para o Jquery e trabalhamos como foi explicado acima.

O exemplo abaixo possui os seguintes logins na tabela para teste: alexandre, daniel e joao. Qualquer valor que não seja este digitado no login irá alertar como usuário não encontrado.

Verificação de login com Ajax utilizando o Jquery

Bem, já mostrei como fazer uma simples requisição pelo objeto httprequest. Agora vou mostrar algo um pouco mais complexo.

A maioria dos leitores chegam ao blog através de busca no Google por Ajax. Realmente todos querem saber técnicas de como fazer tarefas que antes era feita sem esta tecnologia e que com o Ajax a coisa fica um pouco mais complexa. Mas no final fica mais bonito também

Vou mostrar como inserir valores em um banco de dados e mostrar na tela sem reload na página. Tenho certeza de que tem outras maneiras de fazê-lo, talvez mais eficaz e mais completa, mas neste exemplo irei mostrar uma requisição mais "apurada" em relação ao primeiro post sobre ajax e assim dará continuidade a uma série de posts, pois é um assunto muito amplo, principalmente quando entra o XML e JSON que são os intermediários para que tudo aconteça perfeitamente.

Antes de tudo há um grande dilema que me atormentou e que foi discutido em vários fóruns e sites. Como passar as variáveis do formulário por Javascript? Se vamos trabalhar com Ajax utilizando o Jquery, sem ter nenhuma marcação javascript no HTML, como essas variáveis serão passadas? Neste caso mais simples, eu utilizei o método value() que pega o valor do formulário. Mais uma vez há outras maneiras, mas para este fim ela preenche bem para o que estou querendo ilustrar.

Primeiro vamos mostrar o arquivo principal. Ele mostra valores de um banco de dados mostrado em uma lista não ordenada(ul). A tabela possui apenas um campo id e o outro dados que é output no browser. Logo abaixo há um campo de texto e um botão de adicionar valores. Quando o botão é clicado, o valor é adicionado no banco, então uma mensagem e o campo adicionado aparecem com um fade do Jquery. Tudo isso sem reload na página.

Ajax com o Jquery, atualizando valores no banco de dados sem atualizar a página.

Abaixo o código Jquery

$(document).ready(function(){
  $('input.btn_enviar').click(function(){
  var nome_post = $('.nome').val();
  $.post("request.php",{nome: nome_post},function(data){
    $("p").remove();
    $("ul").after("
<li>" + data + "</li>
 
").next().fadeIn("slow");
   $("ul li:last").after("
<li>" + nome_post + "</li>
 
"
).next().fadeIn("slow");
});
return false;
});
});

Primeiro há a função do Jquery que executa todo código dentro dela depois do DOM ter carregado todos os elementos com sucesso. Depois ele especifica uma função que será executada ao clicar o elemento com a classe btn_enviar que é um botão input de adicionar na página de exemplo.

Ao se clicar neste botão o valor do input será passado para a variável nome_post através do método val que retorna uma string com o valor do campo.

Depois é chamado o método $.post que faz uma requisição através do objeto httprequest de uma maneira simples. Os parâmetros passados são a página(request.php), as variáveis(que será a passada pelo formulário) e a função callback que vulgarmente falando diz o que fazer com o conteúdo retornado que está armazenado na variável data.

Dentro desta função de callback ele apaga o conteúdo que está dentro do p inicialmente (para não ficar repetindo vários parágrafos de confirmação da inclusão). Insere a tag p depois do ul através do método after. No conteúdo desta tag está o dado retornado, que é a mensagem de adicionado com sucesso caso tenha adicionado, ou não foi possível adicionar se ocorreu algum erro. O método next junto com o fadeIn especifica que o elemento após o ul( que é o parágrafo que foi inserido pelo método after) irá aparecer com um efeito de fadeIn.

Agora vem a parte de inserir por Jquery mais um item na lista, que foi recentemente adicionado pelo banco. Através da seleção do CSS3 last, pegamos o último li do elemento ul com a sintaxe $("ul li:last") e inserimos mais um elemento li que irá conter o valor pego pelo input e irá ser exibido com o fadeIn do Jquery.

O return false aparece para que o botão não envie os dados por post e recarregue a página, ou seja, retira o comportamento padrão do botão.

O arquivo request.php pega o dado passado pelo método $.post, inserido no formulário pelo usuário, adiciona no banco de dados e dependendo da situação retorna um valor de sucesso ou de falha, informação que é manipulada pelo Jquery para mostrar ao usuário.

Arquivo request.php:

$nome = $_POST['nome'];include('global.php');
 
$db = conectar();
 
$query_adiciona = "INSERT INTO dados(id,nome)
values(null,'$nome')";
 
mysql_query($query_adiciona,$db);
 
$afetados = mysql_affected_rows();
 
if($afetados!=-1) {
 
echo "adicionado com sucesso!";
 
}
 
else {
 
echo "nao foi possivel adicionar ao banco";
 
}

No arquivo global.php está incluinda uma função chamada conectar, onde está passado os dados do banco.

Assim, fizemos uma inserção no banco e retornamos uma string. Isto é um pouco mais avançado que o primeiro post do assunto, mas ainda muito trivial. A "sofisticação" entra quando trabalhamos com XML, pois nele você não retorna somente um valor, mas sim uma coleção de valores. Com o Jquery e suas capacidades de navegar no documento, principalmente pelo Xpath, você pode manipular o XML e fazer o que for preciso.

O lado negativo deste método é que após a inserção não estamos visualizando o banco de dados, pois o dado inserido foi colocado através do Jquery e o que aparece na tela não é os dados retornados pelo banco atualizados. Creio que isto seja possível com o XML e irei postar na terceira parte.

Como disse anteriormente, há outros métodos e gostaria que se tiverem idéias, por favor, comentem.

Uma das maiores vantagens do uso de uma Framework Javascript é sua facilidade de trabalhar com o Ajax. Ao invés de criar as requisições pelo httprequest em códigos intermináveis e que precisam ser adaptados para funcionar em todos os Browsers, a framework faz este trabalho para você. Resta ao desenvolvedor a criatividade de aplicá-la. Um dos primeiros motivos de procurar o Jquery foi primeiramente o Ajax. Assim como a maioria das frameworks são procuradas. Com a explosão dessas frameworks Javascript como a Jquery, costuma-se associar seus efeitos e suas outras capacidades com Ajax. Para alguns, tudo de legal e novo com o Javascript, como efeitos de animação e de interface é julgado como Ajax. Essa falsa impressão ocorreu justamente por causa da explosão das frameworks e todas as suas funcionalidades.

O Jquery oferece vários meios de trabalhar com o Ajax, desde requisições simples até as mais complexas. Neste post vou mostrar como fazer uma simples requisição de uma página externa, sendo passadas duas variáveis e chamando um arquivo externo usando o objeto httprequest e com isso dispensando o reload da página.

Primeiro de tudo, não se esqueça de incluir a Framework no head do documento:

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

Agora você será capaz de usar as ferramentas de ajax que o Jquery oferece.

Neste exemplo, irei usar o Ajax para inserir em uma div um conteúdo externo quando o usuário clica em um link.

Enquanto a requisição estiver sendo processada, irá aparecer uma div que funcionará como o carregamento até a requisição ser finalizada.

Abaixo a marcação deste código:

 
<div class="topico">
 <a href="chamada.php" class="exemplo">
   Clique aqui para abrir uma página html pelo httprequest
 </a>
<div id="carregando">
  <img src="images/ajax_preloader.gif" />
  carregando...
</div>
<div class="alvo">
  a página será aberta aqui
</div>
</div>
 

Assim, a div com o id carregando irá ser exibida enquanto não for finalizado a requisição da página.
O código do Jquery está logo abaixo:

$(document).ready(function(){
$("#carregando").hide();
$(".exemplo").click(function() {
  $("#carregando").ajaxStart(function(){
  $(this).show();
$(".alvo").hide();
});
$("#carregando").ajaxStop(function(){
 $(this).hide();
 $(".alvo").show();
});
$.get("chamada.php",
{nome: "Alexandre", idade: "23"},
function(data) {
  $(".alvo").empty().html(data);
});
return false;
});
});

Vamos analisar este código e descrever todos os métodos usados.
Linha 01: Função do Jquery que executa tudo que está dentro depois que todos os objetos DOM foram carregados. Aconselhável ser aplicado em todo código Jquery que você for usar.
Linha 02: Usando o método hide que esconde a div selecionada, no caso a div com id carregando.
Linha 03: Executando o evento click para a classe exemplo(que está aplicada na tag a). Com isto, quando o usuário clicar no link, será executada as funções que virão abaixo.
Linha 04: Aplicando o método ajaxStart na div com id carregando. O método ajaxStart especifica uma função a ser executada enquanto uma requisição se inicia e não há nenhuma outra ativa. Assim, ela manda exibir a div carregando(através do método show) enquanto a requisição estiver sendo processada e esconde a div com a classe alvo que ficará escondida através do método hide.
Linha 08: Aplicando o método ajaxStop na div com id carregando. O método ajaxStop faz o contrário, ele executa uma função quando a requisição está completa. A função executada irá esconder a div carregando assim como mostrará a div com a classe alvo através dos métodos hide e show.
Linha 12: Fazendo a requisição simples através do método $.get. Este método é usado para fazer requisições simples de ajax através do método get. Também poderia ser usada o método $.post se desejasse passar as variáveis através do método post. Os parâmetros são o arquivo a ser chamado, as variáveis que serão passadas com o seu valor e uma função callback, que é executada quando os dados são carregados com sucesso e aceita como parâmetro os dados passados. Assim, dentro desta função eu mandei apagar o conteúdo da div com a classe alvo através do método empty e logo depois executei o método html que aceita como parâmetro o conteúdo a ser escrito na div. Nesse parâmetro eu passei os dados requisitados que estão no arquivo chamada. Aqui eu usei dois métodos em uma mesma linha, lembrando que o Jquery aceita isto perfeitamente.
Linha 17: O return: false é usado simplesmente para anular o comportamento padrão do elemento, no caso o link, o comportamento padrão é clicar e a página ir para o chamada.php sem usar o Ajax. Com isto, eu permiti que os dados também fossem carregados se o usuário não tiver Javascript ou seu browser não aceitar o objeto httprequest.
O arquivo chamada.php: Neste arquivo há no cabeçalho o recebimento dos dados passados pelas variáveis enviadas pela requisição, para assim poder testar se foi recebida com sucesso. O resto do conteúdo é somente um texto aleatório para testar o funcionamento.
Abaixo encontra-se o código das primeiras linhas do arquivo chamada.php:

 
  $nome = $_GET['nome'];  $idade = $_GET['idade'];
 
echo "conteudo requisitado pelo ajax
 
";
 
echo "parâmetros enviados. Nome: ".$nome." idade: ".$idade;

Assim pode ser enviadas quando variáveis forem necessárias no método $.get.

Resultado final

O resultado final é uma simples abertura de uma página externa sem necessidade de se carregar a página. Não existe apenas esta maneira de se escrever o código com o Jquery, existe uma infinidade de métodos e ainda requisições mais complexas que podem ser feitas. Esta é apenas para começar e para mostrar como se torna simples fazer estas requisições com o Jquery e além de tudo, funcionar em todos os browsers que suportam o httprequest sem problemas. A documentação para os métodos para o Ajax pode ser encontrado no site.

Exemplo da requisição ajax mostrada neste post

Espero poder ter ajudado e se quiserem, sintam-se a vontade de compartilhar métodos para requisições simples deste tipo. Espero que com mais este exemplo, tenha mostrado o quanto essa framework pode ser útil no dia a dia do desenvolvimento Web.