Webpoint

Pessoal, tomei a iniciativa de criar um local para todos que desenvolvem plugins aqui no Brasil publicarem.

O endereço é: http://code.google.com/p/jquerydevbrazil/

A idéia é manter um local acessível para o mundo, para compartilhar os plugins e manter a sua documentação original. O autor do plugin poderá manter uma documentação em português em seu blog, mas ter uma documentação em inglês no site do projeto. Através do SVN, o Google code permite um controle de código e edição em equipe. Assim, com o seu plugin plubicado neste local, ele poderá ser melhorado por outros integrantes.

Se quiser fazer parte deste projeto, basta entrar em contato, possuir algum plugin, ter conhecimento sobre SVN, ter uma conta no Google que eu irei enviar o convite.

Com isto, você será orientado de  como será os padrões para publicação.

Não tenho intenção nenhuma de tomar crédito pelos plugins criados pelos colaboradores que se interessarem, esta é apenas uma maneira de centralizar o desenvolvimento e criar um trabalho em equipe para podermos melhorar o que já foi criado da maneira mais prática e moderna.

Desta maneira também, o desenvolvedor pode ter seu plugin em português, mas ter uma referência global para outros que desejarem acessá-los.

Neste local também os membros poderam fazer uma inspeção maior e relatar erros e idéias de novos plugins.

Espalhem a idéia e vamos criar extensões para facilitar o nosso dia-a-dia e consequentemente da nossa equipe e vice-versa.

No site do projeto tem uma idéia de como funciona, pois nele eu publiquei um plugin para centralizar elementos.

E ai pessoal,

Gostaria de informar que agora faço parte da equipe do jQuery para desenvolvimento de plugins e melhoria da Framework e em breve irei publicar os plugins no site do jQuery . Aqui no Blog permanecerá uma documentação em português e no site de plugins do jQuery a documentação original em inglês, para todos poderem usufruírem.

Obrigado a todos que me ajudaram e espero poder continuar passando algo de bom para todos que desejam aprender e se aperfeiçoarem nesta framework.

Só recapitulando. Para quem não sabe, o jQuery é uma framework/biblioteca de javascript para facilitar o desenvolvimento web, principalmente nesta nova era de Ajax e Web 2.0. Ela possui ferramentas para trabalhar com manipulação do DOM, CSS, XML, Ajax e efeitos. Uma das suas grandes vantagens em relação às outras é a possibilidade de facilmente extendê-la, podendo manter "limpa" o seu código original e usar os plugins de acordo com a demanda.

Qualquer projeto reusável pode ser pensado como uma extensão do jQuery e tudo pode ser feito em termos de plugin, facilitando a reutilização do código e a sua manutenção.

Todos os plugins são livres e contém uma documentação de como são usados e ainda servem de lição para quem quer começar a desenvolvê-los. Mas para isto precisa saber e se aprofundar no javascript, que apesar dos pesares e da briga eterna de browsers, ela pode ser uma linguagem amiga e não uma inimiga do desenvolvimento. E o jQuery é a maior prova de que esta linguagem polêmica pode dar bons frutos.

Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({
 
    horizontal: false // somente vertical
 
});
 
$("class_or_id").center({
 
vertical: false //somente horizontal
 
});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2+

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

http://www.alexandremagno.net/jquery/plugins/center

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno - http://www.alexandremagno.net

Licença

http://www.opensource.org/licenses/mit-license.php

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.

Uma das maiores vantagens do jQuery é sua possibilidade de extensão. Criar plugins para ele, uma vez feito, torna-se um vício. Com isto o código fica reaproveitável e e cada vez mais pode ser feito muito com poucas linhas de código.

Vários plugins já se solidificaram e tornam-se essenciais quando você adota o jQuery. Muitos deles em várias discussões no grupo oficial são requeridos para serem adicionados no próprio core do jQuery. Mas os criadores do jQuery não adotam esta idéia, até por que o jQuery precisa continuar limpo e flexível e para isto deve ser somente o jQuery.

