Posts tagged ‘ajax’

12 de outubro de 2010

Adicionando eventos a elementos dinâmicos com jQuery

por adlerparnas

Fala galera! Hoje venho falar de um recurso que o jQuery possui que salva vidas 😀

Quantas vezes criamos elementos HTML utilizando Javascript e ainda precisamos adicionar funções para os eventos a esses elementos? Quem gosta de RIA utilizando Javascript sabe disso.

Digamos que temos um menu e que os cliques são tratados por uma função “trataClick”. Nosso arquivo HTML e Javascript ficaria assim:

arquivo.html

<html>
 <header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="scripts.js" type="text/javascript"><!--mce:1--></script>
</header>
 <body>
 <ul id="main_menu">
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
<li><a href="#item4">Item 4</a></li>
 </ul>
 </body>
</html>

scripts.js

//função que trata os cliques no menu
function trataClick(){
alert(this);
}

$(function(){
$('#main_menu a').click(trataClick);
});

Tudo funcionando! Mas e se  tivessemos que adicionar novos itens ao menu? Você teria que adicionar a função ao evento click dos novos elemento. Digamos que nosso menu seja construido via AJAX:

$.ajax({
url: "meuController.php",
type: 'POST'
success: function(data){
//removendo todos os filhos do menu
$('#main_menu').find('li').remove();
//incluindo novos itens no menu
$('#main_menu').append(data);
//adicionando a função aos novos elementos
$('#main_menu a').click(trataClick);
},
error: function(){
alert("Não foi possível recuperar o menu");
}
});

Aqui vem o pulo do gato! 😀 A biblioteca jQuery possui uma função “live” que atribui o evento a todos os elementos que estão na página mesmo os que são criados depois da chamada, livrando-nos da obrigação de adcionar a função ao evento toda vez que novos elementos são criados.

$('#main_menu a').live('click', function(){alert('clicou')});

É isso ai pessoal! Espero que essa dica seja útil pra vocês quanto é pra min. Espero comentários e caso tenha dito algo errado sintam-se à vontade para me corrigir. Abraços e até a próxima dica.

Anúncios
13 de julho de 2010

Javascript Orientado a Objetos

por adlerparnas

Olá! Pessoal!

Meu nome é Adler Parnas, e hoje vou falar de uma técnica que utilizo para escrever o Javascript dos meus projetos. Imagino que todos já conheçam a biblioteca Javascript jQuery e entendam Programação Orientada a Objetos, pelo  menos um pouco.

Já vimos inúmeras demonstrações que a utilização de cache, quando se utiliza jQuery, é muito eficiente por diminuir a chamada da função seletora $(). Sim, fazer cache daquele campo no HTML onde você atualiza os twittes no seu blog é perfeito, afinal de contas, a cada 10, 20, 30 segundos você  altera o texto que está lá!

Agora me responda uma coisa! Do quê adianta eu fazer cache de elementos, se em tal página eles nem existem ou não são tão utilizados assim? Uma forma de tratar isso seria criar um arquivo Javascript apenas para essa página, ou até mesmo colocar o Javascript direto no HTML (haarrrr), podendo gerar muitas linhas de códigos repetidos. Uma forma que gosto de tratar isso é criando objetos para cada “página” do meu site/sistema, assim realizo cache e executo somente o que é necessário.

Vamos dizer que temos uma página de cadastro, onde o Javascript é necessário apenas para validação dos campos e talvez algumas requisições AJAX.  Da forma que eu utilizo seria algo parecido com isso:

var cadastro = {
    _$txt_email:null,
    _$txt_password:null,
    initialize:
       function(){
          /*
           * aqui vem o código que será executado no onload da página
           */
       } // fim da funcao initialize
} // fim do objeto cadastro

Para fazer com que cada função initialize seja executada no objeto correto, utilizo uma classe na tag body, que me ajuda no CSS e informa para o Javascript qual página está sendo renderizada.


<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Pàgina de Cadastro</title>
</head>
<body class="cadastro">
  <form action="">
     <fieldset>
         <label for="txt_name">Nome <em>*</em></label>
         <input type="text" name="txt_name" id="txt_name" />
     </fieldset>
     <fieldset>
         <label for="txt_email">Email <em>*</em></label>
         <input type="text" name="txt_email" id="txt_email" />
     </fieldset>
     <fieldset>
         <label for="txt_password">Senha <em>*</em></label>
         <input type="text" name="txt_password" id="txt_password" />
     </fieldset>
     <fieldset>
         <label for="txt_password_2">Confirmar senha <em>*</em></label>
         <input type="text" name="txt_password_2" id="txt_password_2" />
     </fieldset>
     <fieldset><input type="submit" value="Enviar" /></fieldset>
  </form>
  <!-- Javascript include -->
  <script type="text/javascript" src="script.js"></script>
  <!-- end Javascript include -->
</body>
</html>

Para que o objeto certo seja executado escrevo meu código Javascript dessa forma:

/**
 * Variável para fazer cache do elemento body
 */
var $_body;

var home = {
   initialize:
      function(){
          /*
           * Código executado no on-load da página
           */
      }
}

var cadastro = {
   _$txt_email:null,
   _$txt_password:null,
   initialize:
      function(){
          /*
          * Código executado no on-load da página
          */

          // realizando cache dos elementos importantes para essa página
          this._$txt_email = $("#txt_email");
          this._$txt_password = $("#txt_password");

          this._$txt_email.change(cadastro.valida_email);
      },
   valida_email:
      function (event){
         // validação de email
      },
}

var login = {
   initialize:
      function(){
           /*
            * Código executado no on-load da página
            */
            $('#txt_email').change(cadastro.valida_email);
      }
}

$(
   function(){
      try{
         // realizando cache do elemento body
         $_body = $('body');
         // recuperando o classe do elemento body e chamando o
         // método initialize do objeto responsável
         eval($_body.attr('class')+".initialize()");
      } catch(){
         // coloquei detro do tray-catch pq se o objeto não existir
         // o javascript não gerará um erro (padrão silenciator hehhe).
      }
   }
);

Não sei dizer ao certo, se essa é ou não a melhor forma de escrever o código Javascript, sei que dessa forma facilita muito a reutilização de código, na manutenção e na performance, pois não fico executando comandos de outras páginas.

É isso ai pessoal! Espero que esta dica seja útil para todos e caso tenha tido algo errado, favor me corrijam! Até o próximo post!