Webpoint

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

Atire a primeira pedra quem nunca usou um hack, principalmente para o complicado IE6. Underscore, comentários condicionais e por aí vai... Quando meu colega de trabalho apresentou o underscore hack para mim foi uma maravilha, mas também um vício. Passei a usá-lo frequentemente e esquecia que poderia conseguir chegar no resultado, ultrapassar as diferenças de browsers apenas indo mais a fundo. Mas a pressa é a inimiga da perfeição e o underscore "quebrava um galhão". Resolvi abandoná-lo e testar até o final nos principais browsers. Aprendi muito com isto, descobri a fundo o por que dos problemas e o por que do IE6 renderizar tão diferente do Firefox. Percebi que o IE7 passou a ser mais padrão. Mas as vezes não tem como chegar a um layout comum entre os dois. Então há o recurso conhecido por muitos como comentário condicional. Ele não funcionou para mim em relação ao IE6 e 7, pois o IE7 abria uma tela em branco quando ele era usado.

Com poucas linhas de código, recorri ao Jquery para fazer esta tarefa. Como ele possui funções em seu core para detectar browser e sua manipulação com CSS é bastante intuitiva, resolvi corrigir algumas diferenças do IE6 para os demais com o Jquery. Como é possível?

// Corrigindo Hacks do IE6
var versao = $.browser.version;
 
if($.browser.msie and versao == 6) {
 
 // Estilos somente para o IE6
 
 $("#conteudo_central").css("width","621px");
 
 $("#navegacao").css("width","267px");
 
 $(".idioma").css("display","inline");
 
}

A função $.browser.version retorna o valor inteiro da versão do browser. Assim, para o IE6 a variável versão irá conter o valor 6. No exemplo acima mostrei um hack para corrigir ajustar algumas propriedades CSS para serem aplicadas no IE6. Lembrando que este método está disponível para a versão 1.1.3, antes dele era necessário recorrer a um plugin que extendia as funcionalidades de $.browser.

A função $.browser.msie retorna verdadeiro se o browser for o IE. Assim, a estrutura condicional se torna verdadeira se o browser for o IE e a versão for a 6.

Outros métodos aceitos pela função $.browser

• safari
• opera
• mozilla

O método css do Jquery você atribui propriedades css ao elemento através de dois parâmetros como string, o primeiro é a propriedade e o segundo o valor. Se existirem essas propriedades no CSS o valor final será o do Jquery, pois apesar de ele não inserir o css inline, ele é atribuido depois que o dom estiver carregado. Se ao invés de uma string um número for atribuído ao valor, ele é convertido automaticamente para string.

Não quero de forma alguma incentivar o uso de hacks, pois esta medida tem que ser tomada em último caso. Para todo hack usado tem com certeza uma saída melhor. Mas tem que ser avaliado o tempo e se vale a pena passar dias tentando resolver um bug ou um comportamento não esperado. A desvantagem deste método é que ele não funciona em browsers que não aceitam script ou o navegador esteja desabilitado do uso de javascript. Mas é uma alternativa muito simples e útil. Para quem não está satisfeito com o underscore ou comentários condicionais, está aí mais uma arma no arsenal de hacks a serem usados.

O Jquery em suas funcionalidades possui vários efeitos e ferramentas de animação, desde as mais simples, as mais sofisticadas e outras ainda mais elaboradas oferecida por plugins. Para começar, vou mostrar efeitos básicos de animação que vem incluindo no Jquery.

Montei um arquivo que por si só já é explicativo e mostra os efeitos e exemplos.

Efeitos de animação usando o Jquery

Na animação 01, usa-se o animate, que é usado para criar animações personalizadas, com ela você muda atributos do CSS. Se por exemplo, a altura do elemento é 100px no css e você coloca no animate o parâmetro height para 200px, haverá um redimensionamento com animação. Neste exemplo fiz uma animação usando o posicionamento e a transparência para gerar este movimento. O código encontra-se abaixo:

