jQuery UI Autocomplete com ColdFusion e Ajax

On 9 de outubro de 2014, in CFML, JavaScript, jQuery, by andersonstraube

Neste post veremos como utilizar o Autocomplete do jQuery UI com um componente ColdFusion utilizando ajax.

A ideia principal é buscar uma pessoa pelo termo informado no campo, com o retorno do ajax podemos popular o campo e exibir abaixo o ID e o nome da pessoa. Utilizaremos o JSON como formato dos dados.

Continue reading »

Tagged with:  

jQuery.each()

On 9 de outubro de 2014, in JavaScript, jQuery, by andersonstraube

Neste post pretendo explicar um pouco da utilização da função each() presente no jQuery. Esta é sem dúvida uma das funções mais utilizadas e mais úteis do jQuery.

Basicamente, a função each() é usada para manipulação de elementos DOM, loop de array’s, propriedades de objetos, entre outros…

Veremos alguns exemplos práticos onde a utilização dela é útil.

Continue reading »

Tagged with:  

Exibir loading nas requisições ajax

On 4 de abril de 2012, in jQuery, by andersonstraube

Neste post vou explicar como exibir a mensagem de “carregando” nas requisições ajax:

Podemos fazer de 2 formas:
1 – Antes da requisição nós exibimos o “loading” e depois da conclusão nós ocultamos;
2 – Fazer isso de maneira automática (é o que vamos ver neste post).

Vamos criar nossa div que será o loading:


<div class="carregando">
  <strong>CARREGANDO</strong>
</div>

Continue reading »

Tagged with:  

jQuery: evitar cache em chamadas ajax

On 3 de abril de 2012, in jQuery, by andersonstraube

O cache em requisições ajax é um problema comum entre os desenvolvedores iniciantes e principalmente com o Internet Explorer. Para resolver esses problemas vou dar 2 dicas que o jQuery utiliza:

1 – Setar o cache na própria requisição ajax:


$('#formCadastro').submit(function(e) {
    e.preventDefault();	
    $.ajax( {
        url: "arquivo.cfm",
        type: 'POST',
        cache: false, // aqui definimos o cache como false
        data: $(this).serialize(),
        success: function(dados) {
                console.log(dados);
        }
    });
});

2 – Setar o cache como false para todas as requisições ajax:


$.ajaxSetup({ cache: false });

O ajaxSetup é uma configuração global da sua aplicação, com ela não precisamos ficar definindo as configurações em cada requisição. Veja mais em http://api.jquery.com/jQuery.ajaxSetup/

Tagged with:  

Monitorar alterações no código html

On 22 de março de 2012, in jQuery, by andersonstraube

Precisei fazer um monitoramento em um determinado código html, ou seja, se o conteúdo de uma div foi alterada por exemplo eu gostaria de receber uma notificação e/ou executar uma rotina quando isso acontecer. Foi então que lembrei do Pattern Observer, porém havia uma particularidade no meu código onde eu não poderia alterar o elemento “Subject” para notificar nos demais objetos que estavam observando, porém a idéia e/ou lógica era mais ou menos por aí.

Encontrei um plugin jQuery bem interessante onde ele fica monitorando o elemento informado e tem um callback quando ocorrer uma alteração no seu conteúdo: monitor (jQuery plugin).

Para utilizá-lo basta informar qual é o elemento e a propriedade que deseja monitorar, no exemplo abaixo ele vai imprimir no console quando houver uma alteração no valor do campo “#nome”.


$.monitor('add', function(){ return $("#nome").val() }, function(){
    console.log('Nome alterado');
});

#FicaDica

Tagged with:  

jQuery – Métodos .parent(), .parents() e .closest()

On 15 de março de 2012, in jQuery, by andersonstraube

O jQuery apresenta várias formas de navegação pelo DOM, neste post pretendo explicar sobre a navegação nos elementos ascendentes tendo como foco os três importantes métodos do jQuery: .parent(), .parents() e .closest().

Observe o seguinte código html:

Continue reading »

Tagged with:  

CFML e Ajax com JSON (troca de selects)

On 23 de fevereiro de 2012, in CFML, jQuery, by andersonstraube

Para este post utilizarei a clássica troca de “estado e cidade” para exemplificar o uso do jQuery para requisições ajax com CFML retornando os dados em JSON.

Segue o código html simples:

Continue reading »

Tagged with: