16/05/2013

Sorteio do livro: Segredos do Ninja JavaScript

jquery_ninja

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de um sorteios do livro Segredos do Ninja Javascript lançado na última semana. Para quem não conhece, o livro foi escrito por John Resig, nada mais, nada menos que o criador do jQuery.

Como participar no Facebook?

O participante deverá:

As participações só serão aceitas até o dia 26/05/2013 às 23:59. O sorteio acontecerá no dia 27/05/2013. Boa sorte! :)

Resenha do livro

Nem sempre você pode bater de frente com seu software. Às vezes você tem de se aproximar dele pelos flancos ou esgueirar-se sorrateiramente por suas costas. Você deve dominar um arsenal de ferramentas e conhecer cada truque furtivo. Você deve ser um ninja.

Segredos do Ninja JavaScript guiará você pelo caminho do esclarecimento em JavaScript. Este livro único inicia com conceitos-chave, como o relacionamento entre funções, objetos e closures, ensinados a partir da perspectiva do mestre. Você evoluirá de aprendiz a ninja à medida que absorve insights inovadores sobre as técnicas que utilizará diariamente para revelar funcionalidades e capacidades das quais você nunca soube. Ao atingir os capítulos finais, você estará pronto para codificar aplicações JavaScript brilhantes e talvez até mesmo para desenvolver suas próprias bibliotecas e frameworks.

Conteúdo abordado pelo livro:

  • Funções, objetos, closures, expressões regulares e muito mais
  • Como visualizar aplicações e bibliotecas a partir da perspectiva certa
  • Exemplos de design JavaScript moderno
  • Como lidar com as complexidades do desenvolvimento para navegadores cruzados
19/04/2013

jQuery 2.0, seu lindo!

Depois de tão esperado, uma grande notícia para nós desenvolvedores. jQuery 2.0 foi lançado! :)

Como já divulgado, ele abandona o suporte para os Old-IE’s (6, 7 e 8), e com isso retira uma grande parte de código que era necessário para dar suporte a estes navegadores. Resultado? Bem menor (12%), mais rápido e o código ficou mais limpo para podermos analisar e entender como funciona cada coisa. :)

Ah, você precisa dar suporte a estes navegadores? Não tem o que se preocupar. A equipe do jQuery continua desenvolvendo em paralelo as versões 1.x (atual 1.9 e futura 1.10) para os sites que precisam suportar estes browsers.

Como encontrá-los?

Se você precisar atualizar a partir de uma versão anterior a 1.9, o ideal é usar o plugin jQuery Migrate e acessar o guia de upgrade do jQuery 1.9, pois houve uma série de mudanças. E é bem simples usar o plugin. Basta incluir no seu HTML e abrir o console para ver as mensagens que são geradas.

Se você não precisa se preocupar com os Old-IE’s, viva! Pode colocar o 2.0 para rodar e ser feliz para o resto da vida. Se você precisa suportá-los, também não tem problema. O carregamento do 1.9 pode ser feito apenas para os browsers antigos, e os novos ficam com a versão mais recente, mais enxuta e mais rápida :)

Como fazer isso? Bem simples :)

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->

<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--[endif]-->

Algumas das mudanças mais importantes:

Não há mais suporte para IE 6/7 e 8: Vale ressaltar que isso também pode afetar os usuários do IE9/10, mesmo se forem usados em “modo de exibição de compatibilidade” que emulam as versões mais antigas. Para evitar isto, sugiro que use sempre a tag X-UA-Compatible.

Tamanho reduzido: O arquivo minificado da versão 2.0.0 é 12% menor que o 1.9.1 graças a eliminação do código de compatibilidade dos Old-IE’s. O elo mais fraco agora são os velhos navegadores Android 2.x / Webkit. Como o uso do Android 2.x já é bem reduzido, em breve este suporte também deve ser removido.

“Custom builds”: Esta funcionalidade tem sido bem refinada e ampliada desde que estreou no jQuery 1.8. Agora você pode escolher uma as combinações de 12 módulos diferentes para criar uma versão personalizada menor. Com a configuração mínima, é possível utilizar parte da biblioteca com apenas 10KB, minified e compactado.

Se sua aplicação já está funcionando com o jQuery 1.9, funcionará com o 2.0 :)