// Efeito animate
$(".exemplo:eq(0)").toggle(
function(){$(".alvo:eq(0)").animate({left: 10,
 opacity: 'toggle'},"slow");},
 function(){
   $(".alvo:eq(0)").animate({left: 50, opacity: 1},
   "slow");
 
 });

A opção toggle, como pode-se perceber é muito usado no Jquery. Ela altera propriedades e volta ao estado anterior. O toggle como evento, como foi feito no exemplo, aceita dois parâmetros, esses são as funções que iram ser disparadas no primeiro e no segundo clique respectivamente. Para o toggle na propriedade animate e na propriedade opacity(transparência), ele altera a propriedade de um extremo a outro, ou seja, se tiver 1(opaco) ele passa para 0(transparente) ou vice-versa.

É importante salientar que para animações de posição tive que no CSS alterar o position para relative e especificar a posição a ser alterada:

.alvo {
width: 80%;
height: auto;
background-color: #B9C6D1;
color: #115780;
margin: 5px;
padding: 10px;
left: 40px;
position: relative;
}

O restante das animações na verdade são variações do animate, são atalhos para fazer o animate "espefícico", por isto comecei por ele. O fade, por exemplo, altera a propriedade opacity, o slide altera a posição e assim por diante. Eles são "atalhos" para conseguir um efeito mais simples.

Na animação 5, foi usado um callback, que é uma função para ser executada quando a respectiva animação terminar. Muitos métodos do Jquery aceitam callback, inclusive para animações. Neste caso, usei o callback para se obter uma animação de de fadeIn e fadeOut eterna. O código está no exemplo e é bastante autoexplicativo, pois ao terminar uma animação ele executa uma que tem como callback a primeira e assim indefinidamente. Para parar a animação, é necessário o plugin Interface. Ela é bastante completa e possui vários arquivos, o necessário para parar a animação é somente um arquivo - o ifx.js. Com ele apenas utiliza-se o método stop ou stopAll no elemento que está sendo animado para parar a animação. Este plugin merece um post a parte.

Suporte

As animações foram testadas no IE 6, 7, Firefox 2.x e Opera. Este último não funcionou muito bem. Pude notar fazendo outros testes, que o Opera não aceita bem animações que usam transparência. O plugin de Interace funcionou para o Opera em suas animações, mas muitos funcionam sem alterar a transparência. Já os movimentos e easing, no Interface foi aceito pelo Opera, mas as animações do Jquery não. Se você utilizar um show e hide, por exemplo, ele irá esconder e mostrar como pedido, mas no Opera não acontecerá nenhuma animação.

Espero que tenham gostado e este é só o começo das capacidades do Jquery com a animação. Com os plugins, pode-se fazer muito mais. Muitos acham que se aproximam do flash e até extremistas "radicais" acham que o Jquery vai acabar com o Flash. Cada um tem seu papel, inclusive o nosso é saber o que usar e onde usar.

Estava com um layout para programar que a idéia era não ter espaço no topo, ou seja, teoricamente uma margem no topo com o valor de zero. Sendo assim, apliquei um margin: 0 no elemento body. No IE6 e 7 funcionou como esperado, mas no Opera e no Firefox ficou ainda um espaçamento no topo. Por que isso ocorre?

No Internet Explorer há elementos que por padrão tem uma propriedade chamada on having layout (tem layout) . Existe também um artigo desse do Maujor em português. Este assunto é muito amplo e pretendo postar um artigo exclusivamente para isto, mas uma lida neste artigo do Maujor já diz tudo. Entenda por enquanto que isto acontece por causa deste comportamento do IE, que não segue os padrões, possuindo uma própria maneira de tratar o layout.

O que importa, a solução!

Há várias soluções, mas há uma que achei bastante interessante pois me levou a usá-la para várias situações. Há um seletor * que especifica todos os elementos. Se você fizer algo do tipo:

* {  margin: 0;
 
padding: 0;
 
}

Não haverá margem e padding no topo, nos lados e abaixo do elemento body. O problema é que isto será aplicado a todos elementos. Todos sem exceção, pois este seletor serve justamente para este fim. Sendo assim, parágrafos, divs, inputs, uls ficarão com uma margin e um padding com o valor de zero.

