I am trying to do two selects
nested, in which when the value of the first one is changed, some values collected from the Database will be loaded in the next one. For this I am trying to do it using php and ajax .
The selects code is as follows:
<div class="row">
<div class="span3">
<p class="letraAzulOsucroN"><?php echo $gen_campus; ?>:</p>
</div>
<div class="span9">
<select id="campus" name="campus" onchange="cargarEdificios(this);" >
<option value="-1"><?php echo $pccrear_elegir_campus; ?></option>
<?php
foreach ($campus as $camp){
?>
<option value="<?php echo $camp->id; ?>">
<?php echo $camp->nombre; ?></option>
<?php
}
?>
</select>
</div>
</div><br />
<div class="row">
<div class="span3">
<p class="letraAzulOsucroN"><?php echo $gen_edificio; ?>:</p>
</div>
<div class="span9">
<select id="edificios" name="edificios" >
<option value="-1"><?php echo $pccrear_elegir_edificio; ?></option>
</select>
</div>
</div><br />
and the ajax request is as follows:
<script type="text/javascript">
function cargarEdificios (obj){
var campus = obj.options[obj.selectedIndex].value;
var idioma = $('#selLang').val();
var parametros = {"idCampus": campus, "idioma" : idioma};
<?php
$rutaObtencion = DIRECTORY_SEPARATOR ."UVControlAulasPC" . DIRECTORY_SEPARATOR ."controlAulas". DIRECTORY_SEPARATOR ."Utiles". DIRECTORY_SEPARATOR ."obtenerEdificios.php";
?>
$.ajax ({
data: parametros,
url: "<?php echo $rutaObtencion; ?>",
type: 'post',
beforeSend: function (){
// Lanzar el div de cargando...
},
success: function (response){
$("#edificios").html(response);
}
});
}
</script>
When I'm trying it, I get the following error from the Chrome browser console:
where you can see that the file can not be found because the address that I send to the ajax disappears the bars.
Could someone tell me what this is due to? How could I solve it?