17/03/2013

Como publicar um plugin no novo repositório do jQuery

Depois de meses fora do ar, finalmente o novo repositório oficial de plugins jQuery está no ar!

jq

Muita coisa mudou para você que já cria plugins jQuery e esse artigo está aqui para lhe ensinar como publicar seu plugin por lá.

Passo 0 – Crie seu plugin

Isso mesmo, se você caiu de paraquedas nesse artigo e nunca criou um plugin, essa é sua chance de começar. Use o jQuery Boilerplate e seja feliz :)

Passo 1 – Crie um Package Manifest

Crie um arquivo chamado nomeDoSeuPlugin.jquery.json, ele irá listar todas as informações sobre o seu plugin.

Fique à vontade para seguir o seguinte modelo:

{
  "name": "boilerplate",
  "title": "jQuery Boilerplate",
  "description": "A jump-start for jQuery plugins development.",
  "keywords": [
    "jquery",
    "boilerplate",
    "plugins"
  ],
  "version": "3.2.0",
  "author": {
    "name": "Zeno Rocha",
    "url": "https://github.com/zenorocha"
  },
  "maintainers": [
    {
      "name": "Zeno Rocha",
      "email": "zno.rocha@gmail.com",
      "url": "https://github.com/zenorocha"
    },
    {
      "name": "Addy Osmani",
      "url": "https://github.com/addyosmani"
    }
  ],
  "licenses": [
    {
      "type": "MIT",
      "url": "http://www.opensource.org/licenses/mit-license.php"
    }
  ],
  "bugs": "https://github.com/jquery-boilerplate/boilerplate/issues",
  "homepage": "http://jqueryboilerplate.com",
  "docs": "https://github.com/jquery-boilerplate/boilerplate#readme",
  "download": "https://github.com/jquery-boilerplate/boilerplate/archive/master.zip",
  "dependencies": {
    "jquery": ">=1.4"
  }
}

Se tiver qualquer dúvida sobre os atributos dele, visite esse link.

Passo 2 – Crie um repositório público no Github

Pode parecer estranho, mas esse é um passo obrigatório hoje. Eles assumiram que é preciso incorporar uma ferramenta de versionamento de código (Git) no processo de desenvolvimento. O que, por sinal, eu acho ótimo.

Então se você ainda não criou, vai lá e crie!

Passo 3 – Adicione um Post-Receive Hook

Agora que você tem seu repositório criado no Github, será preciso fazer uma configuração bem fácil por lá.

3.1 – Abre seu repositório no Github e vá para página “Settings”

3.2 – Clique em “Service Hooks”

3.3 – Clique em “WebHook URLs”

3.4 – Entre com a URL http://plugins.jquery.com/postreceive-hook e clique em “Update Settings”

Passo 4 – Publique uma versão

Novamente outro passo muito simples se você já é familiarizado com Git.

Basta criar uma tag com a versão:

git tag 0.1.0
git push origin --tags

Se você fez todos os passos direitinho, agora você já poderá ver seu plugin por lá \o/

Sempre que for atualizar seu plugin, basta publicar uma nova tag.

Problemas?

Se encontrar algum problema pelo caminho, consulte os canais oficiais de suporte:

  • Canal IRC: #jquery-content no freenode;
  • Email: plugins@jquery.com;

Mais informações

09/03/2013

Delegando e removendo eventos com .on() e .off()

O jQuery dispões de várias formas para se delegar um evento, porém a forma mais recomendada pelo jQuery Team é o .on().

Até a versão 1.7 da biblioteca você poderia usar o método .bind() para delegar eventos para elemento no DOM e o método .live() para delegar eventos para elementos que fossem colocados na árvore DOM posteriormente à utilização do método.

Com a chegada de jQuery 1.7 veio o método .on() que pode fazer os dois tipos de delegação de forma muito eficiente.

Para isso, basta escapsular o elemento alvo, chamar o método .on() e passar como parâmetros respectivamente o tipo de evento, e a função a ser chamada.

Exemplo:

$('a').on('click', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM (Equivalente a .bind()).

Mas e se eu inserir uma âncora após essa delegação?

É simples, o método .on() pode aceitar um seletor como segundo parâmetro para filtrar o primeiro seletor e a função a ser chamada é passada como terceiro parâmetro. Por tanto você pode encapsular o próprio documento, pois este sempre estará no DOM e então filtrar para o seletor que você desejar.

Exemplo:

$(document).on('click', 'a', function(event) {
	event.preventDefault();
});

O exemplo acima delega um evento click para as âncoras no DOM e também para todas as âncoras que forem inseridas dentro do document posteriormente (Equivalente ao .live()).

Você também pode declarar mais de um evento para chamar uma mesma função separando o tipo de evento por espaços.

Exemplo:

$('a').on('mouseenter focusin', function() {
	$(this).addClass('hover');
});

E pode declarar mais de um evento com funções distintas se você usar um objeto.

Exemplo:

$('a').on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {

		$(this).removeClass('hover'); 
	}
});

Ou no caso de âncoras inseridas posteriormente no DOM:

$(document).on({
	mouseenter : function() {
		$(this).addClass('hover');
	},
	mouseleave : function() {
		$(this).removeClass('hover'); 
	},
	click : function(event) {
		event.preventDefault();
	}
}, 'a');

Também no jQuery 1.7 o método .off() foi implementado com o objetivo de remover eventos de elementos no DOM. Você pode tanto remover todos os eventos sem passar nenhum parâmetro quanto pode remover um evento em específico passando o tipo de evento como parâmetro.

Exemplo:

// Remove todos os eventos das âncoras no DOM.
$('a').off();
// Remove apenas o evento &amp;quot;submit&amp;quot; de todos os formulários no DOM.
$('form').off('submit');

Gostou ou tem algo a acrescentar? Então não esqueça de comentar ^^!

15/05/2012

jQuery: biblioteca ou framework?

Esta discussão não é recente. Na verdade, é um assunto muito polêmico, e não são os tão conhecidos mamilos. Até algum tempo atrás, no próprio site oficial, o jQuery se definia como um framework, e atualmente, deixam bastante explícito que é uma biblioteca. Mas por que tanta dúvida da comunidade e dos próprios desenvolvedores? Vamos tentar entender um pouco mais cada coisa, analisando diversas fontes do nosso universo online (não, não é um jabá!). Vejamos os conceitos…

Biblioteca (or Library)

“In computer science, a library is a collection of resources used to develop software. These may include pre-written code and subroutines, preses, values or type specifications.” Wikipedia/EN

“Na ciência da computação, biblioteca é uma coleção de subprogramas utilizados no desenvolvimento de software. Bibliotecas contém código e dados auxiliares, que provém serviços a programas independentes, o que permite o compartilhamento e a alteração de código e dados de forma modular.” Wikipedia/BR

Framework (or that even)

“A software framework is a universal, reusable software platform used to develop applications, products and solutions. Software Frameworks include support programs, compilers, code libraries, an application programming interface (API) and tool sets that bring together all the different components to enable development of a project or solution.” Wikipedia/EN

“Um framework, em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.” Wikipedia/BR

jQuery

“jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” Site oficial do jQuery

Ou seja, o jQuery simplifica diversas coisas para um desenvolvimento mais rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript. Mas ele não dita qual a estrutura nem qual o fluxo em que sua aplicação deve ser montada, consequentemente, por esses e outros motivos, não deve ser considerado um framework.

jQuery Mobile

“jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” Site oficial do jQuery Mobile

Quem conhece o jQuery Mobile, em seu Getting Started, já ditam qual o modelo em que sua aplicação deve seguir para poder utilizá-lo. Todas as seções, listas, navegação, campos de formulário, devem seguir à risca o modelo, a menos que seja configurado diferentemente. Com isso, todo o Javascript, CSS e imagens do framework serão utilizados para facilitar o trabalho do desenvolvedor.

And now?

Pois é, terminologia sempre geram dúvidas. Mas analisando as fontes diferenciadas, conseguimos ter uma ideia mais aprofundada. Em suma, um framework é algo que normalmente obriga uma certa forma de implementação da solução. A biblioteca, como seu próprio nome diz, é um acervo, que contém funções/métodos/padrões que irão facilitar o trabalho do desenvolvedor.

27/03/2012

Criando elementos com jQuery

Desde sua primeira versão, a biblioteca jQuery possui a funcionalidade de criar elementos de forma eficiente com a função jQuery(). Porém muitas vezes os desenvolvedores acabam esquecendo desta funcionalidade e utilizando strings no formato de HTML para resultar em grupos de elementos.

Até a versão 1.9 da jQuery a função jQuery() convertia strings no formato de HTML em conjuntos de elementos. Por questões de proteção XSS a partir de jQuery 1.9 a função jQuery() só converte em um grupo de elementos strings iniciados em "<" (menor que). Caso haja a necessidade de converter um string que comece com um nó de texto por exemplo, você pode recorrer ao método jQuery.parseHTML(). (Leia mais em: jQuery(htmlString) versus jQuery(selectorString))

Exemplo:

$.parseHTML('Nome: <input type="text" name="nome" />').appendTo('form');

Para evitar o uso de strings ao criar elementos você pode passar como primeiro parâmetro da função jQuery() um string no formato de tag HTML e como segundo parâmetro suas propriedades.

Exemplo:

$('<a>',{
	href : 'http://jquerybrasil.org',
	target : '_blank',
	text : 'jQuery Brasil'
});

O resultado é:

<a href="http://jquerybrasil.org" target="_blank">jQuery Brasil</a>

As propriedades passadas no objeto do segundo parâmetro não se resumem apenas em attributos, você também pode usar algumas das funções da jQuery, como por exemplo a função .css() que se destina a estilizar elementos ou a função .data() que se destina a armazenar dados no elemento.

Exemplo:

$('<div>',{
	id : 'box',
	css : {
		width : 100,
		height : 100,
		background : '#000'
	},
	data : {
		name : 'box'
	}
});

O resultado é:

<div id="box" style="width:100px;height:100px;background:rgb(0,0,0);"></div>

Você também pode delegar eventos:

$('<a>',{
	href : 'http://jquerybrasil.org',
	target : '_blank',
	text : 'jQuery Brasil',
	click : function(event) {
		event.preventDefault();
	}
});

No jQuery 1.8 uma nova funcionalidade foi implementada, você pode usar alguns manipuladores DOM para trabalhar com o elemento sem a necessidade de encadear mais funções.

O exemplo abaixo cria um elemento div, inclui dentro dele uma âncora e em seguida o insere como ultimo elemento de body.

$('&lt;div&gt;',{
	append : $('<a>',{
		href : 'http://jquerybrasil.org',
		target : '_blank',
		text : 'jQuery Brasil'
	}),
	appendTo : 'body'
});

Você também pode usar animate, html, prepend, prependTo, insertAfter e insertBefore dentre outros.

Gostou ou tem algo a acrescentar? Então não esqueça de comentar ^^!

13/02/2012

Caçando bugs na jQuery

Dan Heberden publicou no GitHub um pequeno script denominado jquery-include destinado a carregar qualquer versão da biblioteca jQuery em sua página web. Ora bolas! Por que alguém iria se importar com mais uma forma de carregamento da biblioteca jQuery se tantas e já consagradas formas existem?

O diferencial do script de Dan é a possibilidade de carregamento de qualquer versão da biblioteca com o simples acréscimo de uma query string no URL da página na qual pretendemos carregar a biblioteca. Suponha a página de um site, que usa a biblioteca jQuery versão 1.6.4, cujo URL é: http://site.com.br/exemplo.html.

O site em questão foi projetado há algum tempo, e, naquela ocasião a versão mais recente da biblioteca era a 1.6.4. Além disso o desenvolvedor usou o script de Dan para fazer a chamada da biblioteca jQuery em suas páginas.

