tengo un problema para recargar una tabla en html con AJAX a la hora de activar y/o desactivar una sección mi objetivo es que se vea el cambio en tiempo real y lo que sucede es que tengo que recargar la página manualmente para que se refleje el cambió realizado, estuve investigando y encontré que tenia que hacer uso de un div pero aún utilizando el div no logro obtener ese efecto. Adjunto mi código:
HTML
<div class="container">
<div class="table-responsive mt-1" id="secciones">
<table class="table table-striped table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th class="text-center">ORDENAR</th>
<th class="text-center" scope="col">SECCIÓN</th>
<th class="text-center" scope="col">TEXTO</th>
<th class="text-center" scope="col">ESTATUS</th>
<th class="text-center" scope="col">ACCIÓN</th>
</tr>
</thead>
<tbody>
<?php
$id=1;
foreach ($registros as $registro):?>
<tr>
<td class="text-center"><a href="#"><i class="fas fa-sort"></i></a></td>
<td class="text-center"><b><?php echo $registro['nombre_seccion'];?></b></td>
<td class="text-center"><b><?php echo $registro['texto'];?></b></td>
<td class="text-center">
<a href="#" class="cambiaEstatus <?php echo($registro['status']!=1) ? "toggle-off" : "visible";?>" data-id="<?php echo $id;?>" title="Cambiar Estatus" alt="Cambiar Estatus">
<i class="fas fa-toggle-on"></i>
</a>
</td>
<td class="text-center">
<a href="edita_seccion.php?id=<?php echo $registro['id_seccion'];?>" class="btn btn-sm btn-dark">Editar Sección</a>
</td>
</tr>
<?php
$id++;
endforeach;?>
</tbody>
</table>
</div>
</div>
PHP
$id_estatus = $_GET['idchange'];
$sql_seccion_estatus = "SELECT * FROM seccion WHERE id_seccion='$id_estatus'";
$obtener_estatus = obtenerEstatus($sql_seccion_estatus, $conecta);
if (!empty($id_estatus) && $obtener_estatus == 1)
{
$sql_inactivo = "UPDATE seccion SET status='0' WHERE id_seccion='$id_estatus'";
$cambio_inactivo = modificaRegistro($sql_inactivo, $conecta);
echo ($cambio_inactivo!=false) ? "Sección Desactivada" : "";
die();
}elseif(!empty($id_estatus) && $obtener_estatus == 0)
{
$sql_activo = "UPDATE seccion SET status='1' WHERE id_seccion='$id_estatus'";
$cambio_activo = modificaRegistro($sql_activo, $conecta);
echo ($cambio_activo !=false) ? "Sección Activada" : "";
die();
}
require 'views/secciones.view.php';
JQuery
$(document).ready(function()
{
editaSeccion();
});
function editaSeccion()
{
$(".cambiaEstatus").on("click", function(event)
{
event.preventDefault();
var id = $(this).attr("data-id");
console.log(id);
$.get("secciones.php", "idchange="+id, function(respuesta)
{
console.log(respuesta);
if (respuesta == "Sección Desactivada")
{
alertify.error(respuesta);
}else if (respuesta == "Sección Activada")
{
alertify.success(respuesta);
}
cargarTabla();
});
});
}
function cargarTabla()
{
$.get("secciones.php", "", function(respuesta)
{
console.log(respuesta);
$("#secciones").html(respuesta);
});
}
Saludos.
secciones.php
¿? en elonclick
y luego desde ese bloque llamas acargarTabla()
... me pregunto ¿para qué?. ¿Esa primera llamada no te trae lo que necesitas? ¿Por qué mandas otra petición al servidor desdecargarTabla()
. El error parece más de lógica y de organización de código que de otra cosa. Prueba a trasladar esto a la 1ª llamada:$("#secciones").html(respuesta);
y comenta la llamada que haces acargarTabla()
. Debería funcionar bien así.