Ajuda para corrigir rotina Ajax no VRaptor

Assuntos Gerais
#1

Olá pessoal, estou precisando realizar uma rotina de carregamento de combo de cidades dependente do combo de estado selecionado, utilizando
uma rotina ajax para renderização do combo de cidades.
Montei a seguinte estrutura porém o método não está sendo invocado na Controller, tentei colocar um breakpoint no método e nunca é alcançado.
Tanto o VRaptor quanto o servidor de aplicação não estão apresentando nenhum erro indicando onde corrigir.
Tentei ativar os debugadores de dois browsers, Chrome e IE 11 mas ainda não consegui identificar o erro.

Qualquer ajuda será bem vinda.

Controller


import static br.com.caelum.vraptor.view.Results.json;

@Resource 
public class ClienteController implements ControllerIF<Cliente> {

	@SuppressWarnings("unused")
	private static final Logger LOG = Logger.getLogger(ClienteController.class);

	private final Result result;
	private final Validator validator;
	private final ClienteService clienteService;
	private final EstadoService estadoService;
	private final CidadeService cidadeService;
	private static ResourceBundle bundle;
	private List<Estado> estados = null;
	private List<Cidade> cidades = null;

	public ClienteController(ClienteService clienteService, EstadoService estadoService, CidadeService cidadeService, Result result, Validator validator) {
		this.result = result;
		this.validator = validator;
		this.clienteService = clienteService;
		this.estadoService = estadoService;
		this.cidadeService = cidadeService;
		bundle = ResourceBundle.getBundle(ConstantesUtil.MESSAGES_RESOURCE);
	}

	@Get
	@Publico
	@Path("/cliente/loadCidadesPorEstado/{estado.idEstado}")
	public void loadCidadesPorEstado(Estado estado) {
		//Carregar cidades de acordo com o estado informado
		if(estado != null && estado.getIdEstado() != null){
			this.cidades = cidadeService.loadCidadesPorEstado(estado);
			result.use(json()).from(cidades).serialize();
		}
		
		result.include("cidades", cidades);
	}

Formulário


<div class="controls">
	<c:if test="${not empty estados}">
		<label class="ls-label"><fmt:message key="cliente.estado" /></label>
		<select id="clienteEstado" name="cliente.cidade.idEstado" style="background-color:#FF9; color:#000;">
		  <option selected value="#">Selecione um item</option>
		  <c:forEach var="estado" items="${estados}">
			<option value="${estado.idEstado}">${estado.descricao}</option>
		  </c:forEach>
		</select>
	</c:if>

	<c:if test="${not empty cidades}">
		<label class="ls-label" style="margin-left: 52px;"><fmt:message key="cliente.cidade" /></label>
		<select id="clienteCidade" name="cliente.cidade.idCidade" style="background-color:#FF9; color:#000;" disabled>
		  <option selected value="#">Selecione um item</option>
		</select>
	</c:if>
</div>

Chamada Ajax


$("#clienteEstado").change(function(){

	$.get({
		url: '<c:url value="/cliente/loadCidadesPorEstado/"/>'+$("#clienteEstado").val(),
		dataType: 'json',
		data: '{cidade.idEstado}',
						
		success: function(data) {
			alert("Funcionou o AJAX: "+data.cidade.descricao);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert("Deu erro: "+textStatus);
		},				    
	});

});
#2

o código javascript que vc postou está dentro de um jsp?

#3

Olá Lucas,

Pesquisei em alguns sites e grupo do vraptor no google groups e acabei encontrando a solução corrigindo erros nas configurações do ajax da seguinte forma

Primeiro foi preciso adicionar o alias Cidades para poder fazer a referência na estrutura ajax da página pois segundo pesquisei por default o result retorna um json.list e com isso eu teria que fazer a referencia pela palavra reservada “list” caso não usasse o alias, não cheguei a testar desta forma porém com o alias fica mais elegante.

@Get
@Publico
@Path("/cliente/loadCidadesPorEstado/{estado.idEstado}")
public void loadCidadesPorEstado(Estado estado) {
	//Carregar cidades de acordo com o estado informado
	if(estado != null && estado.getIdEstado() != null){
		this.cidades = cidadeService.loadCidadesPorEstado(estado);
		result.use(json()).from(cidades,"Cidades").serialize();
	}
	
}

Depois fiz a alteração das referências pegando a posição do array e as propriedades.

$.ajax({
	url: '<c:url value="/cliente/loadCidadesPorEstado/"/>'+$("#clienteEstado").val(),
	type: "GET",
	
	success: function(json) {
		alert("Funcionou o AJAX JSON: "+ json.Cidades[0].idCidade +" - "+ json.Cidades[0].descricao);
		alert("Funcionou o AJAX JSON: "+ json.Cidades[1].idCidade +" - "+ json.Cidades[1].descricao);
		alert("Funcionou o AJAX JSON: "+ json.Cidades[2].idCidade +" - "+ json.Cidades[2].descricao);
	},
	error: function(XMLHttpRequest, textStatus, errorThrown) {
		alert("Houve algum erro: "+textStatus);
	},				    
});

De qualquer forma está aí a solução que pode ajudar outras pessoas.
Obrigado pela atenção.

#4