0

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.

1
  • No entiendo por qué tienes dos llamadas a secciones.php ¿? en el onclick y luego desde ese bloque llamas a cargarTabla()... me pregunto ¿para qué?. ¿Esa primera llamada no te trae lo que necesitas? ¿Por qué mandas otra petición al servidor desde cargarTabla(). 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 a cargarTabla(). Debería funcionar bien así.
    – A. Cedano
    el 22 oct. 2018 a las 18:50

2 respuestas 2

0

Intenta realizando la peticion AJAX de la siguiente Forma

 $.ajax({
         type: "GET", 
         url: "secciones.php",
         async: true, 
         data: { 'idchange': id},
         success: function(respuesta){
                 console.log(respuesta);
                 if (respuesta == "Sección Desactivada")
                 {
                     alertify.error(respuesta);
                 }else if (respuesta == "Sección Activada") 
                 {
                     alertify.success(respuesta);
                 }
                 cargarTabla();
         }
         error: function (request, error) {
                    alertify.success(error);
         }
   });

function cargarTabla()
{
    $.ajax({
         type: "GET", 
         url: "secciones.php",
         async: true, 
         success: function(respuesta){
                 $("#secciones").html("");
                 console.log(respuesta);
                 $("#secciones").html(respuesta);
         }
         error: function (request, error) {
                    alertify.success(error);
         }
   });
}
0

Para refrescar el contenido de la tabla debes usar la opciones success o error segun corresponda y cambiar el contenido usando innertText.

Para este caso realiza los cambios cuando entra en el success tanto el nuevo estado como el nuevo texto.

Omito el codigo en PHP para poder implementar una prueba funcional en este post, la url puede ser cambiada por el archivo php y los parametros que requiera segun el caso.

function activar(elemento, id) {
  let estado = elemento.innerText;
  elemento.innerText = "Cambiando..."
  $.ajax({
     type: "GET", 
     url: "https://httpbin.org/get?id="+id,
     async: true, 
     success: function(respuesta){
        elemento.innerText = estado == "Activar" ? "Desactivar" : "Activar" 
     },
     error: function (request, error) {
        elemento.innerText = "Error"
     }
  })
}

var tdCambiar;
var idCambiar;

function cambiar(elemento, id){
  tdCambiar = elemento;
  idCambiar = id;
  texto.value = elemento.innerText;
}

function guardarCambio(){
  let nuevo = texto.value  
  $.ajax({
     type: "GET", 
     url: "https://httpbin.org/get?id="+idCambiar+"&nuevo="+nuevo,
     async: true, 
     success: function(respuesta){
        texto.value = ""
        tdCambiar.innerText = respuesta.args.nuevo
        tdCambiar = null
     },
     error: function (request, error) {
        texto.innerText = "Error"
     }
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>Texto</th>
<th>Estado</th>
</thead>
<tr>
 <td onclick="cambiar(this,1)">Click Para Cambiar, Luego Guardar</td>
 <td><button onclick="activar(this, 1)">Activar</button></td>
</tr>
</table>
<br>
<div >
 <input id="texto">
 <button onclick="guardarCambio()">Guardar</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.