Ajuda para corrigir rotina Ajax no VRaptor

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

});

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

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.