1

Estoy trabajando con 2 select, el segundo depende del dato que se seleccione en el primero. No he logrado que me funcione, hasta el momento lo único que hace es cargar los datos correspondiente a cada select pero por separado.

**//Carga los datos de los departamentos en el Select//**
<div>
  <select class="form-control" id="idDep" name="idDep" required>
    <option value="">-- Escoja una opción --</option>
      <?php foreach (departamentoData::getAll() as $departamento):?>
      <option value="<?php echo $departamento->idDep; ?>"><?php echo $departamento->nombre; ?></option>
      <?php endforeach; ?>
  </select>
</div>

**//Carga los datos de los municipios en el Select//**
<div>
  <select class="form-control" id="idMun" name="idMun" required>
    <option value="">-- Escoja una opción --</option>
      <?php foreach (municipioData::getAll() as $municipio):?>
      <option value="<?php echo $municipio->idMun; ?>"><?php echo $municipio->nombre; ?></option>
      <?php endforeach; ?>
  </select>
</div>

//====================================================//

//Esta función es la que me permite cargar los departamentos
<?php
class departamentoData {
	
	public static $tablename = "departamento";

	public function departamentoData(){
	}

	public static function getAll(){
		$sql = "select * from ".self::$tablename;
		$query = Executor::doit($sql);
		return Model::many($query[0],new departamentoData());
	}
}
?>

//====================================================//

//Esta función es la que me permite cargar los municipios
<?php
class municipioData {
	
	public static $tablename = "municipio";

	public function municipioData(){
	}

	public static function getAll(){
		$sql = "select * from ".self::$tablename;
		$query = Executor::doit($sql);
		return Model::many($query[0],new municipioData());
	}
}
?>

//====================================================//

//Scrip para cargar los datos del select municipios

<script language="javascript">
$(document).ready(function(){
   $("#idDep").change(function () {
           $("#idDep option:selected").each(function () {
            idDep = $(this).val();
            $.post("municipioData.php", { idDep: idDep }, function(data){
                $("#idMun").html(data);
            });            
        });
   })
});
</script>

El problema es que me carga todos los municipios así seleccione un departamento, no se que parte esta mal, o si en el código para cargar los municipios es correcto.

Alguien me puede dar una ayudita?

En el archivo municipioData.php esta esto.

<?php
class municipioData {
	
	public static $tablename = "municipio";

	public function municipioData(){
	}

	public static function getAll(){
		$sql = "select * from ".self::$tablename;
		$query = Executor::doit($sql);
		return Model::many($query[0],new municipioData());
	}
}
?>

La siguiente imagen es como tengo la estructura del proyecto.

introducir la descripción de la imagen aquí

Actualización de la pregunta

Creo que el problema esta en el archivo buscar.php pues no se como se ejecuta o como hace la petición a la base de datos, debería include o require algo? para que pueda hacer conexión a la base de datos y pueda sí buscar el municipio del departamento seleccionado?

Código archivo buscar.php

<?php
if (isset($_POST["idDep"])){
    /*Aquí si hace falta habrá que incluir la clase municipios con include*/
    $intId=$_POST["idDep"];

    /*Usamos un nuevo método que habremos creado en la clase municipio: getByDepartamento*/
    $json=json_encode(municipioData::getByDepartamento($intId));        
}else{
    $json=json_encode(array('error'=>'No se recibió un valor de id departamento para filtar'));     
}
    print_r($json);
    ?>

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Jorgesys
    Commented el 10 ene. 2018 a las 0:31

1 respuesta 1

3

Dado que por los comentarios se observa que desconoces el funcionamiento Ajax, he escrito esta respuesta algo detallada. De entrada diré que no es fácil responder a tu problema, entre otras cosas porque pides los datos a un modelo y no se sabe cómo el modelo devuelve esos datos. Por lo tanto no se puede saber cómo tratar esos datos al recibirlos. Lo normal es usar el formato JSON, por eso he escrito el código asumiendo que tu modelo devuelve un array de datos que son convertidos a JSON para la respuesta.

Trataré de explicar parte por parte.

1. Archivo donde estarán los select dependientes

1.1 Código PHP/HTML

Los departamentos se cargarán por defecto, como lo tienes ahora:

/*Carga los datos de los departamentos en el Select*/
<div>
  <select class="form-control" id="idDep" name="idDep" required>
    <option value="">-- Escoja una opción --</option>
      <?php foreach (departamentoData::getAll() as $departamento):?>
      <option value="<?php echo $departamento->idDep; ?>"><?php echo $departamento->nombre; ?></option>
      <?php endforeach; ?>
  </select>
</div>

Luego, habrá otro select donde se mostrarán los municipios, dependiendo del departamento que se haya seleccionado.

MUY IMPORTANTE: Ese select no llevará datos por defecto, se llenará en base al departamento, buscando los datos en el servidor vía Ajax.

/*CargaRÁ los datos de los municipios en el Select*/
<div>
  <select class="form-control" id="idMun" name="idMun" required>
    <option value="">-- Escoja una opción --</option>
  </select>
</div>

1.2. Código Javascript/jQuery

Este código escuchará los cambios del select de departamentos y enviará una petición Ajax para buscar los municipios de ese departamento.

MUY IMPORTANTE: En el ejemplo, la petición Ajax se enviará a un archivo que yo he llamado buscar.php. Se trata de un archivo auxiliar que será el encargado de crear una instancia de tu clase Municipios si fuere necesario, de invocar el método que trae los municipios filtrados por departamentos.

