Sucede que tengo un archivo PHP llamado vistaArea donde listo todos los registros de mi BD y al momento de pulsar en el btn-editar
este debe re-dirigirme a un PHP editaArea donde se debe cargar los datos que se muestra en la tabla para su posterior modificación, si la modificación es exitosa mostrar un mensaje de éxito en vistaArea caso contrario mostrar mensaje de error en editaArea.
El otro problema que tengo es que estoy usando un button
para realizar la acción de editar, pero este no me redirige a editaArea, probé con el evento click pero solo funciona para el primer registro y en los demás no hace nada.
Para mostrar los mensajes estoy usando alertifyjs, mi código es el siguiente:
PHP vistaArea donde listo los registros
<table class="table table-hover table-bordered table-responsive-md table-sm text-center" id="tb-area">
<thead>
<th>#</th>
<th>Nombre</th>
<th>Acciones</th>
</thead>
<tbody>
<?php
require_once '../controlador/controladorArea.php';
$registros=1;
foreach ((array) $objArea as $campos):
$datos=$campos->id_area."-".$campos->nom_area;
?>
<tr>
<td><?php echo $registros++?></td>
<td><?php echo $campos->nom_area?></td>
<td>
<button type="button" class="btn btn-outline-warning" name="btn-editar" id="btn-editar" onclick="obtenerArea(<?php echo $datos?>)"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-outline-danger" onclick="confirmaEliminacion(<?php echo $campos->id_area?>)"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Archivo JS donde tengo las funciones para obtener y actualizar datos
function obtenerArea(datos){
var d=datos.split('-');
/*Estos son los campos de mi PHP editaArea donde deberían asignarse los valores
que trae "datos" desde vistaArea para después puedan actualizarse*/
$('#id-up').val(d[0]);
$('#area-up').val(d[1]);
/* Un intento fallido de redireccionar a editaArea con los datos obtenidos
document.location.href='editaArea.php';*/
}
function actualizaArea(){
var cadena=$('#frmAreaEdit').serialize();
$.ajax({
type: 'POST',
url: '../controlador/controladorArea.php',
data: cadena,
success:function(response){
if(response){
/*En estas líneas refresco vistaArea y supuestamente
mostrar el mensaje de éxito pero no hace nada
$('#container-add').load('vistaArea.php #frmArea');
$('#container-area').load('vistaArea.php #tb-area');
alertify.success("Actualizado exitosamente!");*/
}else{
/*Este mensaje debería mostrarse en el editaArea si falló la modificación*/
alertify.error("Falló la solicitud!");
}
}
});
}
PHP editaArea donde deben cargar los datos de vistaArea al pulsar el btn-editar
<form action="" method="post" id="frmAreaEdit">
<input type="text" class="form-control" id="id-up" name="id-up" hidden>
<div class="form-group">
<input type="text" class="form-control" id="area-up" name="area-up">
</div>
<button type="submit" class="btn btn-success" name="btn-actualizar" id="btn-actualizar" onclick="actualizaArea();return false;">Actualizar</button>
</form>
Bootstrap
en lugar de un formulario. Luego mandas la informacion por Ajaxid
en laURL
y si digitara uno que no existe el sistema daría error. Por ello intente usar Ajax para pasar los datos porPOST
y no porGET
.