Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Llenar un select mediante ajax con PHP y jQuery usando JSON
Actualizado el 21 Enero, 2016 y leído 36,825 veces
Calificación: 9.55 / 10

Llenar un select mediante ajax con PHP y jQuery usando JSON

Anexsoft

Señores, seguimos con los tutoriales y ahora vamos a ver como poblar un SELECT vecino usando jQuery.

La lógica es bien simple, tenemos nuestro SELECT de alumnos y lo que queremos hacer que al seleccionar una opción de este nos liste en el SELECT de al lado los cursos que tiene asignado dicho alumno.

Para esto hemos usado PDO para hacer la consulta a la base de datos y tenemos 3 tablas, las cuales son:

  • alumnos: contiene a todos nuestros alumnos

  • alumno_curso: contiene la relación entre alumnos y cursos, de esta manera sabemos que cursos tiene asignado un alumno.

  • cursos: contiene todo los cursos

 

Hemos usado la arquitectura del ejemplo Crud avanzando con MVC para PHP, por lo tanto tenemos nuestro controlador alumno que contiene una acción llamada  CursosPorAlumno, la cual retorna dicha relación entre alumno y curso convirtiendolo en JSON.

Image title

Como pueden ver, este esta llamado a una variable llamada curso_model, la cual invoca al método ListarCursosDeAlumno, y recibe un parámetro el cual es el id del alumno. Este retorna un ARRAY con la información de la base de datos, y luego le hacemos un json_encode que se encarga de convertirlo a formato json.

No se asusten, al final del ejemplo pueden descargar el material para que lo estudien y entiendan más de donde proviene este y el otro.

 

Ahora nos vamos a nuestro modelo Curso, el cual contiene la consulta a la base de datos

Image title

Quiero aclarar ciertas cosas:

  • Si trabajamos con PDO, usemos la opción PDO::FETCH_ASSOC de esta manera retornamos un array y nuestro json_encode lo podrá interpretar sin problema

  • Cuidado con las TILDES y Ñ, nuestro json_encode no lo acepta. Podemos dar solución esto, dando un utf8_encode a los campos que contenga dichos caracteres.

 

Ahora nos vamos a nuestra vista, la cual en nuestro Controlador AlumnoController, la acción INDEX se encarga de cargar esta vista, aparte le estamos enviando todos los alumnos ya que nuestro SELECT de alumnos es cargado por defecto.

Image title

Nuestro archivo view/alumno/index.php

<div class="page-header">
    <h1>Alumnos</h1>
</div>

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <label>Alumnos</label>
            <select id="slt-alumnos" class="form-control">
                <option value="" selected>Seleccione un alumno</option>
                <?php foreach($alumnos as $a): ?>
                    <option value="<?php echo $a->id; ?>"><?php echo $a->Nombre; ?></option>
                <?php endforeach; ?>
            </select>
        </div>        
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label>Cursos asignados</label>
            <select id="slt-cursos" class="form-control"></select>
        </div>        
    </div>
</div>
  • Como pueden notar tenemos 2 SELECT en HTML, y le hemos asignado un id a cada uno.

  • En el select de alumnos estamos haciendo un foreach para pintar la data de todos los alumnos

 

Ahora nuestro código jquery se resumen a lo siguiente:

$(document).ready(function(){
    // Bloqueamos el SELECT de los cursos
    $("#slt-cursos").prop('disabled', true);

    // Hacemos la lógica que cuando nuestro SELECT cambia de valor haga algo
    $("#slt-alumnos").change(function(){
        // Guardamos el select de cursos
        var cursos = $("#slt-cursos");

        // Guardamos el select de alumnos
        var alumnos = $(this);

        if($(this).val() != '')
        {
            $.ajax({
                data: { id : alumnos.val() },
                url:   '?c=Alumno&a=CursosPorAlumno',
                type:  'POST',
                dataType: 'json',
                beforeSend: function () 
                {
                    alumnos.prop('disabled', true);
                },
                success:  function (r) 
                {
                    alumnos.prop('disabled', false);

                    // Limpiamos el select
                    cursos.find('option').remove();

                    $(r).each(function(i, v){ // indice, valor
                        cursos.append('<option value="' + v.id + '">' + v.Nombre + '</option>');
                    })

                    cursos.prop('disabled', false);
                },
                error: function()
                {
                    alert('Ocurrio un error en el servidor ..');
                    alumnos.prop('disabled', false);
                }
            });
        }
        else
        {
            cursos.find('option').remove();
            cursos.prop('disabled', true);
        }
    })
})
  • Usamos $.ajax para el manejo de ajax, ya lo he configurado como se debe usar.

  • Siempre recuerden bloquear el select, la pantalla lo que sea mientras la ejecución ajax esta en curso. De esta manera evitamos que se ejecuten miles de acciones y aparte el usuario entendera que debe esperar. El bloqueo lo hacemos en el beforeSend de nuestro $.ajax.

  • Hacemos una pequeña validación, por defecto nuestro SELECT de alumnos tiene una opción que dice "Seleccione un alumno", si esta ha sido seleccionada no hace nada y pasa al ELSE.

  • Nuestro succes del $.ajax, entra acción al finalizar la consulta y no ha ocurrido ningun error. Ahí lo que hacemos es recorrer el json usando $.each

De esta manera poblamos el SELECT vecino de cursos, pueden descargar el material adjunto en la parte inferior. Si hubieran dudas, puedes dejar un comentario.

¡Adquiera ya!

  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.