Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery

Ventana Modal Bootstrap

Ventana Modal Bootstrap

En  esta ocasión quiero compartir unos scripts php  que nos servirán como guía a la hora que necesitemos enviar datos cargados dinámicamente  a una ventana modal Bootstrap; para este ejemplo haremos un CRUD, pero prestaremos atención especial a como enviar los datos dinámicos a la ventana modal.

Antes de empezar a echaremos un vistazo a la estructura de carpetas y archivos.

modal_dinamico

Cabe mencionar que para hacer este tutorial me he basado en el siguiente post:

Paginación con PHP, MySQL, jQuery, Ajax y Bootstrap

En donde se recupera un listado de registros de una base de datos MySQL y se pagina usando jQuery Ajax, siempre utilizando bootstrap para el diseño.

Bien ahora procedamos con la explicación código de cada uno de los archivos mostrados en la imagen anterior.

countries.sql

Este archivo contiene las instrucciones sql para la creación de una tabla llamada countries. Para poder visualizar correctamente los datos que son mostrados en este tutorial , es necesario crear una base de datos , luego importar el archivo countries.sql a  nuestra base de datos que hemos creado.

index.php

Este archivo contiene la estructura html para gestionar nuestro proyecto

modal_agregar.php

Archivo contiene el formulario html del modal para agregar registros a la base de datos

modal_modificar.php

Este archivo contiene el formulario html que permite cargar la información de  forma dinámica dentro de la ventana modal Bootstrap.

modal_eliminar.php

Contiene el formulario que se muestra al usuario a manera de confirmación al querer eliminar un registro de la base de datos.

js/ app.js

Este archivo se encarga de gestionar todas nuestras peticiones  mediante jQuery.

En el archivo anterior se encuentra un fragmento de código que desencadena un evento al pulsar sobre el modal; y mediante los atributos de datos se encarga de enviar los datos correspondientes a la ventana modal.  Dicha función fue realizada tomando como guía la documentación de bootstrap

paises_ajax.php

Este archivo se encarga de realizar una consulta a la base de datos MySQL, el cual  es llamado vía AJAX desde el  index.php mediante   la función load() , la cual vimos anteriormente. Es en este archivo donde se envían los datos cargados dinámicamente al modal de boostrap haciendo de los atributos de datos.

pagination.php

Contiene un función para paginar los resultados de búsqueda. Este archivo es llamado desde  el archivo paises_ajax.php

agregar.php

Este archivo de encarga de agregar un registro a la base de datos el cual recibe los datos mediante AJAX desde la ventana modal.

modificar.php

Este archivo de encarga de modificar los datos, el cual recibe los datos mediante AJAX desde una ventana modal.

eliminar.php

Este archivo contiene las instruciones necesarias para borrar un registro de nuestra base de datos

Sistema de control de inventario

Bien esto sería todo lo que respecta a el envío de datos dinámicamente a una ventana modal con bootstrap, PHP, MySQL y jQuery. Puedes echar un vistazo a la demostración de este tutorial o si deseas descargar los archivos utilizados para este tutorial y hacer las pruebas tu mismo sigue los enlaces siguientes:

Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales: 

  • Nelson Silva

    Excelente amigo Obed.
    Muchas gracias.
    Tu colaboración ha sido de gran ayuda.
    Recomiendo en un 100% tu trabajo y profesionalismo.
    Saludos.

  • Bladimir

    Esta muy bueno el Scripts, funciona perfecto en localhost, excepto al momento de subirlo al hosting, no me funcionaba la recarga de la tabla, al ingresar, modificar o eliminar un registro, después de revisar el código y darle muchas vueltas encontré la solución, hay que agregar a app.js a la ‘function load’ la siguiente linea.

    type: “POST”, //Agregar Esta Linea.

    Adjunto imagen.

    A mas de alguien le servirá.

    • Obed

      Gracias tu comentario Bladimir, estoy seguro que sera de ayuda!

  • http://oncebuilder.com OnceBuilder CMS

    I like it… very similar to my CRUD

    • Obed

      Very similar but not the same!

  • Alexander Villamizar Jaimes

    ola me llamo alexander estoy haciendo un aplicativo y me sirvio un ejemplo suyo pero no me conectar a la base de datos el ejemplo se llama Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery y la conexion a la base de datos tengo una duda es ese codigo

  • Alexander Villamizar Jaimes

    ola me llamo alexander estoy haciendo un aplicativo y me sirvio un ejemplo suyo pero no me conectar a la base de datos el ejemplo se llama Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery y la conexion a la base de datos tengo una duda es ese codigo

    $con=@mysqli_connect(‘localhost’, ‘root’, ”, ‘test_modal’);

    pero no se porque test-modal porque la base datos se llama countries

  • Alexander Villamizar Jaimes

    ola me llamo alexander estoy haciendo un aplicativo y me sirvio un ejemplo suyo pero no me conectar a la base de datos el ejemplo se llama Cargar información dinámica en ventana modal Bootstrap con PHP, MySQL y jQuery y la conexion a la base de datos tengo una duda es ese codigo

    • Obed

      Para que el codigo te funcione debes crear primero una base de datos, luego si tienes el phpadmin debes hacer la importacion de los datos del archivo countries.sql. Adjunto capturas

  • Alexander Villamizar Jaimes

    la importancion ya la hice error es la conexion de php como debo hacer .. error para test-modal que coloco aqui……….

    • Obed

      Allí le debes colocar el nombre que le diste a tu base de datos. Reemplaza el texto “test_modal”, por el nombre de tu base de datos.

  • Alexander Villamizar Jaimes

    no me muestra nada de la base de datos que sera

    • Obed

      También recuerda que si tienes contraseña en tu servidor local debes colocarla. Te muestro un ejemplo de la conexión:
      $con=@mysqli_connect(‘localhost’, ‘usuario’, ‘contaseña’, ‘base_datos’);

  • Alexander Villamizar Jaimes

    y hice la conexion asi no se que qqquedo mal $con=@mysqli_connect(‘localhost’, ‘root’, ‘root’, ‘countries’);

    • Obed

      countries se llama tu base de datos?

  • Alexander Villamizar Jaimes

    $con=@mysqli_connect(‘localhost’, ‘root’, ‘root’, ‘test’); y no porque no funcionar

  • Alexander Villamizar Jaimes

    $con=@mysqli_connect(‘localhost’, ‘root’, ‘root’, ‘test’); y nose porque no funcionar

    • Obed

      Podrías adjuntar una captura de pantalla de tu phpadmin?

  • Alexander Villamizar Jaimes

    aqui le adjunto la phpadmin?

    • Obed

      Si, claro aqui!

  • Alexander Villamizar Jaimes

    que sera me puede ayuda

    • Obed

      Me imagino que es un problema con la conexión a la base de datos. Si la aplicación lanza algún error adjunta captura para poder ayudarte

  • Alexander Villamizar Jaimes

    la verdad no me arroja ningun error me muestra eso

  • Alexander Villamizar Jaimes

    me puede enviar el proyecto de la base de datos

  • Alexander Villamizar Jaimes

    y el proyecto completo de agradezco a mi correo alexander.vj@hotmail.com

  • Alexander Villamizar Jaimes

    usted codigo para reportes en php y boostap en mysql necesito para un proyecto..

  • Alexander Villamizar Jaimes

    le agradezco si me lo regalar……………

  • Alexander Villamizar Jaimes

    usted tiene un ejemplo de reportes con filtro de fecha… lo necesito urgente…

    • Obed

      Estimado Alexander, el reporte que mencionas es parte de un sistema web de cotizaciones ( versión de pago), por lo tanto no puedo enviar el código gratuitamente
      http://obedalvarado.pw/cotizador-web/

  • Alexander Villamizar Jaimes

    cuanto vale solamente el codigo de reportes yo pago…..

  • Alexander Villamizar Jaimes

    como algo si hay varios modales para un proyecto………….

  • Alexander Villamizar Jaimes

    Quiero porque me sale. Error id vacio??

    • Obed

      El comentario de Bladimir que aparece como: comentario destacado en esta sección podría ayudarte a solucionar el problema.

  • Alexander Villamizar Jaimes

    no se que es me puede revisar mi codigo este es

    ×

    Error!

    ×

    ¡Bien hecho!

  • Alexander Villamizar Jaimes

    a modificar no me muestra nada de la tabla me puede ayudar

    • Obed

      Asegurarte de enviar los valores correctos a la ventana modal. Para mas información sobre como trabajar con ventanas modales bootstrap puedes echar un vistazo a la documentación oficial. http://getbootstrap.com/javascript/#modals

  • Alexander Villamizar Jaimes

    me muestra eso que sera

  • Alexander Villamizar Jaimes

    if (empty($_POST[‘IdInmueble’])) {

    $errors[] = “ID vacío”; esa variable pero estar declarada en modal_modificar y no se que sera..

  • Alexander Villamizar Jaimes

    sera que usted me puede revisar mi codigo le agradezco que me ayude….

  • Eduardo Aguilar Vazquez

    Hola que tal
    oye, me podrías decir como usar este proyecto en el de cotizaciones?

    • Obed

      Hola Eduardo claro. dime como te puedo ayudar?

      • Eduardo Aguilar Vazquez

        Como puedo implementar el proyecto de cotizaciones en linea con este proyecto, ya que quisiera insertar productos y que se guarden en la base de datos del proyecto de cotizaciones

        • Obed

          Descarga los archivos de este ejemplo y los de el ejemplo del cotizador: http://obedalvarado.pw/blog/cotizador-de-productos-con-php-5-6-mysql-y-bootstrap-3/

          Luego mi consejo es que a los archivos de este ejemplo realices la implementacion usando la misma estructura de este proyecto: por ejemplo para los productos podrias usar un archivo llamado productos.php y siguiendo la estructura de este script podria crear los demás módulos….

  • luis

    hola que tal!!
    como puedo meter un campo con autocomplete en ventana modal como seria la manera mas practica y que dichos campos con autocomplete se guarden o que temas puedo buscar para resolver mi duda gracias!

  • José Carhuapoma Huaman

    hola maestro Obed, tengo un problema que al momento de guardar los registros, se guardan dos registros al mismo, como puedo solucionar este problema que tengo… !SALUDOS

  • José Carhuapoma Huaman

    Hola maestro Obed, tengo un problemas que al presionar el boton guardar se insertan dos registros al mismo tiempo a las BD, como solucionar ese problema… !!GRACIAS https://uploads.disquscdn.com/images/fc84a0f7ed9c8e31eded45771a7cde7076ac8a73f357a2040180421eb725f941.png

  • Oscar Martinez

    Sin dudas excelente, veré si aprendo un poco de estos códigos

    • Obed

      Gracias por leerme 😀

  • Javier Pumaccajia

    Hola quetal.. consulta.. como puedo utilizar este codigo con los input type=”radio” ?

  • Lorenzo Rojo

    Muy Buena Informacion, me sirvio de mucha ayuda. Gracias

  • Arelano Gómez

    Excelente práctica, muchas gracias por el aporte. Disculpa una duda, cuando en la form-modal de agregar se da click en guardar, pero no arroja ningún mensaje de que se guardo, ni almacena en la tabla, y en la url aparecen como parametros lo que se ingreso, ¿Que podría estar pasando?.
    Solo cambie datos de tabla e inputs del formulario,, para otro ejemplo..
    Saludos

  • Arelano Gómez

    esto, envia

  • Arelano Gómez

    en el js de funciones solo cambie ruta, en el formulario, puse algunos select que tienen de options valores de otra tabla, y en el archivo php que procesa, agregar variables y datos de consulta.
    Muchas Gracias por el aporte, Saludos

  • Arelano Gómez

    Excelente práctica, muchas gracias por compartir, disculpa una pregunta, traté de implementar ventanas modales con otras tablas y datos, pero al almacenar datos, el programa entra en javascript, en el metódo before-send “mensaje enviando”, y no pasa de ahi, ¿Que podría estar pasando, no veo cuál pueda ser el error, ?

  • Arelano Gómez

    Muy buen contenido, gracias por compartir la información.
    Disculpa una pregunta, ¿porque será? que al implementar el formulario modal de update, al consultar el registro y cargar en la ventana modal con los datos de la tabla, aparecen todos los campos excepto 3
    Lo intente implementar con un ejemplo diferente, Tengo los mismos nombres de id y name de inputs, y los mismos en el js, como en el ejemplo que tienes tu.
    Gracias Saludos

    • Fernando Rumbo

      Cambia los parametros en tu consulta donde tiene el href, y de alli lees tus parametros en el js. Si no puedes me avisas

  • Fernando Rumbo

    Muchisimas gracias, me salvaste la vida!

    • Obed

      Que bueno que te ha sido útil el contenido de este artículo!

  • Arelano Gómez

    muchas gracias, por compartir, saludos

  • Armando Leal

    Tengo un problema que graba dos registros. ¿En donde estara el error?

  • hector

    hey, esta super bueno, yo también tenia el problema del id vació, esto pasaba por que tenia unas variables con letras mayúsculas, pero tengo unas dudas, revice el cogido de app e la carpeta de js si mi formulario tuviera mas datos. debria de colocar las variables nuevas dentro de las funciones de delete y update en teoria. y con la vista en los formularios al enviar los datos con el boton simpre se escibe data-id, datada codigo, yo intente cambiar estos datos por unos relacionados con los de imi formulario y me arrojaba error o me mostraba el id vació tendra algunos incovenietes al cambiar los valores dentro de la vista que creo que es modalmodificar y modaleliminar..
    otra cosa a este codigo le puedo intefrar la función buscar tienes el empledo

    • Obed

      Mediante los atributos data, lo que haces es enviarle datos a los input según corresponda en los modales, pero para ello debes procesar esos datos mediante JavaScript, para el ejemplo de eliminar un registro con el atributo data-id se le envía el id al modal, el cual es utilizado para eliminar “x” registro!

      • hector rivera

        bueno otra pregunta, como puedo recibir los valores de los campos selec check box o radio botuns?
        supugamos en el formulario tengo un che y este fue chequeado como le digo al check box que lo esta chekeado en la ventana de actualizar ?.

        • Obed

          Puedes comprobar o desmarcar un elemento de casilla de verificación o un botón de opción utilizando el método .prop ()
          $( “#x” ).prop( “checked”, true );

  • hector rivera

    perdona esta es la la funcion js en app.js
    https://uploads.disquscdn.com/images/2aea984bb2e1828bfaf4ada5278b0b04f6ef2e54b97095d3e0284de824786fe7.png
    $(‘#dataenviar’).on(‘show.bs.modal’, function (event) {
    var button = $(event.relatedTarget) // Botón que activó el modal
    var id = button.data(‘id’) // Extraer la información de atributos de datos
    var nomuser = button.data(‘nomuser’) //
    var empleadof=button.data(‘empleadof’)///
    var modal = $(this)
    modal.find(‘#id’).val(id)
    modal.find(‘#nomuser’).val(nomuser)
    modal.find(‘#empleadof’).val(empleadof)
    })

    $( “#enviar” ).submit(function( event ) {
    var parametros = $(this).serialize();
    $.ajax({
    type: “POST”,
    url: “enviar.php”,
    data: parametros,
    beforeSend: function(objeto){
    $(“.datos_ajax_enviar”).html(“Mensaje: Cargando…”);
    },
    success: function(datos){
    $(“.datos_ajax_enviar”).html(datos);

    $(‘#dataenviar’).modal(‘hide’);
    load(1);
    }
    });
    event.preventDefault();
    });

  • Sebastian Gadea

    Hola, muy buen aporte!
    Te hago una consulta, yo quisiera agregarle un buscador, se puede?
    Me pasarías el código? Muchísimas gracias!

  • Homar Quintero

    hola muy bueno tu código, me puedes decir como aumento la longitud en los campos ya que al modificar solo permite escribir 3 y 4 caracteres solamente. La base de datos le aumente los valores, pero el formulario no me permite

  • Pingback: CRUD de datos usando dataTables, bootstrap, PHP y MySQL()

  • Edgar Balza

    Excelente aporte Obed, me preguntaba si sería muy complicado validar el código, es decir que no se repita en la data (no admita duplicidad)

  • Gusho Martinez

    alguien tendrael link de descarga ya comparti la ´publicacion pero no activa el link de descarga

  • Marisol

    Hola, tengo un problema al navegar con el paginador, alguien puede ayudarme por favor!