Hoje (dia em que esta matéria foi escrita a versão da biblioteca é a 1.7.1 e já existe um versão beta, de testes, da 1.7.2 denominada 1.7.2b1. Pois bem! Quer testar o funcionamento do site com uso das versões 1.7.1 ou da 1.7.2b1? É muito provável que com a versão 1.7.1 tudo funcione normalmente, a menos que alguma funcionalidade prevista na versão 1.6.4 tenha sido tornado obsoleta e retirada da versão 1.7.1. Contudo se ao carregar a versão 1.7.2b1 algo sair errado é muito provável que você tenha encontrado um bug, e, mais, se o que saiu errado estiver certo quando for carregada a versão estável mais recente então: BINGO! você encontrou um bug e poderá contribuir com o time de desenvolvimento da jQuery reportando o bug encontrado preenchendo um formulário apropriado. E, o interessante disso é que não foi você quem desenvolveu o site e nem mesmo tem acesso FTP a ele. Você simplesmente abre a página do site no navegador, adiciona uma query string no URL e recerrega a página para chamar uma nova versão da biblioteca, como mostrado a seguir considerendo nossa página exemplo anterior:

http://site.com.br/exemplo.html?jqversion=1.7.2b1

O script de Dan

  (function(){
    // Verifica se existe uma query string jqversion no URL e armazena na variável verMatch.
    // Busca uma query string constituída somente de números, letras e ponto com a finalidade de impedir ataque XSS
    var verMatch = /jqversion=([\d\w\.]+)/.exec( location.search ),
        // versão encontrada, por exemplo: 1.6.4 or 1.7rc1
        version = verMatch && verMatch[1],
        src;
    if ( version ) {
      // A verificação da query string resultou em uma verão válida. Use o CDN da jQuery para lincar a versão (não comprimida, beta ou RC) encontrada
      src = 'code.jquery.com/jquery-' + version;
    } else {
      // A verificação da query string não resultou em uma versão válida. Use o CDN do Google (ou da jQuery ou da Microsoft) para lincar a versão comprimida
      src = 'ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min';
    }
    // cria uma tag script lincando para a versão
    document.write( '<script src="//' + src + '.js"><\/script>' );
  })();

  // Usa uma cópia local, como backup caso falhe o carregamento a partir do CDN. Nesse exemplo não usamos essa opção.
  if ( !window.jQuery ) {
    document.write( '<script src="/scripts/jquery-1.7.1.min.js"><\/script>' );
  }

O script foi comentado para facilitar seu entendimento, mas se você tem alguma dúvida, fique à vontade para perguntar na área de comentários.

Além disso você poderá comprovar o funcionamento do script na prática visitando essa página exemplo que desenvolvemos para essa finalidade específica.

Gostou? Use e o time da jQuery agradece

Que tal, a partir de agora, usar o script de Dan para “fazer a chamada” da biblioteca jQuery para as páginas que você desenvolver? O máximo que poderá acontecer é um site funcionando normalmente usando a versão da biblioteca que você escolheu. Contudo o máximo dos máximos é que você estará proporcionando aos desenvolvedores do mundo inteiro a oportunidade de caçar bugs nas versões de testes futuras usando seu site como suite de testes. E, é claro, o time de desenvolvimento da jQuery agradece.

Esta matéria foi transcrita do blog do Maujor, com prévia autorização.

31/01/2012

Sorteio do livro: jQuery Mobile

Capa do Livro jQuery Mobile do Maujor

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de DOIS sorteios do livro jQuery Mobile lançado nesta semana. Para quem não conhece, o livro foi escrito por Maurício Samy Silva, mais conhecido como Maujor.

Site oficial do livro: http://www.jqmovel.com.br/

Como participar no Twitter?

O participante deverá seguir o @jquerybr e dar um RT na mensagem abaixo:

Estou participando do sorteio do livro jQuery Mobile escrito pelo @maujor e organizado pelo @jquerybr e @novateceditora http://kingo.to/YKg

Os comentários só serão aceitos até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte! :)

Como participar no Facebook?

O participante deverá:

As participações só serão aceitas até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte! :)

Resultado

Promoção Twitter: @AlineFernandes1

Promoção Facebook: /flavioricardo91

Resenha do livro

jQuery Mobile é um framework para o desenvolvimento de aplicações web para dispositivos móveis. Adota um sistema unificado de interface de usuário, com base em HTML5 e CSS3 e, com uso de JavaScript de alto nível, gera um código compatível com uma ampla variedade de plataformas. Tem como base de construção as bibliotecas jQuery e jQuery UI, o que garante uma curva de aprendizado rápido, possibilitando desenvolver com facilidade interfaces de usuário de alta qualidade e com código extremamente otimizado para os principais navegadores desktop, smartphones e tablets, como iPad, iPhone, Android, Blackberry, Windows Phone e Nokia.

