VRaptor 3.4 + JQuery + AutoComplete [RESOLVIDO]

28 respostas
M

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

L
tire o System.out.println(

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

.from(cliDao.buscarClientes(q))

.exclude(id, nascimento)

);

e rode de novo

M

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(); }

L

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

M

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!!

L

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

tá caindo dentro da função parse?

M

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?

M

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>
L

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"/>’,

M

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

Obrigado Lucas !!

M

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

L

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

M

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 + ")"; } });

M

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");
L

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

M

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

L

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?

M

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

L

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

M

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
[]

L

a resposta está vazia :wink:

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

M

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]"
L

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

tá passando pela função parse?

M

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

L

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.

M

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

M

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"); });

L

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

M

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