Cómo cargar contenido dinámico en un popover de Bootstrap con Ajax, PHP y MySQL

Los popovers son muy similares a los tooltips, ya que se basan en un elemento padre, pero contienen mucha más información. Es muy fácil de usar y a diferencia de los tooltips, los popovers se pueden utilizar para mostrar más información en la misma página sin necesidade de actualizarla. Si estás desarrollando un sitio web, cuentas con un listado de usuarios y deseas mostrar información detallada de cada usuario cuando se haga clic o te poses encima con el ratón, puedes implementar popovers dinámicos. O incluso puedes crear tu propio hovercard personalizado para mostrar la información de cada usuario en la misma página. En este tutorial te mostraremos cómo cargar contenido dinámico en un popover de Bootstrap con Ajax, PHP y MySQL.

Una vez dicho esto, vamos a empezar con la implementación. Tendremos la siguiente estructura de ficheros a la hora de crear nuestro popover de bootstrap dinámico mediante Ajax, PHP y MySQL.

• index.php
• load_data.php
• ajax_data.php

Creación de la base de datos

En este ejemplo, mostraremos el popover cuando el usuario pose el ratón encima del nombre del usuario. Por lo que, lo primero que tenemos que hacer para llevar a cabo esto, es crear una tabla de usuarios, la cual llamaremos developers, e insertar unos cuantos registros para realizar pruebas.

CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Utilizaremos la siguiente query para insertar registros en la tabla.

INSERT INTO `developers` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES
(1, ' rnGarrett Winters', 'Newyork', 'Male', 'Software Engineer', 34, 'image_1.jpg'),
(2, ' rnSonya Frost', 'London', 'Female', 'Web Developer', 28, 'image_2.jpg'),
(3, 'Laeeq Khan', 'Delhi, India', 'Male', 'Web Developer', 30, 'image_3.jpg');

Mostrar listado de usuarios

En el fichero index.php, crearemos el HTML necesario para mostrar el listado de usuarios. Obtendremos los registros de la base de datos y con PHP los mostraremos. Utilizaremos la clase hover y el id del usuario en el enlace para mostrar el popover cuando el visitante se pose encima del enlace con el ratón.

<div class="container">
<h2>Example: Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL</h2>
<div class="row">
<div class="col-md-6 well">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="20%">Employee ID</th>
<th width="40%">Employee Name</th>
</tr>
<?php
$sql = "SELECT id, name, address, gender, designation, age, image FROM developers LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $emp = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td>0000<?php echo $emp["id"]; ?></td>
<td><a href="#" class="hover" id="<?php echo $emp["id"]; ?>"><?php echo $emp["name"]; ?></a></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</div>
</div>

Crearemos el HTML del popover dentro de un div, que después utilizaremos para rellenar con los datos del usuario que nos vendrán en formato JSON a través del fichero ajax_data.js.

<div id="popover_html" style="display:none;">
<p><img src="images/p_image" class="img-responsive img-thumbnail" /></p>
<p><label>Name :</label>p_name</p>
<p><label>Address : </label>p_address</p>
<p><label>Gender : </label>p_gender</p>
<p><label>Designation : </label>p_design</p>
<p><label>Age : </label>p_age</p>
</div>

Implementar el popover con contenido

Utilizaremos el trigger del popover: 'hover' para mostrar el popover cuando se haga hover. También usaremos la propiedad del popover: popoverContent para cargar el contenido dinámico dentro del popover llamando a la función popoverContent().

jQuery(document).ready(function(){
jQuery('.hover').popover({
title: popoverContent,
html: true,
placement: 'right',
trigger: 'hover'
});

La función popoverContent() realiza una solicitud ajax a load_data.php para obtener información del usuario de la base de datos. La información nos será devuelta en formato JSON.

function popoverContent() {
var content = '';
var element = $(this);
var id = element.attr("id");
$.ajax({
url: "load_data.php",
method: "POST",
async: false,
data:{
id : id
},
dataType: "JSON",
success:function(data){
content = $("#popover_html").html();
content = content.replace(/p_image/g, data.image);
content = content.replace(/p_name/g, data.name);
content = content.replace(/p_address/g, data.address);
content = content.replace(/p_gender/g, data.gender);
content = content.replace(/p_design/g, data.designation);
content = content.replace(/p_age/g, data.age);
}
});
return content;
}

Cargar datos del usuario dentro del popover

Ahora en load_data.php obtendremos los datos del usuarios de la base de datos MySQL con PHP, y los devolvemos en formato JSON.

<?php
include_once("db_connect.php");
if(isset($_POST["id"])) {
$sql = "SELECT id, name, address, gender, designation, age, image FROM developers WHERE id='".$_POST["id"]."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$dev_data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$dev_data = $rows;
}
echo json_encode($dev_data);
}
?>

Fuente: phpzag.com