I'm trying to fill in 2 combobox (State), (City) with the database return, the first one of states got, the states are shown and then I get their UF to do the municipalities query, but my ajax does not seem to call the php file.
HTML
<div class="input-field col s4 m3">
<select name="estado" id="id_estados" class="browser-default" >
<option value=" " selected="selected">Escolha o estado:</option>
<?php include_once("/Chamadas/listarEstados.php"); ?>
</select>
</div>
<div class="input-field col s8 m5">
<select name="municipios" id="id_municipios" class="browser-default" >
<option value="" disabled selected>Cidade</option>
<script>
$("#id_estados").on("change", function()
{
var idEstado = $("#id_estados").val();
var url = '/Chamadas/listarMunicipios.php';
alert(idEstado);
$.ajax({
url:url,
type: 'POST',
data: {ufEstado : idEstado},
beforeSend: function(){
$("#id_municipios").html("Carregando..");
},
success: function(data)
{
$("#id_municipios").html(data);
},
error: function(data)
{
$("#id_municipios").html("Houve um erro ao carregar !");
}
});
});
</script>
</select>
</div>
PHP
<?php
include_once("DAO/dalLocalizacao.php");
$dalLocalizacao = new dalLocalizacao();
$municipios = $dalLocalizacao->listarMunicipio($_POST['ufEstado']);
foreach ($municipios as $municipio)
{
$municiopUTF = utf8_encode($municipio['Nome']);
echo '<option>'.$municiopUTF.'</option>';# code...
}
?>
PHP2
public function listarMunicipio($uf)
{
$query = "SELECT * FROM Municipio WHERE Uf='".$uf."'";
$municipios = $this->conexao->query($query) or die(mysql_error());
return $municipios;
}
Folder structure