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