Otimização seletor jQuery

Achei interessante essa otimização:

Em vez de utilizar o seletor $('#foo a'); use $('#foo').find('a');.

Imagine que você está querendo encontrar cada aluno em um colégio, então quer encontrar os alunos dentro da sala de aula #123.
Não se sente eficiente, não é?

Imagine agora que você está querendo a encontrar a sala nº 123, em seguida, quer encontrar todos os estudantes.

A seleção por ID é super rápida, e se você usar um ID para encontrar um elemento em primeiro lugar, em seguida, a próxima parte da pesquisa só tem que acontecer em suas filhas, em vez de toda a página!

Fonte

Adicionando Validação em HTML dinâmico

Bem, como sofri bastante para achar a solução para isto, resolvi compartilhar com os visitantes do meu blog, se houver algum rsrsrs.

O script deste post serve para adicionar validação em objetos incluídos depois da página já ter sido carregada, desde que a mesma tenha sido feita em MVC 3 do ASP.NET utilizando o jQuery Validator.

Como funciona:
O MVC 3 cria os elementos HTML parecidos com este:

  1. <input type="text" value=""  name="Nome.Do.Meu.Campo" id="Nome_Do_Meu_Campo" data-val-required="O campo precisa ser preenchido" data-val-range-min="10" data-val-range-max="20" data-val-range="O valor do campo deve ser entre 10 e 20" data-val-number="O campo deve ser um número" data-val="true">

Sendo assim o .NET executa o jQuery Validator no form, que interpreta esses atributos no elemento HTML e cria as regras de validação no lado do cliente.

Porém, se você simplesmente adicionar um novo elemento na página (com os atributos de validação) depois de carregada, ele simplesmente não será validado, para isto você deverá executar o script abaixo após incluir o elemento na tela, assim o validador da página será reescrito e passará a validar os novos campos também.

Ex:

  1. // Adiciona o campo na tela
  2. $(‘<input type="text" value=""  name="Nome.Do.Meu.Campo" id="Nome_Do_Meu_Campo" data-val-required="O campo precisa ser preenchido" data-val-range-min="10" data-val-range-max="20" data-val-range="O valor do campo deve ser entre 10 e 20" data-val-number="O campo deve ser um número" data-val="true">’).appendTo("form");
  3.  
  4. // Formulário
  5. var $form = $("form");
  6.  
  7. // Tira o bind do validador atualmente existente.
  8. $form.unbind();
  9. $form.data("validator", null);
  10.  
  11. // Verifica mudanças no documento
  12. $.validator.unobtrusive.parse(document);
  13.  
  14. // Aplica a validação no form novamente
  15. $form.validate($form.data("unobtrusiveValidation").options);
  16.  

Pronto, seus novos campos serão validados.

OBS: Lembro que devem ser adicionados os script js do jQuery, jQuery Validator e jQuery Validator Unobtrusive.

Globalizando o “loading” do jQuery/Ajax

Segue abaixo uma maneira de globalizar o loading do ajax nos sites, bem simples e fácil de fazer:

  1. $(document).ready(function(){
  2.     $(document).ajaxStart(function() {
  3.         // Aqui deve-se chamar a função que mostra o <em>loading</em> na tela.
  4.     }).ajaxComplete(function() {
  5.         // Aqui deve-se chamar a função que remove o <em>loading</em> da tela.
  6.     });
  7. });

Muito simples de utilizar não? Isso ajuda a não ter que fazer o tratamento em cada chamada Ajax.