Tengo un index con un buscador y una tabla general que me hace la consulta a una bd,todo bien hasta ahi, lo siguiente es, en el buscador se ingresa un id, y se hace la busqueda de ese id por lo que hago un ajax para buscar y este me manda a otro archivo llamado consulta.php donde recibe el id, y me hace otra consulta en especifico y devuelve la informacion como tabla, dicha información se imprime en un div del index, actualizando ver la info de la nueva tabla, hasta ahi es correcto, sin embargo cuando me trae la tabla de consulta me trae un boton para abrir un modal, ese modal se encarga de agregar un solicitud de vacacion, lo que hace es mandar el forms, y me cierra el modal, pero al cerrarse el modal hace un reload y me regresa al punto inicial, no respetando la busqueda que se habia hecho anteriormente. tengo otros casos similares, de un include en consulta.php traigo info de otra bd que es donde se guarda el modal, me muestra la información, pero si le quiero modificar un dato y se actualiza, este me regresa al punto inicial donde esta el search y la tabla general y no al punto anterios, ¿cómo le puedo hacer?
index.php
<?php
include "Templates/header.php";
if (isset($_SESSION["autentificado"])){
}
include "Procesos/seguridad.php";
?>
Control de Vacaciones de Empleados RT
<div class="container">
<!-- Formulario Busqueda Empleado -->
<form id="searchForm" method="POST" >
<label for="employeeNumber" class="negritas">Número de Empleado:</label> <br><br>
<input type="number" id="employeeNumber" name="employeeNumber" placeholder="Ingrese el número de empleado" autocomplete="off">
<input type="submit" value="Buscar" id="btnBuscar">
</form>
<!-- DIV PARA MOSTRAR TABLA CON INFO DEL EMPLEADO -->
<div id="searchResults" class=""></div>
<div class="container">
<div id="tablaEmpleados" class="tabla-container">
<!-- DIV QUE MUESTRA LA TABLA GENERAL -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalVacaciones" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="lm modal-title" id="exampleModalLabel">Solicitud de Vacaciones</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="solicitudVacaciones" action="save_vac.php" method="post" enctype="multipart/form-data">
<!-- Agregar inputs hidden para almacenar el id del empleado y los días de vacaciones -->
<input type="hidden" id="modalIdEmpleado" name="idEmpleado">
<input type="hidden" id="modalTotalVacaciones" name="totalVacaciones">
<div class="mb-3 row">
<label for="totalDias" class="lm col-sm-4 col-form-label">Total de Días</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="totalDias" name="totalDias" required>
<p class="alertaM">Verifica que el "Total de Dias" coincida con los días seleccionados a continuación</p>
</div>
</div>
<div class="mb-3 row">
<label for="fechaInicio" class="lm col-sm-4 col-form-label">Fecha de Inicio</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="fechaInicio" name="fechaInicio" required>
</div>
</div>
<div class="mb-3 row">
<label for="fechaFin" class="lm col-sm-4 col-form-label">Fecha de Fin</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="fechaFin" name="fechaFin" required>
</div>
</div> <br>
<input type="hidden" name="estado" value="3">
<div class="text-center">
<button type="submit" class="btn btn-primary custom-btn">Enviar Solicitud</button>
<!-- Botón para cancelar -->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="limpiarFormulario()">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Almacenar el ID del empleado al cerrar el modal
$('#modalVacaciones').on('hidden.bs.modal', function(event) {
var idEmpleado = $('#modalIdEmpleado').val();
localStorage.setItem('lastSelectedEmployee', idEmpleado);
});
// Actualizar la página al cerrar el modal
$('#modalVacaciones').on('hidden.bs.modal', function(event) {
location.reload();
});
// Recuperar el ID del empleado al cargar la página
$(document).ready(function() {
var lastSelectedEmployee = localStorage.getItem('lastSelectedEmployee');
if (lastSelectedEmployee !== null) {
// Aquí puedes hacer una petición AJAX para cargar la tabla de empleados con el empleado seleccionado
}
});
</script>
<script>
function validarFormulario() {
// Validar que todos los campos estén llenos
if ($('#totalDias').val() === '' || $('#fechaInicio').val() === '' || $('#fechaFin').val() === '') {
alert("Por favor, completa todos los campos del formulario.");
return false; // Evitar que se envíe el formulario si no está completo
}
// Validar que el campo totalDias contenga solo números
var totalDias = $('#totalDias').val();
if (isNaN(totalDias)) {
alert("El campo 'Total de Días' debe contener solo números.");
return false; // Evitar que se envíe el formulario si el campo no contiene solo números
}
return true; // Permitir el envío del formulario si todas las validaciones son exitosas
}
</script>
<script>
$(document).ready(function() {
$('#modalVacaciones').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Botón que activó el modal
var idEmpleado = button.data('id'); // Extraer el id del empleado del atributo data-id
var totalVacaciones = button.data('vacaciones'); // Extraer los días de vacaciones del atributo data-vacaciones
// Actualizar los campos ocultos del modal con los datos del empleado y días de vacaciones
$('#modalIdEmpleado').val(idEmpleado);
$('#modalTotalVacaciones').val(totalVacaciones);
});
});
</script>
<script>
$(document).ready(function() {
// Evento change para el campo totalDias
$('#totalDias').change(function() {
var totalDias = parseInt($(this).val()); // Obtener el valor de totalDias como entero
var totalVacaciones = parseInt($('#modalTotalVacaciones').val()); // Obtener el valor de totalVacaciones como entero desde el campo oculto
// Verificar si totalDias es mayor que totalVacaciones
if (totalDias > totalVacaciones) {
// Mostrar mensaje de error
alert("No se puede solicitar más días de vacaciones de los disponibles.");
// Restaurar el valor de totalDias al máximo permitido (totalVacaciones)
$(this).val(totalVacaciones);
}
});
$('#solicitudVacaciones').submit(function(event) {
event.preventDefault(); // Evitar el envío del formulario por defecto
var formData = $(this).serialize(); // Serializar los datos del formulario
// Enviar los datos del formulario mediante AJAX
$.ajax({
type: 'POST',
url: 'save_vac.php', // Ruta al script PHP que procesará los datos
data: formData,
success: function(response) {
// Verificar si la respuesta del servidor es "success"
if (response.trim() === "success") {
// Mostrar un mensaje de éxito al usuario
alert("La solicitud de vacaciones se ha guardado correctamente.");
// Cerrar el modal después de mostrar el mensaje de éxito
$('#modalVacaciones').modal('hide');
// Limpiar los campos del formulario después de cerrar el modal
$('#solicitudVacaciones')[0].reset();
} else {
// Si la respuesta no es "success", mostrar un mensaje de error
alert("Error al guardar la solicitud de vacaciones.");
}
},
error: function(xhr, status, error) {
// Manejar errores en la petición AJAX
console.error(xhr.responseText);
}
});
});
});
<!-- Scripts para hacer funcional la busqueda -->
<!-- JS de Bootstrap (opcional, pero necesario para algunas funcionalidades) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
main.js (ajax)
const searchForm = document.querySelector('#searchForm');
const cont_buscar = document.querySelector('#employeeNumber');
const resultado = document.querySelector('#searchResults');
// Agregar un evento de clic a los botones "Elegir"
document.addEventListener('click', function(e) {
if (e.target.classList.contains('btnElegir')) {
var idEmpleado = e.target.getAttribute('data-id');
mostrarDetallesEmpleado(idEmpleado);
}
});
function buscar_datos(idEmpleado) {
// Ocultar la tabla de empleados
document.getElementById('tablaEmpleados').style.display = 'none';
$.ajax({
type: 'POST',
url: 'consulta.php',
data: { idEmpleado: idEmpleado }, // Aquí pasamos el ID del empleado correctamente
success: function (respuesta) {
if (respuesta.trim() === "") {
resultado.innerHTML = "<p>No se encontró ningún empleado con el ID proporcionado.</p>";
} else {
resultado.innerHTML = respuesta;
}
},
error: function () {
resultado.innerHTML = "<p>Ocurrió un error al buscar el empleado. Por favor, inténtelo de nuevo más tarde.</p>";
}
});
}
function mostrarDetallesEmpleado(idEmpleado) {
// Ocultar la tabla de empleados
document.getElementById('tablaEmpleados').style.display = 'none';
$.ajax({
type: 'POST',
url: 'consulta.php',
data: { idEmpleado: idEmpleado },
success: function (respuesta) {
if (respuesta.trim() === "") {
resultado.innerHTML = "<p>No se encontró ningún empleado con el ID proporcionado.</p>";
} else {
resultado.innerHTML = respuesta;
}
},
error: function () {
resultado.innerHTML = "<p>Ocurrió un error al buscar el empleado. Por favor, inténtelo de nuevo más tarde.</p>";
}
});
}
searchForm.addEventListener('submit', function (event) {
event.preventDefault(); // Evitar que el formulario se envíe automáticamente
var idEmpleado = cont_buscar.value;
if (idEmpleado != '') {
buscar_datos(idEmpleado);
} else {
resultado.innerHTML = "<p>Por favor, ingrese un ID de empleado válido.</p>";
document.getElementById('tablaEmpleados').style.display = 'block';
}
});
consulta.php
<br>
<div class='formt'>
<h5>En el sistema existen los siguientes registros de acuerdo al dato ingresado:</h5>
<a href='#' class='btnSv btn btn-primary' data-bs-toggle='modal' data-bs-target='#modalVacaciones' data-id='" . $row['Personal'] . "' data-vacaciones='" . $row['Vacaciones'] . "'>Solicitar Vacaciones</a>
</div>";
}
$salida .= "</tbody>
</table><br>
echo $salida;
include('detalle_vac.php');
} else {
$salida .= "<h3>NO HAY DATOS POR MOSTRAR<br> N° DE EMPLEADO NO ESTÁ DE ALTA</h3>";
echo $salida;
}
}
?>
$('#modalVacaciones').on('hidden.bs.modal',allí tienes llamado alocation.reload();.