Pulando campos (tabulando) ao pressionar Enter

Não sei quem foi o infeliz que teve a infeliz ideia de fazer isso desse jeito, mas por algum motivo infeliz, ainda tem gente que acha que, pressionando 'Enter', o cursor do infeliz deve pular para o próximo campo infeliz, ao invés de, alegremente, enviar o formulário atual.

Enfim.

 function navegarEnter(){  
   $(document).on('keypress', 'input,select,textarea', function(event){  
     if(event.keyCode === 13) {  
       $('input,select,textarea')[$('input,select,textarea').index(this)+1].focus();  
       event.preventDefault();  
     }  
   });  
 }  

Coloquei como função mesmo, porque deu preguiça de fazer um plugin.

Forçando o usuário a digitar em um campo com jQuery

É chato, mas às vezes é necessário.

 $('.campochato').on( "keydown contextmenu", function(event) {  
     switch(event.which){  
       case 3://botao direito  
       case 17://ctrl  
       case 86://ctrl+v  
         event.preventDefault();  
         break;  
     }  
   });  

O evento 'contextmenu' captura o clique no botão direito.

Time is Never on my side

Mais um problema com datas, dessa vez em javascript.

 var str = "05/04/2015 23:59";  
 var tmp = str.split(' ');  
 var data = tmp[0].split('/'); 
 
 var data_certa = new Date();  
 var data_errada = new Date();
  
 data[0] = parseInt(data[0]);  
 data[1] = parseInt(data[1]);  
 data[1] = data[1] -1;  
 data[2] = parseInt(data[2]);  

 data_certa.setFullYear(data[2]);  
 data_certa.setDate(data[0]);  
 data_certa.setMonth(data[1]);//setmonth deve vir depois de setdate  

 data_errada.setFullYear(data[2]);  
 data_errada.setMonth(data[1]);  
 data_errada.setDate(data[0]); 
 
 console.log(data_certa);  //Sun Apr 05 2015 12:33:04 GMT-0300 (BRT)
 console.warn(data_errada);  //Tue May 05 2015 12:33:04 GMT-0300 (BRT)

Por algum motivo, setMonth deve ser chamado depois de setDate, senão a data acaba indo parar no mês que vem.

Quem disse que a ordem dos fatores não altera o produto, não programava em javascript.

Jquery On

Assim:

 $('.qualquerItemPai').on("click", ".algumItemFilho", function(){  
      //algumacoisa  
 });  

Fonte: http://www.weblizards.com.br/pt/blog/jquery-metodo-on/

Funções de tempo com Javascript

 window.setTimeout('funcao()', intervalo_em_milisegundos);  //roda apenas uma vez
 window.setInterval('funcao()', intervalo_em_milisegundos);  //roda 1x a cada intervalo

Fonte: http://rogeriolino.wordpress.com/2006/12/19/javascript-settimeout-e-setinterval/

Verificando se a variável existe em javascript

Existem aproximadamente 362,57 jeitos diferentes de se verificar se uma variável em javascript existe ou não.
Esse é o que eu vou usar:

 if (typeof variavel!== "undefined")  

Pronto, agora não preciso mais pesquisar cada vez que precisar disso.

Avisar se o usuário esqueceu de gravar o formulário

Primeiro, criamos uma variável:

 var alguem_mexeu_no_meu_queijo = false;  

No evento change de qualquer elemento, alteramos essa variável, para sabermos que o usuário mexeu no formulário:

 $('select, input, textarea').change(function(){  
      alguem_mexeu_no_meu_queijo = true;  
 });  

Depois, no evento beforeunload da janela, precisamos ver se a variável foi alterada.
Se sim, damos o alerta, perguntando se ele quer mesmo sair.

 window.onbeforeunload = function(){  
      if(alguem_mexeu_no_meu_queijo==true)  
      {  
           return 'Alguém mexeu no meu queijo.';  
      }  
 }  

Ah, quando o usuário envia o formulário, precisamos setar a variável como true, para que não apareça o alerta.
Se tu tiver usando o jquery validation, fica assim:

 $('#form').validate({  
           , submitHandler: function(form) {  
                alguem_mexeu_no_meu_queijo = false;  
                form.submit();  
           }  
      });  

Relógio em javascript

Um pequeno relógio em javascript:

 <form name="crono" style="margin:0px;">  
      <input id="relogio" width="30" />  
      <script language="JavaScript">  
           var data = new Date();  
           function data_inicial(ano,mes,dia,hora,minuto,segundo){  
                data.setFullYear(ano)  
                data.setMonth(mes-1)  
                data.setDate(dia)  
                data.setHours(hora)  
                data.setMinutes(minuto)  
                data.setSeconds(segundo)  
           }  
           function zeros(number) {  
                if (number < 10) {   
                     number = ("0"+number);   
                }  
                return number;  
           }  
           function Relogio() {  
                var formato = zeros(data.getDate())+'/'+zeros(data.getMonth()+1)+'/'+zeros(data.getFullYear())+' '+zeros(data.getHours())+':'+zeros(data.getMinutes())+':'+zeros(data.getSeconds());  
                data.setSeconds(data.getSeconds()+1)  
                document.getElementById('relogio').value = formato;  
                setTimeout("Relogio()",1000);  
           }   
           data_inicial(2013, 09, 12, 15, 09, 05); //comente para começar com a data atual 
           Relogio();  
      </script>  
 </form>  

