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 RailsComeç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çãoAbra 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.jsSe 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);
});
});
})
FinalizandoSeguindo todos esses passos, resta somente colocar a biblioteca no arquivo
new.html.erb e o
autofill.jsAbra 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
TestandoComo 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é!
Leia Mais!