Neste post não vou falar detalhado sobre um plugin ou outro, isto ficará para próximos posts. Agora vou somente dar uma visão básica sobre todos e para vocês saberem o quão útil estes plugins são.

Essenciais para o Ajax

Com o ajax, para se cadastrar dados do banco ou pegar dados do usuário digitados em formulários, fica difícil a tarefa "normal" e fácil de pegar os dados e no arquivo de destino no lado servidor eles serem "captados" pela requisição post. Esta tarefa para o javascript precisa ser feita à mão. Sem frameworks, estes dados precisam ser pegos acessando valores de formulários. No entanto, o jQuery tem em seu core o método val() que faz este trabalho. Apesar de facilitar, ela é ainda bastante manual. Com isto, torna-se necessário e muitas vezes essencial o Form plugin para jQuery. Quem ainda não o conhece, trate de conhecer sua documentação como um core do jQuery. Este plugin pega os dados do formulário e faz uma requisição post passando todos os dados transformando todos os names e seus valores para serem acessados no lado servidor normalmente, sem precisar mais nenhum esforço. Além disso, ele possui callbacks para validação e controle dos dados, além de configurar toda a resposta retornada por xml, json ou até mesmo html.

Além disto, ele é integrado com o validate, ou seria o validate integrado com ele? . A verdade é que a parte de validação do form plugin não é tão eficiente e flexível quanto o validate. Este plugin é poderosíssimo e bastante extendível. Você pode fazer toda a validação do lado cliente com ele e até adicionar métodos de validação remota. Quando tudo está ok, o formulário pode ser enviado via ajaxSubmit, um dos métodos do jQuery Form plugin.

Outro plugin que não pode faltar com qualquer site usando ajax, principalmente na navegação é o Live Query, que mantém os eventos após qualquer modificação do dom, mas afinal, o que é isso?

Quando é feita uma atualização por ajax, principalmente usando o método load, a página inserida pelo DOM perde os eventos e suas configurações. Ou seja, se você tiver colocado um link para carregar outra página por ajax, e esta página interna contiver links que mais uma vez executam métodos load, as páginas internas não irão herdar os eventos. É como se eles se "perdessem". Para contornar isto, nos callbacks do ajax, você tem que carregar tudo que irá permanecer novamente. Ou seja, criar funções para fazer requisições e executá-las novamente para que as modificações do dom não percam os seus eventos. Isto é uma tarefa que faz o ajax no jQuery muitas vezes perder sua simplicidade. Sendo assim, com o liveQuery você pode fazer isto normalmente sem perder estas funcionalidades. Ao invés do método bind, vc utiliza o livequery e ele faz com que todo o conteúdo gerado por script herde os eventos, como por exemplo, o ajax. Ele não se restringe somente a isto e tem que ser bastante estudadod, mas se já tiverem tido este problema(e se tentarem fazer a mesma coisa sem ele terão este problema), este plugin resolve muito bem.

Para animações, interface!

Para realizar animações personalizadas, o plugin interface possui tudo o que você precisa. Ele possui uma biblioteca de animaçõs que vão muito além do core do jQuery, além de ter bibliotecas de sortables, draggables e assim sucessivamente. Se deseja fazer animações web2.0, ferramentas de interação totalmente inovadoras, ele é essencial.

O jQuery está também com um esforço de criar o que o scriptaculous é para o prototype, uma ferramenta totalmente completa de interação. Conhecida como jQuery UI,  ela possui uma biblioteca totalmente completa de interação que vai além do interface na tentativa de popularizar e enriquecer a interface de usuário do jQuery.  Ela possui Widgets e métodos de usar bastante simples e personalizável.

Ando tendo problemas com ele, mas provavelmente é devido ao fato de ser bastante novo e tem muito a melhorar, por enquanto vou ficando com o interface.

Desculpe a demora para voltar a escrever, estava atolado de projeto e como prometi, estava desenvolvendo um script para o jQuery em conjunto com a biblioteca SWFUpload. Bem, para quem não sabe sobre o que estou falando, há posts que contam como tudo começou:

• Jquery, Mootools e múltiplos uploads - parte 01
• Jquery, Mootools e múltiplos uploads - parte 02

