Metodo .live() no JQuery
terça-feira, 9 de março de 2010
Por falta de tempo fiquei um tempo sem postar no blog, mas agora vou tentar voltar a dedicar um tempo para novos posts.
Dia 28 de janeiro de 2010 foi oficialmente lançado a versão 1.4 do JQuery. Essa versão veio com algumas novidades muito interessantes. Dediquei esse post para mostrar uma das inovações dessa versão.
Para quem usa AJAX com JQuery a algum tempo, deve conhecer o plugin Livequery.
Esse plugin permite que o desenvolvedor faça um .bind() em um evento de um elemento, e o bind permaneça mesmo se o DOM for atualizado.
No JQuery 1.4 foi implementado o metodo .live() o que faz com que agente não precise mais do plugin.
Um exemplo:
em nosso javascript:
No Exemplos Bind, o primeiro botão tem o evento, mas os outros botões criados por ele não tem o evento.
Já no Exemplos Live, todos os botões (inclusive os inseridos dinamicamentes no DOM) estão com o evento.
Isso é muito util tambem para quando estamos trabalhando com Ajax.
Você pode ver esse código funcionando clicando aqui.
Para ver outras novidades do JQuery 1.4 veja esses posts:
Dia 28 de janeiro de 2010 foi oficialmente lançado a versão 1.4 do JQuery. Essa versão veio com algumas novidades muito interessantes. Dediquei esse post para mostrar uma das inovações dessa versão.
Para quem usa AJAX com JQuery a algum tempo, deve conhecer o plugin Livequery.
Esse plugin permite que o desenvolvedor faça um .bind() em um evento de um elemento, e o bind permaneça mesmo se o DOM for atualizado.
No JQuery 1.4 foi implementado o metodo .live() o que faz com que agente não precise mais do plugin.
Um exemplo:
| HTML | | copy code | | ? |
| 01 | <div class="exemplosBind"> |
| 02 | <h3>Exemplos Bind</h3> |
| 03 | <p> |
| 04 | <a href="#" class="botaoBind">Botao usando metodo Bind</a> |
| 05 | </p> |
| 06 | </div> |
| 07 | <hr /> |
| 08 | <div class="exemplosLive"> |
| 09 | <h3>Exemplos Live</h3> |
| 10 | <p> |
| 11 | <a href="#" class="botaoLive">Botao usando metodo Live</a> |
| 12 | </p> |
| 13 | </div> |
em nosso javascript:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $(".botaoBind").bind("click", function () { |
| 03 | novoBotao = $(this).parent().clone(); |
| 04 | $(".exemplosBind").append(novoBotao); |
| 05 | }); |
| 06 | $(".botaoLive").live("click", function () { |
| 07 | novoBotao = $(this).parent().clone(); |
| 08 | $(".exemplosLive").append(novoBotao); |
| 09 | }); |
| 10 | }); |
No Exemplos Bind, o primeiro botão tem o evento, mas os outros botões criados por ele não tem o evento.
Já no Exemplos Live, todos os botões (inclusive os inseridos dinamicamentes no DOM) estão com o evento.
Isso é muito util tambem para quando estamos trabalhando com Ajax.
Você pode ver esse código funcionando clicando aqui.
Para ver outras novidades do JQuery 1.4 veja esses posts:
- A nova maneira de criar elementos
- Ligando múltiplos eventos a um elemento
- Eventos focusin e focusout
- Atrasos nas animações com a função delay()
- Recortando” um elemento da DOM com detach()
Cálculo
quarta-feira, 22 de abril de 2009
Como alguns de vocês já devem saber, eu faço faculdade de ciência da computação no UniCEUB. E tive a oportunidade de fazer alguns trabalhos interessantes, resolvi postar alguns deles aqui no blog.
Um muito legal que tive que fazer foi da disciplina de Cálculo II onde o desafio era elaborar um programa que calculasse a integral definida usando a definição (e não usando o Teorema Fundamental do Cálculo) usando um refinamento que o usuário pode controlar dizendo em quantas partes quer dividir o intervalo de integração [a,b]
Como sempre resolvi ir um pouco alem do desafio, fiz um programa que calcula a integral aproximada junto com o esboço do gráfico de várias funções, e resolvi esse problema usando apenas recursos de XHTML e JQuery.
Você deve estar pensando… “Ele usou algum recurso para gerar imagens com javascript”. Mas por incrivel que pareça não usei nada desse tipo. Fiz o gráfico apenas com CSS e DIVS.
Caso alguem se interesse pelo código, ou se tiver alguma pergunta deixem comentários ou e-mails. Responderei assim que possível.
Queria mandar meus agradecimentos aos amigos Marcello Brandão, Maurício Madalozzo e ao professor Luís Cláudio que me ajudaram nesse projeto.
Um muito legal que tive que fazer foi da disciplina de Cálculo II onde o desafio era elaborar um programa que calculasse a integral definida usando a definição (e não usando o Teorema Fundamental do Cálculo) usando um refinamento que o usuário pode controlar dizendo em quantas partes quer dividir o intervalo de integração [a,b]
Como sempre resolvi ir um pouco alem do desafio, fiz um programa que calcula a integral aproximada junto com o esboço do gráfico de várias funções, e resolvi esse problema usando apenas recursos de XHTML e JQuery.
Você deve estar pensando… “Ele usou algum recurso para gerar imagens com javascript”. Mas por incrivel que pareça não usei nada desse tipo. Fiz o gráfico apenas com CSS e DIVS.
Clique aqui para ver a aplicação.
Caso alguem se interesse pelo código, ou se tiver alguma pergunta deixem comentários ou e-mails. Responderei assim que possível.
Queria mandar meus agradecimentos aos amigos Marcello Brandão, Maurício Madalozzo e ao professor Luís Cláudio que me ajudaram nesse projeto.
Adicionar Campos Dinâmicos
quinta-feira, 2 de abril de 2009
Um componente muito util para formulários é você poder adicionar campos dinâmicamente em seu formulário, por exemplo… Em um formulário de cadastro de uma pessoa, você precisa que ele preencha o formulário com todos os telefones dela.
Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.
No nosso index.html faremos nosso formulário…
Lembrando que você precisa ter o arquivo da biblioteca jquery na mesma pasta do seu index.
O nosso aplicacao.js ficaria assim:
Vamos explicar o que foi feito:
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Declara uma função chamada removeCampo.
Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.
Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.
Linha 5 - Teclara uma variavel i igual a zero.
Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.
Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).
Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.
Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.
Linha 14 - Executa a função removeCampo().
Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.
Linha 16 - Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.
Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.
Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.
Linha 19 - Executa a função removeCampo.
E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX - Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.
Quando esse formulário for submetido você receberá em seu PHP um array de telefones.
Gostaram?
Você pode ver esse exemplo funcionando clicando aqui.
Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.
No nosso index.html faremos nosso formulário…
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 04 | <head> |
| 05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 06 | <title>Exemplo</title> |
| 07 | <script type="text/javascript" src="jquery.js"></script> |
| 08 | <script type="text/javascript" src="aplicacao.js"></script> |
| 09 | </head> |
| 10 | |
| 11 | <body> |
| 12 | <div style="border:1px solid #CCC; background-color:#EFEFEF; padding:0 20px;"> |
| 13 | <h1>Exemplo Campos Dinâmicos</h1> |
| 14 | <p>Esse arquivo é parte de um arquivo feito por Maurício Faustino para mostrar como um formulário com campos dinâmicos</p> |
| 15 | |
| 16 | </div> |
| 17 | <div style="width:500px; margin:auto;"> |
| 18 | |
| 19 | <form action="mantemPessoas.php" method="post"> |
| 20 | <fieldset> |
| 21 | <legend>Dados Pessoais</legend> |
| 22 | <p> |
| 23 | <label for="nome">Nome da Pessoa</label> |
| 24 | <input id="nome" type="text" name="nome" /> |
| 25 | </p> |
| 26 | <p> |
| 27 | <label for="dataNascimento">Data de Nascimento</label> |
| 28 | <input id="dataNascimento" type="text" name="dataNascimento" /> |
| 29 | </p> |
| 30 | </fieldset> |
| 31 | <fieldset> |
| 32 | <legend>Telefones</legend> |
| 33 | <div class="telefones"> |
| 34 | <p class="campoTelefone"> |
| 35 | <input type="text" name="telefone[]" /> |
| 36 | <a href="#" class="removerCampo">Remover Campo</a> |
| 37 | </p> |
| 38 | </div> |
| 39 | <p> |
| 40 | <a href="#" class="adicionarCampo">Adicionar Telefone</a> |
| 41 | </p> |
| 42 | </fieldset> |
| 43 | |
| 44 | </form> |
| 45 | <a href="http://www.mauriciofaustino.com/2009/04/adicionar-campos-dinamicos/">Voltar para o post.</a> |
| 46 | </div> |
| 47 | </body> |
| 48 | </html> |
O nosso aplicacao.js ficaria assim:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | function removeCampo() { |
| 03 | $(".removerCampo").unbind("click"); |
| 04 | $(".removerCampo").bind("click", function () { |
| 05 | i=0; |
| 06 | $(".telefones p.campoTelefone").each(function () { |
| 07 | i++; |
| 08 | }); |
| 09 | if (i>1) { |
| 10 | $(this).parent().remove(); |
| 11 | } |
| 12 | }); |
| 13 | } |
| 14 | removeCampo(); |
| 15 | $(".adicionarCampo").click(function () { |
| 16 | novoCampo = $(".telefones p.campoTelefone:first").clone(); |
| 17 | novoCampo.find("input").val(""); |
| 18 | novoCampo.insertAfter(".telefones p.campoTelefone:last"); |
| 19 | removeCampo(); |
| 20 | }); |
| 21 | }); |
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Declara uma função chamada removeCampo.
Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.
Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.
Linha 5 - Teclara uma variavel i igual a zero.
Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.
Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).
Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.
Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.
Linha 14 - Executa a função removeCampo().
Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.
Linha 16 - Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.
Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.
Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.
Linha 19 - Executa a função removeCampo.
E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX - Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.
Quando esse formulário for submetido você receberá em seu PHP um array de telefones.
Gostaram?
Você pode ver esse exemplo funcionando clicando aqui.
AJAX – Primeiros Problemas
terça-feira, 31 de março de 2009
Um dos primeiros problemas que assombram os desenvolvedores iniciantes no AJAX é quando a página requisitada traz um elementos que tinham eventos definidos anteriormente…
Vamos exemplificar, vamos fazer um index.html com o seguinte código:
Agora temos uma página html simples, vamos para o javascript, novamente usando a biblioteca JQuery.
vamos criar o arquivo aplicacao.js com o seguinte código:
Vamos explicar as linhas:
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o elemento com id pagina1 for clicado executará uma função.
Linha 3 - Carrega o conteudo do elemento com id conteudo1 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 4 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 6 - Quando o elemento com id pagina2 for clicado executará uma função.
Linha 7 - Carrega o conteudo do elemento com id conteudo2 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 8 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 10 - Quando o elemento com id link for clicado executará uma função.
Linha 11 - Alerta o usuário que ele clicou no link.
Linha 12 - retorna falso, para o fluxo padrão do html para links não ser executado.
Criando o arquivo conteudos.html:
Pronto, está feito nosso AJAX que carrega conteudos. Mas ainda tem um problema, os links que foram carregados através do AJAX não devem estar funcionando.
Isso acontece porque a linha 10 do nosso aplicacao.js foi executada quando a página foi carregada, ou seja, o evento só foi adicionado para os elementos DOM que estavam no documento naquele momento, o que veio depois, não sofreu alteração.
Uma forma de resolver isso é executar novamente a chamada pro evento da seguinte forma:
Substituindo esse código no aplicacao.js resolveremos esse poblema, o que eu fiz foi setar uma função para ser executada depois que o ajax for concluído, ou seja, quando o nosso novo elemento esteja no DOM.
Eu usei unbind e depois bind para caso o link estivesse em outro lugar da pagina que não seja onde o ajax carregou o evento nao seja adicionado duas vezes, o que faria com que nossa função seja executada duas vezes resultando em 2 alerts.
Outra forma de resolver isso seria usando o plugin livequery, mas esse tutorial vou deixar para um próximo post.
Você pode ver um exemplo funcionando aqui.
Vamos exemplificar, vamos fazer um index.html com o seguinte código:
| HTML | | copy code | | ? |
| 01 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 02 | <head> |
| 03 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 04 | <title>Exemplo</title> |
| 05 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 06 | <script type="text/javascript" src="aplicacao.js"></script> |
| 07 | </head> |
| 08 | <body> |
| 09 | <div id="menu"> |
| 10 | <ul> |
| 11 | <li><a href="#" id="pagina1">Pagina 1</a></li> |
| 12 | <li><a href="#" id="pagina2">Pagina 2</a></li> |
| 13 | </ul> |
| 14 | </div> |
| 15 | <div id="conteudo"> |
| 16 | <p>Essa é uma pagina com um <a href="#" id="link">link</a></p> |
| 17 | </div> |
| 18 | </body> |
| 19 | </html> |
vamos criar o arquivo aplicacao.js com o seguinte código:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $("#pagina1").click(function () { |
| 03 | $("#conteudo").load("conteudos.html #conteudo1"); |
| 04 | return false; |
| 05 | }); |
| 06 | $("#pagina2").click(function () { |
| 07 | $("#conteudo").load("conteudos.html #conteudo2"); |
| 08 | return false; |
| 09 | }); |
| 10 | $("#link").click(function () { |
| 11 | alert("Você clicou no link"); |
| 12 | return false; |
| 13 | }); |
| 14 | }); |
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o elemento com id pagina1 for clicado executará uma função.
Linha 3 - Carrega o conteudo do elemento com id conteudo1 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 4 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 6 - Quando o elemento com id pagina2 for clicado executará uma função.
Linha 7 - Carrega o conteudo do elemento com id conteudo2 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 8 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 10 - Quando o elemento com id link for clicado executará uma função.
Linha 11 - Alerta o usuário que ele clicou no link.
Linha 12 - retorna falso, para o fluxo padrão do html para links não ser executado.
Criando o arquivo conteudos.html:
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 04 | <head> |
| 05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 06 | <title>Exemplo</title> |
| 07 | </head> |
| 08 | <body> |
| 09 | <div id="conteudo1"> |
| 10 | <p>Esse é o conteudo da primeira pagina</p> |
| 11 | <p>Essa tambem é uma pagina com um <a href="#" id="link">link</a></p> |
| 12 | </div> |
| 13 | <div id="conteudo2"> |
| 14 | <p>Esse é o conteudo da segunda pagina</p> |
| 15 | <p>Essa tambem é uma pagina com um <a href="#" id="link">link</a></p> |
| 16 | </div> |
| 17 | </body> |
| 18 | </html> |
Pronto, está feito nosso AJAX que carrega conteudos. Mas ainda tem um problema, os links que foram carregados através do AJAX não devem estar funcionando.
Isso acontece porque a linha 10 do nosso aplicacao.js foi executada quando a página foi carregada, ou seja, o evento só foi adicionado para os elementos DOM que estavam no documento naquele momento, o que veio depois, não sofreu alteração.
Uma forma de resolver isso é executar novamente a chamada pro evento da seguinte forma:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $("#pagina1").click(function () { |
| 03 | $("#conteudo").load("conteudos.html #conteudo1", function(){ |
| 04 | $("#link").unbind("click"); |
| 05 | $("#link").bind("click", function () { |
| 06 | alert("Você clicou no link"); |
| 07 | return false; |
| 08 | }); |
| 09 | }); |
| 10 | return false; |
| 11 | }); |
| 12 | $("#pagina2").click(function () { |
| 13 | $("#conteudo").load("conteudos.html #conteudo2", function(){ |
| 14 | $("#link").unbind("click"); |
| 15 | $("#link").bind("click", function () { |
| 16 | alert("Você clicou no link"); |
| 17 | return false; |
| 18 | }); |
| 19 | }); |
| 20 | return false; |
| 21 | }); |
| 22 | $("#link").click(function () { |
| 23 | alert("Você clicou no link"); |
| 24 | return false; |
| 25 | }); |
| 26 | |
| 27 | }); |
Eu usei unbind e depois bind para caso o link estivesse em outro lugar da pagina que não seja onde o ajax carregou o evento nao seja adicionado duas vezes, o que faria com que nossa função seja executada duas vezes resultando em 2 alerts.
Outra forma de resolver isso seria usando o plugin livequery, mas esse tutorial vou deixar para um próximo post.
Você pode ver um exemplo funcionando aqui.
AJAX com JQuery
sexta-feira, 27 de março de 2009
Podemos perceber que um dos assuntos mais famosos entre os desenvolvedores web hoje em dia é o AJAX – Asynchronous Javascript And XML, ele consiste em um metodo de fazer requisições no servidor para obter determinadas informações sem que seja necessário o reload da página.
As características que o ajax pode oferecer podem ser facilmente observadas nos mais famosos sites dentro da web 2.0. Como por exemplo: Orkut, FaceBook, Google Suggest, GMail entre muitos outros.
Com isso oferecemos mais velocidade e usabilidade em nosso site, fazendo ele carregar apenas as informações necessárias quando necessário.
O AJAX é basicamente o uso do objeto XMLHttpRequest do Javascript, mas vou exemplificar usando a biblioteca JQuery para simplificar nosso código.
Bom, no JQuery temos vários métodos para o disparo de uma requisição AJAX, o principal deles é o $.ajax(), os outros seguem um conceito parecido com o de sobrecarga de metodos da Orientação a Objetos, ou seja, fazem a mesma coisa e mais um pouco.
São eles:
$.ajax() - Carrega uma página remota através do HTTP Request, ele é a forma mais primitiva de fazer AJAX usando JQuery, pode-se fazer qualquer requisição remota usando esse metodo.
$.get() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” GET.
$.post() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” POST.
$.getScript() – Carrega um JavaScript de uma página remota.
$.getJSON() – Carrega uma informação de uma página remota que esteja no formato JSON, essse formato é caracterizado por ser muito leve, o que é excelente para o AJAX, que é usado para fazer pequenas requisições.
$.load() – Carrega uma informação diretamente para um elemento do seu XHTML. ideal para ser usado quando a informação não precisa ser tratada, apenas preencher um elemento.
Então vamos para um exemplo prático…
Começaremos por nosso PHP, que poderia ser qualquer linguagem de programação web. Basicamente ele tem que fazer algo relativamente simples, receber um parâmetro de pesquisa e retornar um resultado. Para isso ele pode fazer a pesquisa em um Array ou até mesmo no banco de dados. Para facilitar, explicarei usando um array.
Nesse exemplo teremos um Array de pessoas, onde a chave é o CPF da pessoa, quando usuário preencher o campo de CPF da pessoa automaticamente o ajax vai preencher os campos de Nome e Data de Nascimento de pessoa.
Vamos começar pelo PHP, nesse exemplo vou chama-lo de pessoas.php:
Agora que temos algumas pessoas em nosso php, vamos fazer a parte de apresentação, seu XHTML deveria ficar assim:
Vamos chama-lo de index.html. Lembrando que você deve ter a biblioteca JQuery na mesma pasta do seu index.html. agora vamos criar o arquivo aplicacao.js:
Vou explicar linha por linha o que foi feito nesse arquivo:
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o campo #cpf (com o id cpf) sofrer o evento de blur (quando sair do campo) será executada a seguinte função.
Linha 3 - Define uma variável que chamamos de cpf e preechemos ela com o conteudo do campo #cpf.
Linha 4 - Executa um AJAX e inicia a declarações das opções desse metodo.
Linha 5 - Define o tipo de requisição como GET.
Linha 6 - Define a url que será requisitada como pessoas.php.
Linha 7 - Define os parâmetros para o AJAX, o parâmetro passado foi apenas o cpf digitado .
Linha 8 - Define que quando a requisição for concluída, deverá ser executada a seguinte função.
Linha 9 - Quebra a String em um array usando o metodo split, idêntico a função explode do PHP.
Linha 10 - Preenche o campo nome com o valor do primeiro indice do array.
Linha 11 - Preenche o campo dataNascimento com o valor do segundo indice do array.
E abracadabra, está feita a mágica...
Como você pode ver não é tão complicado assim essa história de Javascript.
Uma sugestão para fixarem o conhecimento é tentar fazer a mesma coisa usando os outros metodos AJAX que o JQuery oferece, principalmente o $.getJSON().
Se quiser pode ver o exemplo funcionando clicando aqui.
Qualquer dúvida que tiverem podem comentar no post.
Referências:
Documentação do JQuery - http://docs.jquery.com
As características que o ajax pode oferecer podem ser facilmente observadas nos mais famosos sites dentro da web 2.0. Como por exemplo: Orkut, FaceBook, Google Suggest, GMail entre muitos outros.
Com isso oferecemos mais velocidade e usabilidade em nosso site, fazendo ele carregar apenas as informações necessárias quando necessário.
O AJAX é basicamente o uso do objeto XMLHttpRequest do Javascript, mas vou exemplificar usando a biblioteca JQuery para simplificar nosso código.
Bom, no JQuery temos vários métodos para o disparo de uma requisição AJAX, o principal deles é o $.ajax(), os outros seguem um conceito parecido com o de sobrecarga de metodos da Orientação a Objetos, ou seja, fazem a mesma coisa e mais um pouco.
São eles:
$.ajax() - Carrega uma página remota através do HTTP Request, ele é a forma mais primitiva de fazer AJAX usando JQuery, pode-se fazer qualquer requisição remota usando esse metodo.
$.get() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” GET.
$.post() – Faz o mesmo que o $.ajax(), mas limita-se apenas a fazer requisições com o “method” POST.
$.getScript() – Carrega um JavaScript de uma página remota.
$.getJSON() – Carrega uma informação de uma página remota que esteja no formato JSON, essse formato é caracterizado por ser muito leve, o que é excelente para o AJAX, que é usado para fazer pequenas requisições.
$.load() – Carrega uma informação diretamente para um elemento do seu XHTML. ideal para ser usado quando a informação não precisa ser tratada, apenas preencher um elemento.
Então vamos para um exemplo prático…
Começaremos por nosso PHP, que poderia ser qualquer linguagem de programação web. Basicamente ele tem que fazer algo relativamente simples, receber um parâmetro de pesquisa e retornar um resultado. Para isso ele pode fazer a pesquisa em um Array ou até mesmo no banco de dados. Para facilitar, explicarei usando um array.
Nesse exemplo teremos um Array de pessoas, onde a chave é o CPF da pessoa, quando usuário preencher o campo de CPF da pessoa automaticamente o ajax vai preencher os campos de Nome e Data de Nascimento de pessoa.
Vamos começar pelo PHP, nesse exemplo vou chama-lo de pessoas.php:
| PHP | | copy code | | ? |
| 01 | < ?php |
| 02 | $cpf = $_GET['cpf']; |
| 03 | |
| 04 | $pessoas['000.000.000-00']['nome'] = "João da Silva"; |
| 05 | $pessoas['000.000.000-00']['dataNascimento'] = "16/06/1989"; |
| 06 | |
| 07 | $pessoas['111.111.111-11']['nome'] = "Andressa Matos Souza"; |
| 08 | $pessoas['111.111.111-11']['dataNascimento'] = "20/01/1985"; |
| 09 | |
| 10 | $pessoas['222.222.222-22']['nome'] = "Bruno Queiroz Castro"; |
| 11 | $pessoas['222.222.222-22']['dataNascimento'] = "23/04/1983"; |
| 12 | |
| 13 | echo $pessoas[$cpf]['nome'] ."-". $pessoas[$cpf]['dataNascimento']; |
| 14 | ?> |
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 04 | <head> |
| 05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 06 | <title>Exemplo</title> |
| 07 | <script type="text/javascript" src="jquery.js"></script> |
| 08 | <script type="text/javascript" src="aplicacao.js"></script> |
| 09 | </head> |
| 10 | <body> |
| 11 | <form action="mantemPessoas.php" method="post"> |
| 12 | <p> |
| 13 | <label for="cpf">CPF: </label> |
| 14 | <input type="text" id="cpf" name="cpf" /> |
| 15 | </p> |
| 16 | <p> |
| 17 | <label for="nome">Nome: </label> |
| 18 | <input type="text" id="nome" name="nome" /> |
| 19 | </p> |
| 20 | <p> |
| 21 | <label for="dataNascimento">Data Nascimento: </label> |
| 22 | <input type="text" id="dataNascimento" name="dataNascimento" /> |
| 23 | </p> |
| 24 | </form> |
| 25 | </body> |
| 26 | </html> |
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $("#cpf").blur(function () { |
| 03 | var cpf = $(this).val(); |
| 04 | $.ajax({ |
| 05 | type: "GET", |
| 06 | url: "pessoas.php", |
| 07 | data: "cpf="+cpf, |
| 08 | success: function(pessoa){ |
| 09 | informacoesPessoa = pessoa.split("-"); |
| 10 | $("#nome").val(informacoesPessoa[0]); |
| 11 | $("#dataNascimento").val(informacoesPessoa[1]); |
| 12 | } |
| 13 | }); |
| 14 | }); |
| 15 | }); |
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o campo #cpf (com o id cpf) sofrer o evento de blur (quando sair do campo) será executada a seguinte função.
Linha 3 - Define uma variável que chamamos de cpf e preechemos ela com o conteudo do campo #cpf.
Linha 4 - Executa um AJAX e inicia a declarações das opções desse metodo.
Linha 5 - Define o tipo de requisição como GET.
Linha 6 - Define a url que será requisitada como pessoas.php.
Linha 7 - Define os parâmetros para o AJAX, o parâmetro passado foi apenas o cpf digitado .
Linha 8 - Define que quando a requisição for concluída, deverá ser executada a seguinte função.
Linha 9 - Quebra a String em um array usando o metodo split, idêntico a função explode do PHP.
Linha 10 - Preenche o campo nome com o valor do primeiro indice do array.
Linha 11 - Preenche o campo dataNascimento com o valor do segundo indice do array.
E abracadabra, está feita a mágica...
Como você pode ver não é tão complicado assim essa história de Javascript.
Uma sugestão para fixarem o conhecimento é tentar fazer a mesma coisa usando os outros metodos AJAX que o JQuery oferece, principalmente o $.getJSON().
Se quiser pode ver o exemplo funcionando clicando aqui.
Qualquer dúvida que tiverem podem comentar no post.
Referências:
Documentação do JQuery - http://docs.jquery.com
JQuery – Primeiros Passos
terça-feira, 24 de março de 2009
As páginas da web estão cada vez mais dinamicas e interativas, algumas coisas antigamentes só eram possíveis de ser feitas com flash, applets java ou algo parecido, hoje com códigos JavaScript veremos que podemos fazer algumas coisas muito interessantes…
O JavaScript foi criado pela netscape para atender principalmente as necessidades de validação de formulários do lado do cliente e fazer interações com a página, mudando atributos das suas tags html, conteudos e até mesmo fazer requisições assincronas (AJAX). Podendo assim desenvolver páginas que estão dentro do que apelidamos de web 2.0.
Hoje em dia, nós desenvolvedores temos alguns frameworks para facilitar o trabalho com essa linguagem. Podemos citar alguns conhecidos: Prototype, Mootools, JQuery, YUI, Dojo, GWT, Rico, entre outros…
Eu tive maior afinidade com o framework JQuery principalmente pela facilidade que ele oferece no desenvolvimento do seu código, e também pelas poucas oportunidades de contato que tive com os outros frameworks. O JQuery tem como premissa simplificar o código JavaScript, tanto que seu slogan é “The Write less, Do More, Javascript Library”. Não há nada melhor para um programador do que escrever menos e fazer mais não acham? Nesse post vou fazer um exemplo simples usando JQuery, futuramente vou postar ideias mais complexas que podem ser aplicadas nesse ótimo framework.
Então mão na massa, antes de tudo temos que incluir a biblioteca JQuery em nossa página xhtml:
Inseri a biblioteca atravez do link estático que a comunidade disponibilizou para quem quer inserir o framework em seu site, mas você pode também baixar o jquery e coloca-lo em seu servidor para linkar nele. Com isso estamos liberados para programar usando o JQuery na nossa página xhtml. vamos fazer um hello world bem inútil colocando a frase "Hello World" dentro da nossa tag <body> através do framework. Com o:
limitamos onde será inserido meu código JQuery, eu consigo pegar qualquer elemento da minha página com as facilidades que os seletores definidos no CSS 3 oferecem. Com isso conseguimos colocar eventos não obstrusivos em nossos elementos. podendo facilmente separar o javascript, css e xhtml que é um ótimo padrão de desenvolvimento web. Exemplo de evento não obstrusivo:
Com isso, quando o link "Clique Aqui..." for clicado o browser vai disparar um alert, sem que tenha que ser colocado o atributo "onclick" na tag <a> Em breve teremos mais ideias interessantes aqui no blog. Você pode acessar a documentação do JQuery para ver os eventos, efeitos, e metódos disponíveis...
O JavaScript foi criado pela netscape para atender principalmente as necessidades de validação de formulários do lado do cliente e fazer interações com a página, mudando atributos das suas tags html, conteudos e até mesmo fazer requisições assincronas (AJAX). Podendo assim desenvolver páginas que estão dentro do que apelidamos de web 2.0.
Hoje em dia, nós desenvolvedores temos alguns frameworks para facilitar o trabalho com essa linguagem. Podemos citar alguns conhecidos: Prototype, Mootools, JQuery, YUI, Dojo, GWT, Rico, entre outros…
Eu tive maior afinidade com o framework JQuery principalmente pela facilidade que ele oferece no desenvolvimento do seu código, e também pelas poucas oportunidades de contato que tive com os outros frameworks. O JQuery tem como premissa simplificar o código JavaScript, tanto que seu slogan é “The Write less, Do More, Javascript Library”. Não há nada melhor para um programador do que escrever menos e fazer mais não acham? Nesse post vou fazer um exemplo simples usando JQuery, futuramente vou postar ideias mais complexas que podem ser aplicadas nesse ótimo framework.
Então mão na massa, antes de tudo temos que incluir a biblioteca JQuery em nossa página xhtml:
| HTML | | copy code | | ? |
| 1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 3 | <head> |
| 4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 5 | <title>Exemplo</title> |
| 6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 7 | </head> |
| 8 | <body></body> |
| 9 | </html> |
Inseri a biblioteca atravez do link estático que a comunidade disponibilizou para quem quer inserir o framework em seu site, mas você pode também baixar o jquery e coloca-lo em seu servidor para linkar nele. Com isso estamos liberados para programar usando o JQuery na nossa página xhtml. vamos fazer um hello world bem inútil colocando a frase "Hello World" dentro da nossa tag <body> através do framework. Com o:
| HTML | | copy code | | ? |
| 1 | $(function () { //AQUI VEM O CÓDIGO } ); |
limitamos onde será inserido meu código JQuery, eu consigo pegar qualquer elemento da minha página com as facilidades que os seletores definidos no CSS 3 oferecem. Com isso conseguimos colocar eventos não obstrusivos em nossos elementos. podendo facilmente separar o javascript, css e xhtml que é um ótimo padrão de desenvolvimento web. Exemplo de evento não obstrusivo:
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 02 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 03 | <head> |
| 04 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 05 | <title>Exemplo</title> |
| 06 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 07 | <script type="text/javascript"> |
| 08 | $(function () { |
| 09 | $(".botaoNaoObstrusivo").click(function () { |
| 10 | alert("Hello World"); |
| 11 | }); |
| 12 | }); |
| 13 | </script> |
| 14 | </head> |
| 15 | <body> |
| 16 | <a href="#" class="botaoNaoObstrusivo">Clique Aqui...</a> |
| 17 | </body> |
| 18 | </html> |
Com isso, quando o link "Clique Aqui..." for clicado o browser vai disparar um alert, sem que tenha que ser colocado o atributo "onclick" na tag <a> Em breve teremos mais ideias interessantes aqui no blog. Você pode acessar a documentação do JQuery para ver os eventos, efeitos, e metódos disponíveis...
Creative Commons - 2010 - Maurício Faustino