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: