0

Tengo una lista de archivos con un boton de "eliminar archivo", el botón funciona pero para evitar errores y eliminar sin querer, decidí añadir un modal que sirva de alerta antes de eliminar el archivo.

Estoy utilizando PHP para recuperar los datos y tailwind con flowbite para los estilos.

El botón que tenía para eliminar (y que funciona) es el siguiente:

<a href="../../controller/files/delete.php?id=<?php echo $row['idArchivo'] ?>" class="text-red-500" data-modal-toggle="deleteModal">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
  </svg>
</a>

Y lo cambié por el siguiente código:

<button class="block text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center  bg-blue-600  hover:bg-blue-700  focus:ring-blue-800" type="button" data-modal-toggle="deleteModal" targetEl="">Eliminar</button>

modal:

<div id="deleteModal" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
  <div class="relative w-full h-full max-w-md md:h-auto">
    <div class="relative rounded-lg shadow bg-gray-700">
      <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent rounded-lg text-sm p-1.5 ml-auto inline-flex items-center hover:bg-gray-800 hover:text-white" data-modal-toggle="deleteModal">
        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="sr-only">Close modal</span>
      </button>
      <div class="p-6 text-center">
        <svg aria-hidden="true" class="mx-auto mb-4 w-14 h-14  text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <h3 class="mb-5 text-lg font-normal text-gray-400">Are you sure you want to delete this product?</h3>


        <!-- Botón que me interesa -->
        <a href="../../controller/files/delete.php?id=<?php echo $row['idArchivo'] ?>" data-modal-toggle="deleteModal" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">Eliminar
        </a>

        
        <button data-modal-toggle="deleteModal" type="button" class="focus:ring-4 focus:outline-none rounded-lg bordertext-sm font-medium px-5 py-2.5 focus:z-10  bg-gray-700  text-gray-300  border-gray-500  hover:text-white  hover:bg-gray-600  focus:ring-gray-600">No, cancel</button>
      </div>
    </div>
  </div>
</div>

Como se puede ver, funciona pasando el id del archivo a través de la url y con una petición SQL se elimina de la base de datos, sin embargo, intenté hacer eso mismo con el modal pero no funciona.

Es primera vez que trabajo con modales y por lo que entiendo funcionan como otro archivo el cuál no tiene relación con el anterior, por lo que pasar el id con $row['idArchivo'] entiendo que no funciona.

EL modal lo saqué de aquí: https://flowbite.com/docs/components/modal/#pop-up-modal y creo que quizás tengo que utilizar el parametro de objeto targetEl pero no sé exactamente lo que es ni cómo podría utilizarlo.

1 respuesta 1

2

Puedes hacer que tu botón tenga un evento onclick para que al presionarlo se dispare el evento, dentro puedes agregarle una función a la que le pasaras un parámetro, en este caso el id del archivo, seria algo así:

<button class="block text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center  bg-blue-600  hover:bg-blue-700  focus:ring-blue-800" type="button" data-modal-toggle="deleteModal" targetEl="" onclick="deleteArchive('<?php echo($row['idArchivo']); ?>')">Eliminar</button>

Agrega un id al botón de Eliminar dentro del modal, y deja el href con el valor javascript::void(0);

<a href="javascript::void(0);" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2" id="btnArchiveDelete">Eliminar
    </a>

Luego crea la función en JavaScript que declaraste en el evento onclick, seria asi:

function deleteArchive(id) {
  var element=document.querySelector('#btnArchiveDelete');
  element.setAttribute('href', '../../controller/files/delete.php?id='+id);
}

Lo que hace es tomar el id que pasaste como parámetro en la función y editar el valor del href dentro del botón de tu modal, para que al hacer click en el botón te redireccione a donde quieres

3
  • Me funcionó perfectamente, muchas gracias de verdad. Ahora, esto funciona, pero ¿hacerlo de esta manera es una practica recomendada? ¿Hay otras opciones?
    – Mauricio
    Commented el 10 dic. 2022 a las 7:30
  • Hacerlo con la función js y utilizando un evento click si seria recomendado porque es algo recursivo que puedes utilizar bien, te daría una recomendación sobre esto, y es que uses un método POST para cuando quieras eliminar, ya que de esta manera no se podrá acceder a la url de eliminar por medio de GET, para hacerlo solo agrega una etiqueta form en el modal y en vez de cambiar el href del botón, cambia el atributo action para que vaya a la url que quieres, esa seria una forma un tanto mejor Commented el 10 dic. 2022 a las 16:37
  • Muchas gracias!
    – Mauricio
    Commented el 10 dic. 2022 a las 16:55

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.