VRaptor 3.4 + JQuery + AutoComplete [RESOLVIDO]

28 respostas
Mickdark

Olá pessoal!

Sou novo em java no geral, estou começando a estudar a apostila FJ-28, e quando chegou no autocomplete utilizando JQuery, ele não funciona, os outros plugins do JQuery funcionam normalmente!! Nos testes que eu fiz, eu sei que ele gera o JSon corretamente, mas não passa pelo controller e no FireBug ele não apresenta nenhum erro. Abaixo segue os códigos!!

Controller
@Path("/clientes/busca.json")
	@Get
	public void buscaJson(String q) {
		System.out.println(
				result.use(json()).withoutRoot()
				.from(cliDao.buscarClientes(q))
				.exclude("id", "nascimento")
				);
		result.use(json()).withoutRoot()
		.from(cliDao.buscarClientes(q))
		.exclude("id", "nascimento")
		.serialize();
	}
JQuery
$(document).ready(function(){

	$("#procura").autocomplete('<c:url value="/Web/clientes/busca.json"></c:url>', {
		dataType : "json",
		parse: function(clientes){
			return $.map(clientes, function(cliente){
				return {
					data : cliente,
					value : cliente.nome,
					result : cliente.nome
				};
			});
		},
		formatItem : function(cliente) {
			return cliente.nome + " (" + cliente.cpf + ")";
		}
	});
	$("#procura").puts("Busca pelo nome");
});
Formulario (Para Pesquisa)
<form action="<c:url value='/cliente/busca'></c:url>" target="conteudo">
	<input id="procura" name="nome" >
</form><br>

Edit**

Esqueci de colocar o valor de resposta do Json e a classe Cliente!!!

JSon Criado
[{"nome": "testeUm","cpf": "[telefone removido]"},{"nome": "testeDois","cpf": "[telefone removido]"}]
Classe Entity Cliente @Entity
public class Cliente {
	@Id
	@GeneratedValue
	private Long id;
	
	@Column(name="Nome", nullable=false, length=60)
	private String nome;
	
	@Column(nullable=false, length=11)
	private String cpf;
	
	@Column(nullable=false)
	private Calendar nascimento;
Getters e Setters...

28 Respostas

Lucas_Cavalcanti
tire o System.out.println(

result.use(json()).withoutRoot()

.from(cliDao.buscarClientes(q))

.exclude(id, nascimento)

);

e rode de novo

Mickdark

Ok, comentei, mas ainda não está funcionando!!

@Path("/clientes/busca.json") @Get public void buscaJson(String q) { /// System.out.println("Passou pelo controller do Json"); result.use(json()).withoutRoot() .from(cliDao.buscarClientes(q)) .exclude("id", "nascimento") .serialize(); }

Lucas_Cavalcanti

acesse diretamente no browser a url desse método e veja qual é o json gerado, e poste aqui

Mickdark

Bom, vou colocar os testes pra ver se ajuda!!

Isso Funciona
$("#procura").autocomplete({source: ["teste1", "teste2", "teste3", "testando"]});
Quando eu faço um formulario enviar a requisição diretamente, também funciona
<form action="clientes/busca.json" method="get" target="conteudo">
	<input name="q">
</form>
Dai ele retorna o esse Json serializado pelo VRaptor
[{"nome": "testeUm","cpf": "[telefone removido]"},{"nome": "testeDois","cpf": "[telefone removido]"}]

Eu acho que tem algum problema na URL, ou com o envio da requisição, eu só não sei como testar!!

Lucas_Cavalcanti

então, o json está correto, mas não está no formato que o autocomplete espera.

tá caindo dentro da função parse?

Mickdark

Pois é! então, eu acho que ele nem chega a entrar na função, pq o sysout que eu fiz era pra mostrar quando ele faz a requisição e ele só mostra quando eu submito o formulario direto na página, quando eu submito ele mostrava lá que tava passando pelo controller, a não ser que ele não mostre, se for assim como eu faço para saber se ele tá entrando na função parse do autocomplete?

Mickdark

há eu acho melhor te mostrar os plugis do Jquery que eu to usando!!

Os imports!!

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css">

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/puts.js"></script>
Lucas_Cavalcanti

tem que ver na documentação do jquery ui se a função se chama parse mesmo…

a versão que tá na apostila é um pouco mais antiga…

coloca um alert dentro da função parse… e mude:

‘<c:url value="/Web/clientes/busca.json"></c:url>’,

pra ‘<c:url value="/Web/clientes/busca.json"/>’,

Mickdark

Entendi, vou dar uma olhada na documentação e qualquer coisa eu posto aqui!

Obrigado Lucas !!

Mickdark

Consegui fazer ele passar pelo controller, agora ó falta o parser XD!! até agora o código ficou assim!!

$("#procura").autocomplete({ source: '<c:url value="clientes/busca.json" />', minLength: 1, });

E a mensagem no console!!

Passou pelo controller do Json Hibernate: select this_.id as id0_0_, this_.cpf as cpf0_0_, this_.nascimento as nascimento0_0_, this_.Nome as Nome0_0_ from Cliente this_ where lower(this_.Nome) like ? order by this_.id asc

Lucas_Cavalcanti

coloca a função parse e coloque um alert pra ver se tá passando por lá

Mickdark

Então eu coloquei, ele passa pelo controler mas ainda n~[ao passa pela função Parse!!

$("#procura").autocomplete({ source: '<c:url value="clientes/busca.json" />', minLength: 1, parse: function(clientes){ alert("entrou no Parse"); return $.map(clientes, function(cliente){ return { data : cliente, value : cliente.nome, result : cliente.nome }; }); }, formatItem : function(cliente) { return cliente.nome + " (" + cliente.cpf + ")"; } });

Mickdark

Eu fiz um teste que deu certo usando o parse, na documentação explica que no momento que ele apresenta um erro ele automaticamente faz a função parseJSON, só que ele espera uma string!! do jeito que eu fiz abaixo ele funcionou, só que se eu faço um objeto do tipo array, ele simplesmente não faz nada!!

var json = '[{"nome": "testeUm","cpf": "[telefone removido]"},{"nome": "testeDois","cpf": "[telefone removido]"}]';
	
	var tt = $.parseJSON(json);
	alert("Passou pelo parse");
	
	$("#teste").text(tt[1].nome);
	alert("Colocou o valor na Div");
Lucas_Cavalcanti

ele dá algum erro no console (firebug ou devkit do chrome)?

Mickdark

Ele dá esse erro, mas é com o CSS!

Edi**!!

Desculpe, depois de algum tempo ele tambem apresentou esses erros!!

uncaught exception: Error: Permissão negada a <http://ads.lomadee.com> para ler a propriedade Proxy.InstallTrigger uncaught exception: Error: Permissão negada a <http://ads.lomadee.com> para ler a propriedade Proxy.InstallTrigger uncaught exception: Error: Permissão negada a <http://ads.lomadee.com> para ler a propriedade Proxy.InstallTrigger uncaught exception: Error: Permissão negada a <http://ads.lomadee.com> para ler a propriedade Proxy.InstallTrigger uncaught exception: Error: Permissão negada a <http://imagebr8.lomadee.com> para ler a propriedade Proxy.InstallTrigger

Lucas_Cavalcanti

não sei se isso tem a ver com o auto complete… não deveria pelo menos

no firebug ele tá pelo menos fazendo a requisição pro servidor?

o retorno está aparecendo como json?

Mickdark

Bom, eu acho que a requisição ele faz, pq mostra no console do eclipse a query e a chamada ao sysout que eu fiz, só que colocando o alert dentro do parse ele não chama!! o Json precisa ficar assim né?

Chamada no console!!

Passou pelo controller do Json Hibernate: select this_.id as id0_0_, this_.cpf as cpf0_0_, this_.nascimento as nascimento0_0_, this_.Nome as Nome0_0_ from Cliente this_ where lower(this_.Nome) like ? order by this_.id asc

Lucas_Cavalcanti

tudo bem, mas o que acontece no console do firebug/devkit?

Mickdark

Eita Lucas, apareceu uns erros diferentes agora,


GET http://localhost:8080/Web/clientes/busca.json?term=teste

200 OK
42ms
Parametros
term teste

Cabeçalhos de Resposta
Server Apache-Coyote/1.1
Content-Type application/json;charset=ISO-8859-1
Transfer-Encoding chunked
Date Tue, 06 Dec 2011 17:11:59 GMT
Cabeçalhos de Solicitação
Host localhost:8080
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0
Accept application/json, text/javascript, /; q=0.01
Accept-Language pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding gzip, deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://localhost:8080/Web/
Cookie JSESSIONID=98B3299FA974F9AB0486D707292D5C60; oracle.uix=0^^GMT-3:00^p

Resposta
[]

Lucas_Cavalcanti

a resposta está vazia :wink:

não é nenhum erro… como está a assinatura do método do controller? o parâmetro se chama term?

Mickdark

Aeww Lucas, não sei pq, mas a variavel que ele passa é diferente da que fala na apostila, a variavel padrão é "term" e na apostila ta a variavel "q", eu mudei dai os dados aparecem, acho que agora realmente só falta o parse !!!

Resposta

[{"nome": "testeUm","cpf": "[telefone removido]"},{"nome": "testeDois","cpf": "[telefone removido]"}]

JSon
0
	Object { nome="testeUm", cpf="[telefone removido]"}
	
nome
	"testeUm"
	
cpf
	"[telefone removido]"
	
1
	Object { nome="testeDois", cpf="[telefone removido]"}
	
nome
	"testeDois"
	
cpf
	"[telefone removido]"
Lucas_Cavalcanti

sim, a versão antiga usava q como nome padrão… dá pra trocar, de qqer forma.

tá passando pela função parse?

Mickdark

Não, ainda não, acabei de fazer o teste!!! será que ele usa outro método pra fazer o parse?

Lucas_Cavalcanti

melhor jeito de ver isso é a doc :wink:

http://jqueryui.com/demos/autocomplete/

mais específicamente esse exemplo:
http://jqueryui.com/demos/autocomplete/#remote-jsonp

ele mostra como usar um source no formato diferente.

Mickdark

O, brigadão Lucas, vou dar uma olhada na documentação e o que eu conseguir eu posto aqui ^^ !

Mickdark

Aeww consegui aki, mas ele usa requisição ajax, não tem como fazer usando só JQuery?

$(document).ready(function(){ $("#procura").autocomplete({ source: function( request, response ) { $.ajax({ url: '<c:url value="clientes/busca.json" />', data: { term: request.term }, success: function( data ) { response( $.map( data, function( item ) { return { label: item.nome + " (" + item.cpf +")", value: item.nome }; })); } }); }, minLength: 1, }); $("#procura").puts("Busca por nome"); });

Lucas_Cavalcanti

vai ter que ser ajax de qqer jeito :wink: e o $.ajax é do jQuery.

Mickdark

Ta certo, bom de qualquer jeito Obrigado pelo help XD, agora vou terminar a apostila!!

Bom Dia Lucas!!

Criado 1 de dezembro de 2011
Ultima resposta 7 de dez. de 2011
Respostas 28
Participantes 2