Ajuda para corrigir rotina Ajax com Json

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

Topicos relacionados