Descobri o SWFUpload que é uma biblioteca bastante completa e que faz todo o background do processo. Então você tem vários parâmetros e callbacks que podem ser usados da maneira que preferir. Como já sou acostumado com o jQuery, resolvi usá-lo para fazer a parte do callback, ou seja, toda a interface que o usuário experimenta.

Devido as limitações do Javascript, da própria maneira de como é feito o upload de arquivos, temos que reconhecer que este sistema de uploads é uma revolução. Exagero? Como vocês faziam sistemas de uploads de arquivos antes? De cinco em cinco? usando iframe? Enviando os arquivos via FTP? E quando se trata de um sistema que será usado para um cliente?

Apesar de exisitir alguns plugins para o jQuery que tem esse objetivo, confesso que a maioria deles não tem a versatilidade e o poder oferecido pelo fancy upload, desenvolvido para o mootools. Os plugins que mais se aproximam para o jQuery são o Multiple File Upload, que é bom, mas não é versátil e o que ele faz é inserir campos de arquivo escondido e deixar para o usuário somente o registro do arquivo que foi escolhido. No lado do PHP estes campos serão tratados como arrays, bom, mas nada versátil e possui todas as limitações já existentes, uma delas é que você não sabe o tamanho do arquivo até ele ser jogado temporariamente no servidor. O outro é o jqUploader, que é desenvolvido em Flash, sendo assim, o jQuery faz a inserção on the fly do swf, mas a interface e o processamento é todo em flash. O SWFUpload triunfa por que ele usa o flash, mas você não sabe que está sendo usado. Pelo fato do Action Script possuírem classes que manipula arquivos de uma maneira bem mais versátil que o Javascript, além da classe external interface, que deixa o flash interagir com o html externo, esta biblioteca usa essas ferramentas para devolver ao desenvolvedor as respostas para serem usadas adequadamente.

Ao script

O SWFUpload oferece diversos callbacks para serem usados, ele pode ser manipulado por javascript. Usei o jQuery em conjunto com o plugin interface para oferecer uma experiência rica para o usuário fazer o upload de arquivos, como no Flickr.

Havia prometido um plugin, mas com um script ele poderá ser explicado e assim personalizado da maneira que acharem melhor.

Exemplo da interação do SWFUpload com o jQuery

A tarefa do SWFUpload

O trabalho do SWFUpload, como falado anteriormente é processar todos os dados utilizando o action script e devolver estes dados em tempo real para o ser manipulado via javascript.

Portanto, os scripts que precisam ser inseridos no cabeçalho são:

• SWFUpload.js - o script em si, retirado do site, aqui ele está compactado, mas no site tem ele completo e a versão mais atual
• SWFUpload.swf - O arquivo flash que faz o processamento, aconselho colocar no mesmo local do script acima, mas isto pode ser customizado.
• init.js - O script que cria o objeto da classe, com as configurações e a referência aos callbacks necessários
• callback.js - É onde eu entro utilizando o jQuery para facilitar a sua vida :-).

O arquivo que precisa de explicação pela parte do SWFUpload é o init.js que instancia o objeto e o inicializa. Ele permite várias configurações. Todas elas estão na sua documentação. Vou tentar descrever o que usei para fazer este script:

var swfu;
 
var init_uploader = function()
 
{
 
swfu = new SWFUpload({upload_script : '../upload.php',
 
target : "container_arquivo",
 
flash_path : 'swfupload/SWFUpload.swf',
 
allowed_filesize : 30720, // 30 MB
 
allowed_filetypes : "*.*",
 
allowed_filetypes_description : "todos arquivos...",
 
browse_link_innerhtml : "Procurar",
 
upload_link_innerhtml : "Enviar arquivos",
 
upload_file_start_callback : "inicioUpload",
 
browse_link_class : "btn_procurar",
 
upload_link_class : "btn_upload",
 
upload_file_cancel_callback : 'cancelado',
 
upload_file_queued_callback : "entrouFila",
 
upload_progress_callback : "progresso",
 
upload_file_complete_callback : 'terminoArquivo',
 
upload_queue_complete_callback : "fimDownload",
 
upload_error_callback : 'uploadError'	});
 
swfu.loadUI();
 
};
 
//please use better handler attachment than this:
 
window.onload = init_uploader;

Acho que não precisa de muitas explicações, por que as funções já falam por si. Eu especifiquei as funções que serão usadas no callback.js para manipular as respostas, como por exemplo, quando seleciona um arquivo, quando inicia um download e a barra de progresso, todas elas aceitam alguns parâmetros, entre eles o objeto file, que tem várias propriedades, como o id que é uma identificação única do arquivo e graças a ele temos total controle do que está sendo feito com o arquivo. O arquivo upload.php é o script de servidor que faz a manipulação e copia para o local desejado, ele pode ser acessado via $_FILE['Filedata']. A diferença desse para os plugins do jQuery que faz a manipulação dos uploads, é que não será manipulado por um array de arquivos, mas sim será chamado o upload.php para cada arquivo, ou seja, será enviado um por um da fila e seu controle será feito em tempo real, assim como a resposta para o usuário.

Este script é mais geral, você pode especificar os tipos de arquivos desejados. O bom nisto é que a caixa de diálogo exibida pelo flash você acessa o sistema de arquivos do cliente, mas só exibe os arquivos do formato especificado.

É hora do callback!

O arquivo callback.js possui toda a manipulação necessária e a inserção on the fly da lista de arquivos, nome, tamanho, botão de remover, barra de progresso etc. Tudo é feito via jQuery e com os efeitos do plugin interface.

Dê uma analisada no html, pois alguns elementos são essenciais para o funcionamento, pois através dele o jQuery faz inserções de conteúdo on the fly.

O arquivo css encontra-se abaixo e pode ser personalizado:

/* Upload de arquivos */
 
body {font-family: Arial, Helvetica, sans-serif;
 
font-size: 12px;
 
}
 
#wrapper {
 
width: 600px;
 
margin: 20px auto;
 
border: 1px solid gray;
 
background-color: #FFFBEF;
 
}
 
#wrapper h2 {
 
text-align: center;
 
background-color: #3E458F;
 
width: 100%;
 
color: white;
 
padding: 12px 0;
 
}
 
#contentContainer {
 
width: 300px;
 
height: auto;
 
margin: 10px auto;
 
background-color: #FDFFEF;
 
border: 1px solid #9F8181;
 
padding: 20px;
 
}
 
#container_arquivo {
 
padding: 10px 6px;
 
margin: 8px auto;
 
}
 
#lista li {
 
width: 90%;
 
height: 75px;
 
margin: 12px 0;
 
padding: 6px;
 
background-color: #DBDFC3;
 
list-style-type: none;
 
}
 
#lista li a {
 
display: block;
 
}
 
.msg_fim_upload {
 
text-align: center;
 
color: red;
 
font-weight: bold;
 
padding: 5px;
 
background-color: #FFE7DF;
 
}
 
.btn_procurar, .btn_upload {
 
padding: 4px;
 
background-color: #E0E3EF;
 
border: 1px solid #74798F;
 
margin: 10px;
 
text-decoration: none;
 
}
 
.btn_procurar:hover, .btn_upload:hover {
 
background-color: #DFDFDF;
 
}
 
.arquivo {
 
font-weight: bold;
 
color: #6F3039;
 
}
 
.campo_peq {
 
border: 1px solid gray;
 
font-size: 10px;
 
background-color: #E5EFE0;
 
margin: 6px 5px 0 5px;
 
}
 
.barra {
 
background-color: green;
 
color: white;
 
width: 1px;
 
margin: 4px 0;
 
border: 1px solid gray;
 
text-align: center;
 
display: block;
 
}
 
/* fim do upload de arquivos */

Alguns dessas estilizações são para a demonstração online e outros são para o funcionamento adequado do script.

O script foi testado no Firefox 1.2.xx, no IE6 e IE7. Nestes dois últimos, há uma pequena falha na animação, mas devido ao interface. Se não gostou do resultado do efeito, ele pode ser alterado pelo callback nas linhas que tem os métodos Grow(crescer) e Shrink(encolher).

