0

Tengo un botón que se llama "anular", que está ubicado en un modal, y se ve así introducir la descripción de la imagen aquí

<button id="modal_btn_anular" type="button" class="btn btn-warning d-none">Anular</button>
const modalBtnAnular = $("#modal_btn_anular")

Entonces, al presionarlo, cambia un valor en mi base de datos, y IdEstado se pone en "8" que significa "anulado" es decir 8=anulado


introducir la descripción de la imagen aquí

Y en la vista del html se ve así: introducir la descripción de la imagen aquí

Lo que quiero, es que al estar la base de datos en ese estado anulado, es decir idEstado=8, el botón "anular" se oculte. Yo estuve tratando con esto con jquery:

if (solicitud.estado == "Anulado") {
            modalBtnAnular.removeClass("d-none")
        }

Pero no me funcionó, no me da ningún error, pero no me funciona. ¿Tendrían alguna idea de como hacerlo? Estoy trabajando con jquery y sqlserver

3
  • Intenta removerlo del DOM y no remover la clase modalBtnAnular.remove()
    – JoseMgz_Ux
    Commented el 29 nov. 2022 a las 17:18
  • Si le quitas la clase d-none es cuando lo muestras, pues d-none en bootstrap es lo mismo que display: none; en CSS. Si acaso debes agregarle esa clase, no quitársela, aunque por defecto parece que ya la tiene, o eso parece.
    – masterguru
    Commented el 29 nov. 2022 a las 17:22
  • Deberias agregar la estructura de la informacion que usas para armar tu table, y tambien el codigo de tu tabla para poder ayudar.
    – David081
    Commented el 29 nov. 2022 a las 17:27

2 respuestas 2

0

Eso lo puedes hacer desde el back, supongo que generas dicha información desde un for, pero como no mencionas nada al respecto se puede hacer de la forma mas compleja, que es comprobar que la pagina se haya cargado totalmente y mediante un id en el cuerpo de la tabla accedemos al contenido de la tabla "data".

//FUNCION QUE DETECTA LA CVARGA COMPLETA DEL DOM
window.addEventListener('load', function() {
  //OBTENEMOS EL BODY DE LA TABALA CON ID DATA QUE ES LA PARTE QUE NOS INTERESA
  var table = document.getElementById('data');
  //OBTENEMOS FILAS
  for (var i = 0, row; row = table.rows[i]; i++) {
    //OBTENEMOS COLUMNAS
    for (var j = 0, col; col = row.cells[j]; j++) {
      // console.log(col)
      //console.log(row.children[1].textContent)
      //ACCEDEMOS A LA CELDA MEDIANTE LOS NODOS PARA OBTENER EL TEXTO Y COMPROBAMOS
      if (row.children[1].textContent == 'Anulado') {
        //ACCEDEMOS A LA POSICION DEL BOTON Y MODIFICAMOS ATRIBUTO SI LA CELDA DE SU FILA ES ANULADO
        row.children[2].children[0].disabled = true;
      } else {
        //SI ES CREADO SE MANTIENE EL BOTON ACTIVO
        row.children[2].children[0].disabled = false;
      }
    }
  }
});
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>ESTADO</th>
      <th>ACCION</th>
    </tr>
  </thead>
  <tbody id="data">
    <tr>
      <td>1</td>
      <td>Anulado</td>
      <td><button class="accion">boton</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Creado</td>
      <td><button class="accion">boton</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Anulado</td>
      <td><button class="accion">boton</button></td>
    </tr>
    <tr>
      <td>4</td>
      <td>Anulado</td>
      <td><button class="accion">boton</button></td>
    </tr>
    <tr>
      <td>5</td>
      <td>Creado</td>
      <td><button class="accion">boton</button></td>
    </tr>
    <tr>
      <td>6</td>
      <td>Creado</td>
      <td><button class="accion">boton</button></td>
    </tr>
  </tbody>

</table>

Esta función sera ejecutada al cargar tu pagina por completo, y si se agrega o modifica una fila mas esta la tomara en cuenta, ya que es dinámica, dime si te ayudo.

NOTA: En el if donde asigno disabled:true o false es donde tu debes agregar o remover tu clase si lo haces con bootstrap.

0

Por lo que entiendo, lo unico que tienes que hacer es cambiar el atributo display de block a none en el button dependiendo de si el estado es = 8:

if (solicitud.estado == "Anulado") {
   $("#modal_btn_anular").css("display","none");
}
else {
   $("#modal_btn_anular").css("display","block");  
}

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.