Utilizando jquery-ui tabs + jquery validation plugin

Quando o plugin encontra um elemento com erro, o elemento automaticamente ganha foco.
Mas quando o elemento está em uma aba que não está habilitada no momento, não acontece nada.

Pra que o elemento ganhe foco e a aba passe a ser a ativa, segue a função:

 $('#formulario').validate({  
           ignore: "",//para validar os elementos que estão nas abas desabilitadas  
           highlight: function(element, errorClass, validClass) {  
                var div = $(element).parents('.ui-tabs-panel').attr('id');//encontra a div em que está o elemento inválido  
                var index = $('#tabs ul li a').index($('a[href="#'+div+'"]')); //encontra o indice nos links  
                $("#tabs").tabs( "option", "active", index ); //seta a aba como ativa  
           }  
      });  

Validando datas em pt-br com jQuery Validate

assim:

 $.validator.addMethod(  
      "date",  
      function(value, element) {  
           var check = false;  
           var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;  
           if( re.test(value)){  
                var adata = value.split('/');  
                var gg = parseInt(adata[0],10);  
                var mm = parseInt(adata[1],10);  
                var aaaa = parseInt(adata[2],10);  
                var xdata = new Date(aaaa,mm-1,gg);  
                if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )  
                     check = true;  
                else  
                     check = false;  
           } else  
                check = false;  
           return this.optional(element) || check;  
      },  
      "Insira uma data válida"  
 );  

Dois jquery em um

Eu sempre esqueço como se utiliza a função append() do jQuery várias vezes seguidas, então lá vai:

 $('#senha')  
                .append(  
                     $('<li>').addClass('item')  
                     .append(  
                          $('<input>').attr({type:'password',name:'senha',id:'senha'})  
                     )  
                     .append(  
                          $('<label>').text('(preencha somente se quiser trocar)').addClass('obs')  
                     )  
                )  

Outra coisa,  é quando se cria um formulário de troca de senha.
Por padrão, o Chrome vai preencher o campo da senha automaticamente, mas nem sempre ele vai preencher o campo de repetir a senha.
Aí, pra não encher o saco do usuário, que teria que digitar a senha no campo de repetir-senha, a gente coloca um valor qualquer no campo de senha e no de repetir-senha:

 <input type="password" name="senha" id="senha" class="" value="$password" />  
 <input type="password" name="repetir_senha" id="repetir_senha" class="" value="$password" />  

Depois, com jQuery, a gente limpa o value desses campos. O detalhe é que não funciona se simplesmente fizer assim:

 $(document).ready(function(){  
      $('#senha,#repetir_senha').val('')  
 })  

Precisa dar um tempo após o evento ready, senão o Chrome vai perceber e o negócio não vai funcionar. Então, precisa usar o setTimeout, para dar um atraso na execução:

 $(document).ready(function(){  
      window.setTimeout("$('#senha,#repetir_senha').val('')",100);  
 })  

ParseInt no Firefox

Tive problemas com o comando parseInt no firefox.
Algumas vezes ele não retornava o valor certo, mas  sim retornava 0.
Executando isso no console do Firebug, retornou algo estranho:

 console.log(parseInt('01'));  
 console.log(parseInt('02'));  
 console.log(parseInt('03'));  
 console.log(parseInt('04'));  
 console.log(parseInt('05'));  
 console.log(parseInt('06'));  
 console.log(parseInt('07'));  
 console.log(parseInt('08'));  
 console.log(parseInt('09'));  
 console.log(parseInt('010'));  

Retornou isso:

 1  
 2  
 3  
 4  
 5  
 6  
 7  
 0 //não deveria ser 8, 9 e 10?
 0  
 8  

Segundo essse link, isso acontece porque o navegador está retornando esse valor em base 8, e não base 10.
Pra resolver isso, precisamos dizer a ele pra usar base 10:

 console.log(parseInt('01','10'));  
 console.log(parseInt('02','10'));  
 console.log(parseInt('03','10'));  
 console.log(parseInt('04','10'));  
 console.log(parseInt('05','10'));  
 console.log(parseInt('06','10'));  
 console.log(parseInt('07','10'));  
 console.log(parseInt('08','10'));  
 console.log(parseInt('09','10'));  
 console.log(parseInt('010','10'));  

Que no fim vai  retornar:

 1  
 2  
 3  
 4  
 5  
 6  
 7  
 8  
 9  
 10  

Leite em pó em javascript

a função isNaN se chama isNaN.

Calculando idade com Mysql e Javascript

Não com os dois ao mesmo tempo, obviamente.

