2-cada botón de compartir y campo de entrada debe tener un ID único para que puedan ser referenciados de manera independiente.
script JavaScript para que cada botón de compartir y campo de entrada debe tener un ID único para que puedan ser referenciados de manera independiente. Analizo que utilizas esta propiedad: data-id="<?php echo $audiencia['id_audiencia']; ?>" y de donde tomas estas datos: var modalBodyInput = addDataModal.querySelector('#id_audiencia');
modalTitle.textContent = 'Agregar Datos de Audiencia'; modalBodyInput.value = idAudiencia;Explicación del Script JavaScript
El script JavaScript maneja la interacción con el modal y la visualización de alertas.
Evento DOMContentLoaded: Espera a que el DOM se haya cargado completamente antes de ejecutar el código.
Evento show.bs.modal: Se dispara cuando el modal se va a mostrar. Aquí se obtiene el botón que disparó el modal (event.relatedTarget) y se extrae el data-id del botón, que contiene el ID de la audiencia.
Actualizar el Modal: Cambia el título del modal y establece el valor del campo oculto id_audiencia con el ID de la audiencia seleccionada.
Mostrar Alerta SweetAlert: Si la URL contiene el parámetro success, se muestra una alerta de éxito o error usando SweetAlert, y luego se elimina el parámetro success de la URL usando history.replaceState para que la alerta no aparezca nuevamente al refrescar la página.
Importancia de data-id
El atributo data-id en el botón permite pasar el ID único de la audiencia al modal. Esto es crucial para identificar qué audiencia se está editando. En el script, button.getAttribute('data-id') obtiene este ID para que pueda ser usado en el formulario del modal.
Resumen
Este código integra PHP para gestionar datos de la base de datos, HTML para la estructura del formulario, y JavaScript para la interactividad del modal y la gestión de alertas, asegurando una experiencia de usuario fluida y coherente.
<?php
class Conexiondb
{
static public function conectar()
{
$link = new PDO("mysql:host=localhost;dbname=dbaudiencias", "root", "");
return $link;
}
}
class getVideosModel extends Conexiondb
{
// Método para actualizar los datos de la audiencia en la base de datos
static public function updateAudiencia($data)
{
try {
$query = Conexiondb::conectar()->prepare(
"UPDATE audiencia SET distrito = :distrito, sala = :sala, confidencialidad = :confidencialidad,
tipoaudiencia = :tipoaudiencia, encargado = :encargado, asistente = :asistente, tipojuzgado = :tipojuzgado
WHERE id_audiencia = :id_audiencia"
);
$query->bindParam(":distrito", $data['distrito']);
$query->bindParam(":sala", $data['sala']);
$query->bindParam(":confidencialidad", $data['confidencialidad']);
$query->bindParam(":tipoaudiencia", $data['tipoaudiencia']);
$query->bindParam(":encargado", $data['encargado']);
$query->bindParam(":asistente", $data['asistente']);
$query->bindParam(":tipojuzgado", $data['tipojuzgado']);
$query->bindParam(":id_audiencia", $data['id_audiencia']);
return $query->execute();
} catch (PDOException $e) {
return false;
}
}
// Método para obtener todos los datos de las audiencias
static public function getVideos()
{
try {
$query = Conexiondb::conectar()->prepare("SELECT * FROM audiencia");
$query->execute();
return $query->fetchAll();
} catch (PDOException $e) {
return [];
}
}
}
class getVideosControlador
{
// Método para obtener los datos de las audiencias desde el modelo
public function getVideos()
{
$videos = getVideosModel::getVideos();
return $videos;
}
}
// Procesamiento del formulario al recibir una solicitud POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$data = [
'id_audiencia' => $_POST['id_audiencia'],
'distrito' => $_POST['distrito'],
'sala' => $_POST['sala'],
'confidencialidad' => $_POST['confidencialidad'],
'tipoaudiencia' => $_POST['tipoaudiencia'],
'encargado' => $_POST['encargado'],
'asistente' => $_POST['asistente'],
'tipojuzgado' => $_POST['tipojuzgado']
];
$result = getVideosModel::updateAudiencia($data);
header("Location: " . $_SERVER['PHP_SELF'] . "?success=" . ($result ? "true" : "false"));
exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario Modal</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<style>
.modal-dialog {
max-width: 90%;
}
video::-internal-media-controls-download-button {
display: none;
}
</style>
</head>
<body>
<div class="container py-1" style="background-color: white;">
<?php
// Obtener los datos de las audiencias y mostrarlos en tablas
$videos = new getVideosControlador();
$audiencias = $videos->getVideos();
foreach ($audiencias as $audiencia) {
?>
<table class='table-sm table-bordered' style='width:100%'>
<tr>
<thead>
<th scope='col' class='text-center ' colspan='2'>Audiencia
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addDataModal" data-id="<?php echo $audiencia['id_audiencia']; ?>">Agregar Datos</button>
</th>
</thead>
</tr>
<tr>
<th>Distrito:</th>
<td><?php echo $audiencia['distrito']; ?></td>
</tr>
<tr>
<th>Sala:</th>
<td><?php echo $audiencia['sala']; ?></td>
</tr>
<tr>
<th>Reservada:</th>
<td><?php echo $audiencia['confidencialidad']; ?></td>
</tr>
<tr>
<th>Tipo de Audiencia:</th>
<td><?php echo $audiencia['tipoaudiencia']; ?></td>
</tr>
<tr>
<th>Encargado(a) de Sala:</th>
<td><?php echo $audiencia['encargado']; ?></td>
</tr>
<tr>
<th>Asistente:</th>
<td><?php echo $audiencia['asistente']; ?></td>
</tr>
<tr>
<th>Tipo de Juzgado:</th>
<td><?php echo $audiencia['tipojuzgado']; ?></td>
</tr>
</table>
<br>
<?php } ?>
</div>
<!-- Modal para agregar o editar datos de audiencia -->
<div class="modal fade" id="addDataModal" tabindex="-1" aria-labelledby="addDataModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" action="">
<div class="modal-header">
<h5 class="modal-title" id="addDataModalLabel">Agregar Datos de Audiencia</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Campos del formulario para agregar o editar los datos de audiencia -->
<input type="hidden" id="id_audiencia" name="id_audiencia" value="">
<div class="mb-3">
<label for="distrito" class="form-label">Distrito</label>
<input type="text" class="form-control" id="distrito" name="distrito" required>
</div>
<div class="mb-3">
<label for="sala" class="form-label">Sala</label>
<input type="text" class="form-control" id="sala" name="sala" required>
</div>
<div class="mb-3">
<label for="confidencialidad" class="form-label">Reservada</label>
<input type="text" class="form-control" id="confidencialidad" name="confidencialidad" required>
</div>
<div class="mb-3">
<label for="tipoaudiencia" class="form-label">Tipo de Audiencia</label>
<input type="text" class="form-control" id="tipoaudiencia" name="tipoaudiencia" required>
</div>
<div class="mb-3">
<label for="encargado" class="form-label">Encargado(a) de Sala</label>
<input type="text" class="form-control" id="encargado" name="encargado" required>
</div>
<div class="mb-3">
<label for="asistente" class="form-label">Asistente</label>
<input type="text" class="form-control" id="asistente" name="asistente" required>
</div>
<div class="mb-3">
<label for="tipojuzgado" class="form-label">Tipo de Juzgado</label>
<input type="text" class="form-control" id="tipojuzgado" name="tipojuzgado" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script para manejar el modal y las alertas de SweetAlert -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var addDataModal = document.getElementById('addDataModal');
// Evento que se dispara al mostrar el modal
addDataModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget; // Botón que disparó el modal
var idAudiencia = button.getAttribute('data-id'); // Obtener el ID de la audiencia del atributo data-id
var modalTitle = addDataModal.querySelector('.modal-title'); // Título del modal
var modalBodyInput = addDataModal.querySelector('#id_audiencia'); // Campo oculto para el ID de la audiencia
modalTitle.textContent = 'Agregar Datos de Audiencia'; // Cambiar el título del modal
modalBodyInput.value = idAudiencia; // Establecer el valor del campo oculto
});
// Mostrar una alerta SweetAlert basada en el parámetro de éxito en la URL
<?php if (isset($_GET['success'])): ?>
Swal.fire({
title: '<?php echo $_GET['success'] == 'true' ? '¡Éxito!' : '¡Error!'; ?>',
text: '<?php echo $_GET['success'] == 'true' ? 'Datos actualizados correctamente.' : 'Hubo un error al actualizar los datos.'; ?>',
icon: '<?php echo $_GET['success'] == 'true' ? 'success' : 'error'; ?>',
confirmButtonText: 'Aceptar'
}).then(() => {
// Eliminar el parámetro de éxito de la URL sin recargar la página
const url = new URL(window.location);
url.searchParams.delete('success');
window.history.replaceState({}, document.title, url.toString());
});
<?php endif; ?>
});
</script>
</body>
</html>
Comentarios
Publicar un comentario