$(function() {

    $( "#idDep" ).on( "change", function() {
        var intId=$(this).val();
        var datos = { idDep: intId };
        var url='buscar.php';

        var request = $.ajax
        ({
            url: url,
            method: 'POST',
            data: datos,
            dataType: 'json'
        });

        /*
            *Esta es una parte muy importante, aquí se  tratan los datos de la respuesta
            *se asume que se recibe un JSON correcto con dos claves: una llamada id_municipio
            *y la otra llamada municipio, las cuales se presentarán como value y datos de cada option 
            *de tu select PARA QUE ESTO FUNCIONE TU MODELO DEBE SER CAPAZ DE DEVOLVER UN JSON VÁLIDO
            *dado que no tengo control de lo que ocurre en tu modelo 
            *ni sé que tipo de dato devuelve ni como lo devuelve, no puedo hacer más que advertirlo aquí
        */
        request.done(function( respuesta ) 
        {
            if(!respuesta.hasOwnProperty('error')){
                $.each(respuesta, function(k, v) {
                    $('#idMun').append('<option value="' + v.id_municipio + '">' + v.municipio + '</option>');
                    });
            }else{

                //Puedes mostrar un mensaje de error en algún div del DOM
            }
        });

        request.fail(function( jqXHR, textStatus ) 
        {
            alert( "Hubo un error: " + textStatus );
        });

    });

});

3. Código del archivo buscar.php

Es el archivo que servirá de auxiliar para la petición Ajax.

if (isset($_POST["idDep"])){
    /*Aquí si hace falta habrá que incluir la clase municipios con include*/
    $intId=$_POST["idDep"];

    /*Usamos un nuevo método que habremos creado en la clase municipio: getByDepartamento*/
    $json=json_encode(municipioData::getByDepartamento($intId));        
}else{
    $json=json_encode(array('error'=>'No se recibió un valor de id departamento para filtar'));     
}
    print_r($json);

4.Código de la clase municipioData modificada

La clase municipio con un método que busque aplicando un filtro

<?php
class municipioData {

    public static $tablename = "municipio";

    public function municipioData(){
    }

    public static function getAll(){
        $sql = "select * from ".self::$tablename;
        $query = Executor::doit($sql);
        return Model::many($query[0],new municipioData());
    }


    public static function getByDepartamento($intId){
        /*
            *OJO: Aquí asumo que en la tabla municipio hay un campo llamado id_departamento
            *que sirve para identificar a que departamento pertenece el municipio
            *si no se llama así debes cambiarlo por como se llame
            *Asumo también que hay un campo llamado id_municipio y otro llamado municipio
        */
        $sql = "select id_municipio, municipio from ".self::$tablename. " where id_departamento=."$intId;
        $query = Executor::doit($sql);

        /*
            *OJO: No sé lo que retorna esta llamada, 
            *es importante saberlo para tratar los datos en la respuesta
            *asumiré que el modelo devuelve un array con los datos
        */
        return Model::many($query[0],new municipioData());
    }




}
?>  

NOTA: Esta consulta: $sql = "select id_municipio, municipio from ".self::$tablename. " where id_departamento=."$intId; es vulnerable a la Inyección SQL. Una vez el código funcione, deberás hacer uso de consultas preparadas para evitar esa vulnerabilidad. Lo he escrito así por motivos de brevedad y porque la respuesta intenta explicar los otros aspectos ya señalados más arriba. Si entramos en el campo de las consultas preparadas ahora sería hacerte más lío.

11
  • @Zeus el archivo buscar.php lo puedes poner en cualquier carpeta. Eso depende de cada programador. Podría ser una carpeta auxiliar, como por ejemplo action. En cuanto a invocarlo, eso dependerá de la ubicación del archivo desde donde se invoque. Si están ambos en la misma carpeta, pones solamente el nombre del archivo. Por el momento, para fines de prueba, mejor ponlo en la misma carpeta del archivo que lo invoca. Lo digo para que no te hagas más lios, lo principal ahora es que el código funcione.
    – A. Cedano
    Commented el 10 ene. 2018 a las 15:38
  • Es posible que hayas escrito mal la url del archivo buscar.php. Ponlo en la misma carpeta del otro archivo y dejas la variable url tal y como está aquí: var url='buscar.php'; Luego que funcione verificas una mejor carpeta para organizar los archivos y aprendes lo de las rutas.
    – A. Cedano
    Commented el 10 ene. 2018 a las 16:30
  • @Zeus el error 404 ocurre cuando el archivo no existe, o sea, cuando no se encuentra en la ruta indicada. Si te está saliendo un error 404 es porque la dirección del archivo no es la correcta. Prueba a poner la ruta completa donde se encuentra el archivo, algo como http://localhost/escuela/buscar.php o parecido, no podría decirte con exactitud porque nunca uso PHP en localhost, sino en un dominio.
    – A. Cedano
    Commented el 11 ene. 2018 a las 14:45
  • parseError lo está dando posiblemente por lo que comentaba en la respuesta, porque posiblemente tu modelo no está enviando un array que se pueda convertir en un JSON válido. Para depurar lo que se está obteniendo pon un cosole.log aquí: request.done(function( respuesta ) { console.log(respuesta); //... resto del código tienes que mirar la salida por consola en el inspector de Javascript y comentar lo que aparece.
    – A. Cedano
    Commented el 11 ene. 2018 a las 14:57
  • dice que respuesta no esta definido. console.log(respuesta); Uncaught ReferenceError: respuesta is not defined at <anonymous>:1:13
    – Horus
    Commented el 11 ene. 2018 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.