Vraptor + Jquery + Autocomplete

9 de maio de 2012 14 respostas

fabioebner 9 de maio de 2012

Amigos, estou querendo fazer um autocomplete do jquery com o vraptor, mas ainda nao entendi como trabalhar com a parte de JSON, alguem tem um exemplo para eu dar uma olhada???

obrigado

14 Respostas

david.cs20 9 de mai. de 2012

Existe um exemplo na apostila da caelum sobre o vraptor !
Bem pratico e fácil !

fabioebner 9 de mai. de 2012

vou dar uma olhada no site… valeu

fabioebner 9 de mai. de 2012

Mlkao, me desculpe mas esta complicado, primeiro estou tentando recuperar um retorno como json… mas em todos os exemplos que eu pego eu vejo a seguinte linha

result.use(json()).from(user).include("contato").serialize();

coloco igual no meu projeto… ele fala que nao encontra o json(), e uma classe que eu preciso criar? preciso importar?? ele nao pede nada…

fabioebner 9 de mai. de 2012

Opa… consegui, nao estava importando import static br.com.caelum.vraptor.view.Results.*;

se liga… tentei fazer isso aqui para testar mas nao consegui o autocomplete

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-1.7.2.js"></script>
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.position.js"></script>
	<script src="js/jquery.ui.autocomplete.js"></script>
<script>
	$(function() {
		
		$( "#tags" ).autocomplete('city/getCity',
				{
					dataType: "json", 
					parse: function(){ 
						alert("teste");
						}
				}
		);
	});
	</script>
</head>
<body>
<input id="tags">
</body>
</html>

e o back

@Get
	@Path("/city/getCity")
	public void getCityList(String nmCity) throws Exception{
		ds = ConexaoDao.getInstance().getDatastore();	
		List<City> cityList = ds.find(City.class).field("nmCity").containsIgnoreCase(nmCity).asList();
		 result.use(json()).from(cityList).serialize(); 
		//return  cityList;			
	}

ja tentei mudar no autocomplete para city/getCity?nmCity=san, somente para testar, quero fazer aparecer o alert primeiro, para depois tratar o retorno…

Lucas_Cavalcanti 9 de mai. de 2012

o autocomplete mais novo mudou a api…

dá uma olhada nesse exemplo da documentação, é o que vc precisa:

http://jqueryui.com/demos/autocomplete/#remote-jsonp

(vai no view source)

fabioebner 10 de mai. de 2012

Mlkao, tu pode me dar um help?? consegui fazer chamar o meu metodo, porem estou com problema na hora do retorno, nao estou conseguindo recuperar, fiz o seguinte:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-1.7.2.js"></script>
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.position.js"></script>
	<script src="js/jquery.ui.autocomplete.js"></script>
<script>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).scrollTop( 0 );
	}

	$( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "http://localhost:8080/noname/city/getCity",
				dataType: "jsonp",
				data: {
					featureClass: "P",
					style: "full",
					maxRows: 12,
					name_startsWith: request.term,
					nmCity: request.term
				},
				success: function( data ) { //pelo que eu entedi aqui e aonde eu recupero o que eu retornei, porem ja tentei de tudo aqui e nada, ja ate tirei tudo e coloquei um simples alert('a') mas nada.
					response( $.map( data.geonames, function( item ) {
						return {
							label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
							value: item.name
						}
 					}));
				}
			});
		},
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.label :
				"Nothing selected, input was " + this.value);
		},
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
});
	</script>
</head>
<body>
<div class="demo">

<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city" />
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div>
</body>
</html>

assim esta o meu metodo

@Get
	@Path("/city/getCity")
	public void getCityList(String nmCity) throws Exception{
		ds = ConexaoDao.getInstance().getDatastore();	
		List<City> cityList = ds.find(City.class).field("nmCity").containsIgnoreCase(nmCity).asList();
		 result.use(json()).from(cityList.get(0)).serialize(); 
		//return  cityList;			
	}

e a minha city e

@Entity("city")
public class City {

	@Id
	private ObjectId cdCity;
	@Indexed(value = IndexDirection.ASC, name="nmCityIndex")
	private String nmCity;

