Buenas tardes a todos, quisiera saber como separar el código php y js de mi codigo.
todo el código esta en el archivo llamado "areas.php" y quiero separar el archivo JS en
"script.js" , soy un novato y he intentado sepáralo pero no me ejecuta.
me podrían asesorar en este punto es que ya de ahí no avanzo.
El codigo muestra una tabla en la cual se muestran datos desde mi base de datos y agregue un
modal con un form el cual tiene para agregar grado y nombre
para que desde ahí se puedan agregar a mas usuarios. ahí todo funciona al 100% solo quiero
separar los codigo php y js.
<body>
<!-- Modal Agregar Elemento -->
<div class="modal fade" id="modalElemento" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Agregar Elemento</h5>
<button type="button" class="btn-close btn-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<!-------FORMULARIO-------->
<form id="agregarElemento">
<div class="modal-body">
<div id="errorMessage" class="alert alert-warning d-none"></div>
<div class="mb-3">
<label for="">Grado</label>
<input type="text" name="grado" class="input form-control" />
</div>
<div class="mb-3">
<label for="">Nombre</label>
<input type="text" name="nombre" class="input form-control" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
class="fa-solid fa-xmark"></i></button>
<button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
</div>
</form>
</div>
</div>
</div>
<!-------tabla-------->
<div class="container-flex-column container-fluid fd-flex">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Areas Blancas
<button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
data-bs-toggle="modal" data-bs-target="#modalElemento">
<i class="fa-solid fa-plus"></i>
</button>
</h4>
</div>
<div class="card-body table-responsive">
<table id="tableAreaBlanca"
class="table table-bordered table-striped table-hover table-disable-selection">
<thead>
<tr>
<th>N/P</th>
<th>Grado</th>
<th>Nombre</th>
<th>A. Penales</th>
<th>E. Socioeconomicos</th>
<th>A. Divulgación</th>
<th>Evalucación</th>
<th>D. Personales</th>
<th>E. Psicologica</th>
<th>N. Acceso</th>
<th>Opciones</th>
</tr>
</thead>
<tbody>
<?php
$pdo = mysqli_connect('localhost', 'root', '', 'sistema');
$query = "SELECT * FROM certseg";
$query_run = mysqli_query($pdo, $query);
if (mysqli_num_rows($query_run) > 0) {
foreach ($query_run as $elemento) {
?>
<tr>
<td> <?= $elemento['id'] ?> </td>
<td> <?= $elemento['grado'] ?> </td>
<td> <?= $elemento['nombre'] ?> </td>
<td> <?= $elemento['antPenales'] ?> </td>
<td> <?= $elemento['estudiosSoc'] ?> </td>
<td> <?= $elemento['actaNoRe'] ?> </td>
<td> <?= $elemento['evaluacion'] ?> </td>
<td> <?= $elemento['fichaDtPers'] ?> </td>
<td> <?= $elemento['evaluacioSpic'] ?> </td>
<td> <?= $elemento['nivelAcceso'] ?> </td>
<td>
<button type="button" value="<?= $elemento['id']; ?>"
class="verElemento btn btn-info"><i class="fa-regular fa-eye"></i></button>
<button type="button" value="<?= $elemento['id']; ?>"
class="editarElemento btn btn-success"><i
class="fa-regular fa-pen-to-square"></i></button>
<button type="button" value="<?= $elemento['id']; ?>"
class="eliminarElemento btn btn-danger"><i
class="fa-solid fa-trash-can"></i></button>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php
include_once '../includes/footer.php';
?>
<script>
//agregar elemento por modal
$(document).on('submit', '#agregarElemento', function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("agregar_Elemento", true);
$.ajax({
type: "POST",
url: "funciones.php",
data: formData,
processData: false,
contentType: false,
success: function(response) {
var res = jQuery.parseJSON(response);
if (res.status == 422) {
Swal.fire({
title: 'Error',
text: res.message,
icon: 'error',
showConfirmButton: false, // Oculta el botón de aceptar
timer: 1000, // Tiempo en milisegundos antes de cerrar el mensaje (1000 ms = 1 segundos)
});
} else if (res.status == 200) {
$('#errorMessage').addClass('d-none');
$('#modalElemento').modal('hide').on('hidden.bs.modal', function() {
$('.modal-backdrop').remove();
});
$('#agregarElemento')[0].reset();
Swal.fire({
title: 'Éxito',
text: 'Elemento agregado correctamente.',
icon: 'success',
timer: 1000, // Tiempo en milisegundos antes de que se cierre automáticamente
showConfirmButton: false
})
$('#tableAreaBlanca').load(location.href + " #tableAreaBlanca");
}
}
});
});
</script>