Espero que tenham gostado e que façam bom proveito deste script e qualquer dúvida, estou a disposição.

Antes de ler este post, aconselho lerem primeiro a parte 01.

Logo abaixo vai a solução postada no grupo oficial do Jquery.

Houve um recente alvoroço de emails na lista de discussão sobre o conflito com o uso do Mootools em conjunção com o Jquery. Quando o Mootools lançou a versão 1.1, eles renomearam seus eventos expando para $events, deste modo haveria um conflito instantâneo com o jQuery.

Bem, o desenvolvedor brasileiro Alexandre Magno http://blog.alexandremagno.net/) veio com uma publicação com uma simples solução sobre este problema, renomeie o $event expando no Mootools!

“Eu encontrei uma solução que trabalha perfeitamente. Eu sou o exemplo vivo de que precisamos as vezes usar ambas frameworks. Eu desenvolvo todos os meus projetos em Jquery, por que foi a que aprendi mais fácil e me sentir mais confortável. Nada contra o Mootools, que é uma bela framework também... Mas eu precisei do Fancy Upload para trabalhar e só é possível com o Mootools, eu fiz tudo, mas não funcionou por causa do conflito com a variável $event. Eu resolvi este problema baixando o mootools sem nenhuma compressão, usei um software como aptana, dreamweaver, ou até mesmo notepad para substituir todas as ocorrências de $event para $event2 por exemplo, e comprimi novamente a biblioteca novamente. Desta maneira, as duas frameworks trabalham perfeitamente, desde que usando o jquery com o noConflit devidademente configurado. Eu espero que isto funcione e breve eu irei desenvolver um sistema de upload para jquery para não ter que usar ambos. É uma vergonha para a equipe do Mootools esperar o jQuery resolver este problema em que ninguém é culpado... é só convenção... por que simplesmente não mudam $event para $mootoolsEvent ou $mooEvent por exemplo??? As vezes é necessário usar ambas, sem dúvida.”

Isto foi postado no forum do MooTools em resposta há um post em que John e eu estávamos tentando resolver um problema de integração de um para um usuário que deseja usar MooTools e jQuery juntos. Nós percebemos o quão irrealista esperar que desenvolvedores irão usar somente uma framework e a equipe vem fazendo grandes esforços para garantir um nível satisfatório de integração entre outras bibliotecas com o uso do noConlict(). No jQuery v1.2, nós fomos mais além para permitir o renomeamento dos eventos expando para qualquer que seja, evitando qualquer conflito.
Enquanto isto não seja um bug do jQuery, nós nos sétimos muito e desenvolvedores integrarem suas ferramentas e nunca trabalhando para que o jQuery seja um gargalo.
Obrigado John e a equipe do jQuery por continuar fazer o jQuery uma solução flexível e obrigado a você Alexandre por expandir o alcance do jQuery para os brasileiros e oferecer esta saída.
Rey...

Gostaria de agradecer o Ray pela oportunidade e ao invés de mostrar o funcionamento do Fancy Upload, irei desenvolver como prometido uma ferramenta semelhante para o jQuery. Vai ser meu primeiro plugin, então mãos à Obra. Dúvidas com o noConflict() será postada aqui breve.

Tudo começou com o sistema de Uploads do Flickr. Fiquei fascinado como era eficiente, fazia tudo que era necessário no client side e depois enviava de forma incrível. Já vi algo parecido em um dos plugins do Jquery chamado JqUplodad , mas o upload na verdade era com Flash e ainda por cima não suporta múltiplos uploads. Fiquei fascinado com a solução do Flickr . Resolvi então pesquisar, tentei achar dicas no código que eu pudesse saber o que estava acontecendo por trás daquilo tudo. Não, não é Ajax. Como o tamanho do arquivo do cliente aparecia antes mesmo de ser mandado temporariamente para o servidor? O Javascript não permite isto por motivos de segurança. Pesquisei Blogs em inglês e um sujeito chamado Beau Collins teve a mesmo fascínio. Quando cheguei em casa fui olhar mais profundamente esse sistema e quando entrei(é necessário criar uma conta no Flickr e então é só ir em upload fotos e você verá do que estou falando) pediu o plugin do flash instalado. Flash? Como assim Flash? Eu não estou vendo nenhum Flash! Descobri então um arquivo chamado yuploadcomponent.swf. Ele não faz nada é verdade, mas ele trabalha por trás de nossos olhos.