Utiliza um sistema de navegação entre as páginas da aplicação, baseado em AJAX, que proporciona o carregamento rápido das páginas, com economia de banda, além de oferecer várias opções de animação na transição entre páginas. Fornece widgets pré-configurados e estilizados, prontos para uso, que atendem à maioria das necessidades do layout de uma aplicação web, tais como barras de navegação, páginas, janelas modais, botões e listas, entre outros, todos criados por mecanismos internos do framework, a partir de marcação HTML5 simples. Além de disponibilizar uma folha de estilos CSS padrão, com cinco paletas de cores, também permite a criação de paletas personalizadas, a partir da folha de estilo padrão ou com o uso da ferramenta ThemeRoller.

Maujor, em mais um livro pioneiro em língua portuguesa, se propõe a difundir o uso desse fantástico framework, abordando as funcionalidades do jQuery Mobile de forma clara, em linguagem didática, com muitos exemplos práticos. No site do livro (http://jqmovel.com.br) você poderá ver esses exemplos em funcionamento.

O livro tem os seguintes objetivos:

  • Apresentar o framework jQuery Mobile relatando as motivações e o histórico de seu desenvolvimento.
  • Estudar a aplicação de barras de ferramentas e botões nativos do framework.
  • Explicar os fundamentos da navegação AJAX do framework.
  • Demonstrar os mecanismos para formatação de conteúdos a serem apresentados em dispositivos móveis.
  • Detalhar as técnicas de construção de listas ordenadas e não ordenadas, simples e aninhadas para apresentação de conteúdos.
  • Entender a criação de formulários com seus diferentes controles.
  • Aplicar temas e paletas, bem como criar paletas personalizadas com uso da ferramenta ThemeRoller.
  • Estudar as propriedades, os eventos e métodos da API da jQuery Mobile.
16/09/2011

Ajax não obstrutivo com preventDefault

Olá pessoal,

Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P

Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.

Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.

E como evitar esse tipo de coisa?

Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?

Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!

<form action="/users/" method="post" id="newUser">
	<input type="text" name="title" />
	<input type="submit" value="Enviar" />
</form>
$('form#newUser').submit(function(event){
	event.preventDefault(); //Este é o cara!
	var actionUrl = $(this).attr('action'),
		params = $(this).serializeArray();
	$.post(
		actionUrl, 
		params, 
		function(){
			alert('Formulário enviado com sucesso!');
		}
	);
 });
 

Algumas boas práticas podem ser vistas nesse código.

  • A url que é enviada via ajax é igual a do html;
  • Os parâmetros são carregados pelo serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;
  • Se o JavaScript estiver desabilitado, o envio será feito da mesma forma. O ideal é ter um tratamento no back-end para fazer retornos agradáveis ao usuário.

Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário. :)

preventDefault() vs return false

Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.

08/08/2011

ajaxSetup | Configuração padrão para Ajax

Após o nosso podcast sobre Ajax, surgiram algumas dúvidas de como fazer um arquivo de configuração para o Ajax.
Explico, não necessariamente seria um arquivo de configuração e sim códigos de configuração, os mesmos não precisariam estar em um arquivo separado, eu mesmo, quando utilizo, coloco no arquivo de jQuery (não sou de utilizar CDN, por mais que eu recomende o uso).

Configurações padrões para o Ajax

O jQuery nos provê de várias propriedades para configuração do Ajax, essas podem se repetir por várias requisições diferentes. Devido a essa repetição podemos utilizar a função jQuery.ajaxSetup() para que a mesma configuração seja usada por todas as requisições.

Então vamos criar uma configuração para que todas as requisições sejam para apenas uma url.

//pode ser $.ajaxSetup
jQuery.ajaxSetup({
  url: 'uma_url_qualquer.php'
});

Quando usarmos $.get(), $.post(), entre outros, não precisamos mais passar a URL pois já temos na nossa configuração. Usamos dessa forma então:

$.ajax({
  data: {'nome': 'Ruan'}
});
$.get({
  data: {'nome-do-meio': 'Carlos'}
});
$.post({
  data: {'sobrenome': 'Kovalczyk'}
});
//sei que Kovalczyk pode soar como um palavrão para muitos =)

Agora vamos setar configurações diferentes

jQuery.ajaxSetup({
   global: false,
   type: "POST",
   cache: false,
   //ate mesmo callbacks
   error: function(error) {
      alert(error);
   }
});

Te vejo na próxima

,
Página 1 de 212