Depois que isto aconteceu, comecei a perceber que no decorrer do desenvolvimento da diagramação html / css ocorreu menos diferenças entre o IE e o Firefox. O fato é que você colocando o padding e margin para zero torna-se o padrão da página e assim não haverá diferença destas duas propriedades. Resumindo: se um elemento ul, por exemplo, não tem uma margem especificada, esta margem será o padrão do browser, que é diferente para cada um. Você usando esta propriedade você "iguala" os browsers nesta propriedade. Então para dar uma margem em qualquer elemento, é só especificar que ele será o resultado final.

Além disto, você pode também usá-lo para colocar outras propriedades padrões. Por exemplo, em quase todo site eu costumo especificar o height para auto, então por que não colocar como propriedade do elemento asterisco? Assim quando surgir um elemento com um height diferente, simplesmente eu especifico, se não vai ficar como auto.

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.

Existe atualmente várias Frameworks Javascript e todas tem o mesmo objetivo: aumentar a simplicidade e a produtividade desta linguagem. Então qual seria a melhor? Qual alcança mais estes objetivos? Com certeza há muita discussão sobre isto e para alguns uma certa framework javascript é como um time de futebol ou até uma religião. Elas não vieram para disputar umas com as outras, mas sim para dar uma liberdade de escolha para os usuários.

Escolhi o Jquery de maneira intuitiva. Conheci primeiro o Mootools, achei bastante interessante, mas ao ler a documentação não me senti a vontade. Depois com o rails acabei encontrando o script.aculo.us e comecei a "brincar" com algumas funcionalidades, mas ainda faltava alguma coisa. Depois veio o Prototype quando fui trabalhar com o cakePHP. Com poucos dias pude perceber o poder desta framework. Então descobri que ela estava sendo muito usada e respeitada na comunindade de desenvolvedores. No entanto, no primeiro dia de encontro com o Jquery, já estava fazendo muita coisa, principalmente com o Ajax. É muito conciso o fato de que no final das contas nada de Javascript é inserido no HTML. Mas isto é minha opinião, mas ela não é válida quando o que vale no mundo do desenvolvimento web é a prátia e vivências de diferentes plataformas.

Procurando por várias comparações na Web vou mostrar neste post a diferença entre o Jquery e  Prototype, que julgo serem as mais sólidas da Web.

Acho que esta citação de Michael Futreal resume bem a diferença das duas:
Prototype torna o Javascript interessante, é uma ótima framework, é útil e boa de usar. O Jquery é divertido. Ele permite que você selecione os objetos DOM da página com seletores CSS3 mesmo que os browsers não o suportem. Por ele você navega pelo DOM como um livro muito bem escrito
Esta é uma boa diferença. Mas e isto em códigos?
Vou começar a ilustrar um Javascript comum que é utilizado no dia a dia: Tabela com cores alternadas. Assim ficará fácil perceber como é útil o uso de seletores CSS3.
Com o Prototype:

$$("table").each(function(table){
Selector.findChildElements(table, ["tr"])
 
.findAll(function(row,i){ return i % 2 == 1; })
 
.invoke("addClassName", "odd");
 
});

E agora com o Jquery:

$("tr:nth-child(odd)").addClass("odd");

Agora me pergunte qual seria mais simples e intuitivo? Qual você prefere ficar?

Vamos ilustrar mais uma funcionalidade das duas Frameworks: Adicionar Classes dinâmicamente em vários elementos.

Abaixo o código com o Prototype:

