Ruby on Rails: Implementando AutoFill com Jquery

Olá pessoal, hoje vou compartilhar um método que pode ser bobo para usuários avançados mais acho interessante por quase não existir material na internet.
Precisei desenvolver esse script para implementar uma função autofill em um sistema que desenvolvo para UENF (Universidade Estadual Norte Fluminense).

Todo mundo já usou sites com preenchimento automatico de campos.
Exemplo clássico deste recurso é quando se coloca o CEP em um formulário de endereço, e os campos contendo rua, bairro, cidade, são automaticamente preenchidos (AutoFill).

Neste exemplo uso a biblioteca JavaScript Jquery.

Vamos lá:

Criando uma aplicação teste em Ruby on Rails

Começamos criando uma aplicação "teste" para implementar o autofill.

$ rails autofill -d postgresql

* perceba que eu uso o postgresql como banco de dados, use o banco que esteja acostumado

Feito isso vamos geral um scaffold rapidamente.

$ cd autofill
$ script/generate scaffold Cadastro nome:string telefone:string email:string

Criar banco de dados e rodar a migração
Abra o arquivo config/database.yml e altere os dados de login do seu banco de dados.
Depois disso execute os comandos:

$ rake db:create
$ rake db:migrate

Com essa parte pronta podemos começar a implementar.

Abrindo a view new.html.erb (apps/views/cadastros/new.html.erb)
Insira o trecho abaixo antes da tag <% form_for(@cadastro) do |f| %>

Trecho:

<button id="autofill" name="autofill">Autofill?</button>
<div id="pegardados_autofill" style="display: none;">

<br>ID: <input id="id_autofill" name="id_autofill"> </input>
<button id="load_autofill" name="load_autofill">carregar</button>
</div>
<div id="msg_autofill" style="display: none;">
</div>

Screenshot:


Ajustando o controller (apps/controllers/cadastros_controller.rb)
Como este é apenas um exemplo e normalmente em exemplos temos que simular uma fonte de dados para fazer o autofill, vamos pegar dados do próprio cadastro, integrando com JSON.
Muito simples.

No controller ative o formato JSON no método show:

def show
@cadastro = Cadastro.find(params[:id])

respond_to do |format|
format.html # show.html.erb
format.xml { render :xml => @cadastro }
format.json { render :json => @cadastro } // ADICIONE ESTA LINHA
end
end

Baixando Jquery e criando o arquivo autofill.js

Se você não tem jquery em sua aplicação faça isto:
Baixe o arquivo jquery-1.3.2.js e coloque na pasta da sua aplicação rails

$ mv jquery-1.3.2.js /pathdasuaaplicação/public/javascripts/jquery-1.3.2.js

Crie dentro desta mesma pasta (../public/javascripts/) um arquivo com nome autofill.js e coloque o seguinte conteudo:

$(function(){ // FUNÇÃO PARA EXIBIR A DIV
$("#autofill")
.click(function(){
$("#pegardados_autofill").show(1300);

});
});

$(function(){
$("#load_autofill")
.click(function(){
var id = $('#id_autofill').val();
if(id == ""){
alert("Campo em branco, coloque o id.")
}
$.getJSON("http://localhost:3000/cadastros/" + id + ".json", function(data){ //pegando dados via JSON

$('#cadastro_nome').val(data.cadastro.nome);// completando os campos
$('#cadastro_telefone').val(data.cadastro.local);
$('#cadastro_email').val(data.cadastro.preco);

$("#msg_autofill").html("Dados carregados com sucesso..");

$("#msg_autofill").show(1100);
$("#msg_autofill").fadeOut(1800);

});
});
})

Finalizando
Seguindo todos esses passos, resta somente colocar a biblioteca no arquivo new.html.erb e o autofill.js

Abra new.html.erb e adicione antes da tag <h1>....</h1>

<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'autofill' %>

Salve e rode o servidor

$ script/server

Testando

Como não temos nenhum cadastro, consequentemente não temos da onde efetuar o autofill.
Efetue um cadastro então:

http://localhost:3000/cadastros/new

Não clique no botão AutoFill? por enquanto, apenas preencha os campos com nome telefone e email.
Com o cadastro efetuado já temos o primeiro ID para testar o auto fill.

Retorne ao endereço http://localhost:3000/cadastros/new e agora sim clique no botão Autofill?
Uma div com efeito deverá surgir e no campos ID: coloque o id 1 , clique em carregar e veja o resultado!



Com esse exemplo acho que da para adaptar em qualquer situação.
depois posto a função usando XML como padrão de dados.

Até!