Posts com a Tag ‘AJAX’

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



Nenhum comentário »
Publicado em JQuery
Tags:, , ,

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:
 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 &eacute; uma pagina com um <a href="#" id="link">link</a></p>
17
		</div>
18
	</body>
19
</html>
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:
 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
});
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:
 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 &eacute; o conteudo da primeira pagina</p>
11
			<p>Essa tambem &eacute; uma pagina com um <a href="#" id="link">link</a></p>
12
		</div>
13
		<div id="conteudo2">
14
			<p>Esse &eacute; o conteudo da segunda pagina</p>
15
			<p>Essa tambem &eacute; 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&ecirc; 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&ecirc; clicou no link");
17
				return false;
18
			});
19
		});
20
		return false;
21
	});
22
	$("#link").click(function () {
23
		alert("Voc&ecirc; clicou no link");
24
		return false;
25
	});
26
 
27
});
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.
2 Comentários »
Publicado em AJAX, JQuery
Tags:, ,

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:
 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
?>
Agora que temos algumas pessoas em nosso php, vamos fazer a parte de apresentação, seu  XHTML deveria ficar assim:
 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>
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:
 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
});
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
5 Comentários »
Publicado em AJAX, JQuery
Tags:, ,

Categorias

Eu recomendo




    Creative Commons - Alguns direitos reservados
    Firefox

Creative Commons - 2010 - Maurício Faustino