Só pra lembrar: nunca defina o campo de data como DATETIME, a menos que tu precise contar quantos anos, dias, horas, minutos e segundos o vivente tem de existência. Se não for o caso, use apenas DATE.

 DATE_FORMAT(FROM_DAYS(TO_DAYS(CURDATE())-TO_DAYS(nascimento)), '%y') AS idade,  

Agora, com javascript:

 /*  
       * calcularIdade  
       * Calcula a idade baseada na data informada  
       * @param string string texto no formato d/m/Y  
       */  
      function calcularData(string){  
           var tmp = string.split('/');  
           var data = new Date(tmp[2], tmp[1], tmp[0]);  
           var hoje = new Date();  
           var idade = Math.floor((hoje-data) / (365.25 * 24 * 60 * 60 * 1000));  
           return idade;  
      }  

Fontes: ma.tt/2003/12/calculate-age-in-mysql/
http://stackoverflow.com/questions/5524743/jquery-age-calculation-on-date

Argumentos opcionais em Javascript

Ás vezes precisamos alterar uma função que já existe, adicionando mais parâmetros.
Pra não quebrar a compatibilidade com outras partes do sistema que estejam usando a função, e pra não precisar revisar tudo pra encontrar as chamadas à tal função,  o jeito é criar os novos parâmetros como opcionais.

 function war(enemy,reason) {  
      if(!enemy) { //The mandatory argument is not present - die with error(no pun intended)  
           alert("Please choose an enemy before starting a war");  
           return false;  
      }  
      if(!reason) { //If the optional argument is not there, create a new variable with that name.  
           var reason = "They have Nukes!";  
      }  
      /* ...Do what you want with the arguments... */  
 }  

Fonte: http://www.openjs.com/articles/optional_function_arguments.php

Colocando um elemento dentro de outro com Javascript

1:      $.each($('input.check_red'), function(index, elemento){  
2:        var id_rand = Math.floor((Math.random()*1000)+1);  
3:        var id_rand2 = Math.floor((Math.random()*1000)+1);  
4:        var id_span = "span_"+id_rand+'_'+id_rand2;  
5:        $(elemento).before('<span class="check_red" id="'+id_span+'" title="Espaço do Corretor"></span>');  
6:        $(elemento).prependTo($('#'+id_span));  
7:      })  

1: Seleciona os elementos que serão inseridos dentro do novo elemento criado
2: Gera um número aleatório para criar o ID do novo elemento
3: Gera outro número aleatório(porque, como é aleatório, pode acontecer de gerar duas vezes o mesmo número. Claro que é possível que os dois numeros aleatórios sejam iguais...
4: Concatena os dois números gerados para criar o id do elemento novo
5: Cria o novo elemento antes do elemento que será 'arrastado'
6: Arrasta o elemento para dentro do novo elemento

Acessando a página 'mãe' com javascript

Dentro da página que foi aberta (pop-up):

window.opener

Um exemplo, para 'atualizar' a página que chamou o pop-up:

window.opener.location = 'pagina_mae.html';

Outro exemplo, pra popular um campo na página mãe com o valor de um campo na página filha:

window.opener.document.getElementById('campo1').value = document.getElementById('campo1').value;

Função para limpar texto em javascript

Ontem, precisei de uma função em javascript pra tirar acentos e caracteres especiais de textos, tipo essa que o wordpress faz quando vamos criar um novo post.

O problema não era só trocar os caracteres especiais por traços, e sim trocar as letras acentuadas pelas respectivas sem acentos. Acabei achando  nesse blog o que eu precisava pra fazer essa parte.

O resto foi com expressões regulares.

A função ficou assim:

function limpar(texto)
{
 texto = texto.replace(/^\s+|\s+$/g, "");//tira espaços do inicio e do fim
 texto = texto.replace(/\s{2,}/g, " ");//tira espaços duplicados
 
 replacements = {
  "[áãàäâª]": "a",
  "[éèëê]": "e",
  "[íìï]": "i",
  "[óòôõö]": "o",
  "[ùúûü]": "u",
  "[ç]": "c"
 };
 regex = {};
 for (key in replacements) {
   regex[key] = new RegExp(key, 'g');
 }

 for(key in replacements){
   texto = texto.replace(regex[key], replacements[key]);//tira caracteres acentuados
 }
 texto = texto.replace(/[^A-Za-z0-9]/g, "-");//tira caracteres especiais
 texto = texto.toLowerCase();//coloca em minusculo
 return texto;
}

Rolando um iframe automaticamente

Quando, por motivos pré-históricos, for necessário trabalhar com iframes ou frames, acontece um problema se o link onde o (pobre) usuário clicar estiver muito pra baixo, na tela.

O problema é que a página carrega no iframe/frame, mas a tela continua lá embaixo. Então o usuário tem que rolar a página pra cima, pra ver o inicio do frame (a menos que o programador tenha pensado nisso e colocado os controles na parte de baixo do frame, o que eu duvido muito que alguém faça, mas vai saber).

Pra fazer com que o frame role automaticamente pra cima, quando abrir, é só colocar esse código em algum lugar na página:

<script>
 parent.scrollTo(0, 0);
</script>