No Flash há uma classe que não conhecia, chamada File Reference. Ela controla o upload de arquivos no flash e permite que você adicione uma barra de progresso e ainda tenha informações do arquivo do cliente como tamanho, que não é possível com Javascript. A janela que abre quando você clica para fazer o upload na classe do Action Script é a mesma do Flickr, mas o link está em uma página HTML. Não é um HTML dentro do Flash, como muitos poderiam pensar. Mas ainda tinha muitas dúvidas, é uma solução complexa e que devo dar os parabéns pelo trabalho da equipe do Flickr.

O que acontece na verdade

Existe uma outra classe no Flash chamada ExternalInterface que permite interagir o flash com o Javascript e HTML. Assim, quando você clica em um link você pode chamar um Action Script, neste caso do Upload, você executa método File Reference. Além disso, flash funciona simplesmente para esta interação, para buscar dados e então as respostas são controladas pela framework YUI Library. Mas ela foi usada por que é própria da Yahoo, poderia ser manipulada por qualquer Framework, inclusive Jquery e Mootools.

A solução da Mootools

Então descobri o Fancy Upload desenvolvido para Mootools. Nunca achei que iria precisar de outra Framework e nem que iria criar uma categoria para ele. Nada contra, pois a princípio foi uma das primeiras que tentei aprender e usar, não me dei muito bem com ela, ficava restrito a pegar coisas prontas. Com o Jquery o aprendizado "fluiu" mais naturalmente, como para muitos, o Mootools é mais tranquilo.

Implementei então o fancy upload para poder aplicar em um projeto na empresa onde trabalho. Eis o exemplo do seu funcionamento.

Sendo assim, encontrei uma solução em outra Framework, tive uma dificuldade pois não tinha familiaridade com ela, mas consegui. O problema veio depois.

Conflito entre Mootools e Jquery

Na implementação deste sistema de Upload fui obrigado a colocar as duas, pois todo o Javascript do site é controlado pelo Jquery. Desta maneira houve um conflito inevitável entre as duas Frameworks. Apesar do Jquery possuir o recurso de noConflict( um belo esforço da equipe em dar a opção aos desenvolvedores usar o que acharem melhor) ainda há um problema com a variável $event, que é usada nas duas bibliotecas.

Então entrei em fóruns no Mootools e descobri uma discussão exatamente sobre isto e que era um assunto bastante discutido nas duas comunidades. O que se pode tirar desta discussão é que os desenvolvedores do Mootools aconselham o uso de somente uma framework, enquanto que o Jquery cria alternativas para as duas ou até várias serem usadas. Geralmente não há necessidade de usar várias frameworks Javascript em um site, mas para toda regra há uma exceção. Nesta discussão não houve uma solução e eu acabei ficando com um problema e um dilema: tirar o Jquery e fazer tudo em Mootools, ou simplesmente chegar para minha chefe e falar "não vai ser possível implementar, desculpe". Tentei várias coisas, mas nada funcionava.

Resolvendo o conflito entre Jquery e Mootools

A solução é mais simples do que parece e será postada detalhadamente na parte 02 deste post. Não é para atrair sua atenção desenvolvedor, que quer logo soluções sem saber a história do problema ;-). O que aconteceu foi que consegui uma solução e postei no fórum do Mootools. Ela não foi bem aceita na comunidade deles, mas o Rey Bango, um dos desenvolvedores da equipe do Jquery, que estava na discussão fez um artigo no grupo oficial do Jquery sobre a solução que coloquei no forum do mootools. No próximo post colocarei a tradução do artigo que contém a solução.

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