	//geters e setters

mandei debugar, e no metodo, ele para, ele retornar 1 item corretamente, mas nao chega no JS, ja tentei debugar no chrome, mas tbm nao da erro nem nada…

valeu

fabioebner 10 de mai. de 2012

fiz as seguintes alteracoes e nada

List<City> cityList = ds.find(City.class).field("nmCity").containsIgnoreCase(nmCity).asList();
		 result.use(json()).from(cityList, "cityList").serialize();

no js

success: function( data ) {
					response( $.map( data.cityList, function( item ) {
						return {
							label: item.nmCity,//name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
							value: item.nmCity
						};
 					}));

e tambem ele nao para na porcaria do success

Lucas_Cavalcanti 10 de mai. de 2012

no data do ajax vc precisa passar os parâmetros do controller:

data: {nmCity: <<nome da cidade aqui>>}

muda tb o dataType pra json, ao invés de jsonp (esse segundo é só pra qdo é cross domain)

de resto creio que vai pelo menos entrar no success…

fabioebner 12 de mai. de 2012

ficou show mlkao… agora so tira uma duvida minha, tu sabe se e possivel transformar esse objeto json e um objeto tipo o java para ficar mais facil de trabalhar com ele??

valeu

Lucas_Cavalcanti 13 de mai. de 2012

só seguir a mesma regra dos nomes dos inputs:

data: {
  "endereco.cidade": "Sao Paulo",
  "endereco.estado": "SP",
  "endereco.rua": "R. dos patos uivantes"
}

e receber um Endereco endereco no controller, com os getters/setters respectivos.

fabioebner 13 de mai. de 2012

Entao mas no javascript eu consigo criar um objeto?? tipo algo

var city:String;
var state:String

e no meu retorno colocar

var objeto = retornoDoJava

e em outra funcao do javascript utilizar esse objeto para enviar novamente para o meu java??

Lucas_Cavalcanti 13 de mai. de 2012

vc consegue retornar um json no controller:

result.use(Results.json()).withoutRoot().from(endereco).serialize();

e no javascript:

$.getJSON("/url/pro/controller", {estado: "SP"}, function(endereco) {
    var cidade = endereco.cidade;
    ....
});

fabioebner 14 de mai. de 2012

Cara eu tentei fazer o seguinte:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-1.7.2.js"></script>
	<script src="js/jquery.ui.core.js"></script>
	<script src="js/jquery.ui.widget.js"></script>
	<script src="js/jquery.ui.position.js"></script>
	<script src="js/jquery.ui.autocomplete.js"></script>
<script>

  var cidadeSelecionada = null;
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).scrollTop( 0 );
	}

	$( "#city" ).autocomplete({
		source: function( request, response ) {
			$.ajax({
				url: "http://localhost:8080/noname/city/getCity",
				dataType: "json",
				data: {
					nmCity: request.term
				},
				success:
					function( data ) {
					response( $.map( data.cityList, function( item ) {
						return {
							label: item.cdCity._time,//name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
							value: item
						};
 					}));
				}
			});
		},
		minLength: 2,
		select: function( event, ui ) {
//ATE AQUI ESTA TD CERTO, EU DEBUGO E ELE JOGA CORRETO
			this.cidadeSelecionada = ui.item.value;
			
			log( ui.item ?
				"Selected: " + ui.item.label :
				"Nothing selected, input was " + this.value);
		},
		error: function(){
			alert('ddd');
		},
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
});
function alertar(){
//POREM AQUI ELE DA ERRO, FALA QUE this.cidadeSelecionada e NULL, 
	alert(this.cidadeSelecionada);
}
	</script>
</head>
<body>
<div class="demo">

<div class="ui-widget">
	<label for="city">Your city: </label>
	<input id="city" />
	Powered by <a href="http://geonames.org">geonames.org</a>
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
	Result:
	<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<button onclick="alertar()"> </button>
</div>
</body>
</html>

sabe o que eu posso estar fazendo errado??

obrigado

Lucas_Cavalcanti 15 de mai. de 2012

o this dentro do alertar não vai se comportar do jeito que vc está esperando: http://blog.caelum.com.br/as-multiplas-personalidades-do-this-em-javascript/

só tirar o this. que deve funcionar.

Criado 9 de maio de 2012

Ultima resposta 15 de mai. de 2012

Respostas 14

Participantes 3

14 Respostas

Topicos relacionados