$$('.element').each(function(node) {
 
Element.addClassName(node, 'className');
 
}

Com o Jquery:

$('.element').addClass('className');

Como está descrito no Blog do Jquery , o último código é um exemplo claro da diferença de metodologias. Pelo fato do Jquery está passando mensagens para objetos Jquery, o código possui uma sutil mudança. O Jquery não importa se você está adicionando uma classe em um grupo de objetos ao invés de um objeto. O código para ambas as situações é o mesmo. Prototype, por outro lado, requer um iterador(No caso o each que percorre todos os objetos selecionados).

Na medida que seu código fica mais complexo, a escabilidade do Jquery se torna mais fácil, enquanto que loops aninhados se tornam normas em frameworks como Prototype.

A seleção de objetos utilizando o X-path e o CSS3 tornou-se algo tão útil, que a versão do Prototype depois da 1.5 já aceitava essa característica.

Há muitos rumores de que o Jquery seja bem mais lento que o prototype, mas testes foram realizados e pode-se contatar que não é bem assim. A diferença entra na parte da filosofia. Resumindo estes conceitos, para o Jquery:

• Escabilidade: Pelo fato dos objetos Jquery ter funcionalidades "colado" nele, eles retornam outros objetos Jquery, e assim os desenvolvedores podem passar mensagens adicionais para eles.
• Uso de seletores CSS e XPATH: Devido ao Jquery passar mensagens para objetos, ele pode implementar seletores adicionais no método $.
• Desenvolvimento de Plugin: O próprio Jquery conduz ao desenvolvimento de Plugins. É fácil adicionar funcionalidades ao objeto Jquery.
• Looping automático: Os métodos Jquery são requisitados para automaticamente iterarem através de todos os objetos DOM selecionados.

Bem, acho inevitável qualquer desenvolvedor Javascript fazer o uso de uma framework. Para quem ainda não sabe qual usar, vale a pena dar uma olhada no Jquery. Para quem usa o Prototype, nada contra, pois acho que cada Framework se encaixa para um certo desenvolvedor. Eu me dei bem com o Jquery, outros podem gostar do Prototype e achá-lo bem mais simples e intuitivo. Mas tentei mostrar aqui as diferenças e uma comparação entre as duas e o que me levou a fazer esta escolha. O desenvolvimento de Plugins e a seleção por CSS 3 é um diferencial.

Desculpem a demora para escrever outro Post. Estava de viagem para a minha terra natal e lá o acesso a internet é literalmente remoto.

Vou mostrar mais um simples efeito com o Jquery. Está vendo o campo de busca acima? Percebeu que quando você clica no campo a borda muda de cor e ao retirar o mouse a borda volta ao normal? Estes dois eventos correspondem ao focus e blur do Javascript respectivamente. Se não fosse o digníssimo IE6, como mostrei em posts anteriores com a pseudo-classe hover, seria possível conseguir este efeito totalmente por CSS, mas o IE6 não suporta e ele ainda é o mais usado.

Graças ao Jquery, este efeito pode ser conseguido facilmente e mais uma vez sem precisar inserir eventos no HTML.

Para começar, não esqueça de inserir a framework no head do documento. Isto foi falado nos posts anteriores.

Vamos ao código do efeito:

// focus nos campos
$('.campo').focus(function(){
 
  $(this).toggleClass('campo_focus');
 
});
 
$('.campo').blur(function(){
 
$(this).toggleClass('campo_focus');
 
});

Com o código acima, todos os campos com a classe campo mudará sua classe para a classe campo_focus quando o evento focus for acionado e irá retirar a classe campo_focus quando o evento blur for acionado. Relebrando o toggleClass, que já foi falado no post Hover em tabelas com o Jquery, ele adiciona a classe se ela não estiver presente, e elimina a classe se ela estiver presente. Ou seja, alterna a classe. Ela não funcionou bem para hover em tabelas, sendo necessário mudar para outro método. Mas aqui foi testado no IE6, IE7, Fiferox 2.xx e Opera 9 e funcionou perfeitamente.

Abaixo o CSS da classe campo_focus:

.campo_focus {
   border: 1px solid red;
}

Ele apenas muda a borda para vermelho.

O mesmo raciocínio pode ser aplicado para botões input. No botão de buscar acima ele muda de classe quando o usuário passa o mouse por cima e volta para a classe original quando o usuário retira o mouse. Simplesmente foi adicionado o evento hover neste campo com o toggleClass. Quer experimentar?