1

tengo un formulario donde guardo archivos php y al momentos de subirlo a mi servidor se demora un tiempo y quisiera que apareciera un spinner para que puedan ver que esta cargando, cree un spinner en un modal y quisiera saber la forma de llamar el modal ya que no puedo llamarlo desde el botton ya que le pongo condiciones este es código:

 <div class="col-md-12 form-group">
<label>Agregar PDF -*NOTA: Maximo 3 Archivos pdf & 3MB por archivo.*</label>
            <div class="input-group">
             <input id="subirPDFinput" type="file" name="expArchivo[]" accept="application/pdf" multiple="multiple" required>
              </div>
            </div>
Aceptar
                                        <div class="col-12" style="text-align: center;">
                                            <button type="submit" class="btn btn-success">Aceptar</button>
                                        </div>

                                        <?php
                                        $registrarE = new ControladorExpediente();
                                        $registrarE->ctrRegistrarExpediente();


                                        ?>

Mi modal donde llamo el snniper:

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" style="text-align: center;">

        <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>

    </div>
</div>

y este es parte de mi controlador:

static public function ctrRegistrarExpediente()
    {
        if (isset($_POST["nueDescripcion"])) {
            // if (mime_content_type($_FILES['expArchivo']['tmp_name']) == 'application/pdf') {
            $idUsuario = $_SESSION["id_MP"];
1
  • Si quieres mantener la página con el spinner mientras insertas los datos, deberás usar ajax (leí tu respuesta de que no estás usando)
    – Zander
    el 25 may. 2021 a las 9:28

2 respuestas 2

2

Una sugerencia puede ser con un JS script que se ejecuta al enviar el formulario, uso algo parecido en unas integraciones. En esta caso no uso un modal, no se si te sirva esta sugerencia o si tu modal es requerido para tu envio.

Seria agregar un spinner de un gif animado que se mantenga oculto, y cuando se envia el formulario se active agregandole una clase.

Usando JQuery me queda mas o menos asi:


$("#algun-formulario").submit(function(e){
     $(".loader").addClass("active");
   });

Sin usar JQuery

let theForm = document.querySelector("#algun-formulario");

theForm.addEventListener("submit", function(){
  let loader = document.querySelector(".loader");
  
  loader.classList.add("active");
}, false);

con HTML agrega tu spinner

  <div class="loader">
   <img src="/img/spinner.gif" />
  </div>

con CSS solo aplica estilos segun el estado

  .loader {
    display: none;
  }

  .loader.active {
    display: block;
  }
5
  • Claro amigo, la idea es que me muestre un spinner hasta que recargue la pagina, trate de implementarlo y quiero que me corrijas si me estoy equivocando, porque no me aparece <form id="algun-formulario" method="POST"> <button type="submit">Aceptar</button> <div class="loader"> <img src="view/public/img/spinner.gif" /> </div> </form> <style> .loader {display: none; }.loader.active { display: block; } </style> <script language="javascript" type="text/javascript"> $("#algun-formulario").submit(function(e) { $(".loader").addClass("active"); });</script>
    – JMM
    el 25 may. 2021 a las 13:51
  • 1
    Prueba agregando un action al form, que es donde se procesa el post, tambien si no estas cargando jquery tendrias que precargarlo, o hacer el script en Vanilla JS
    – AugustoM
    el 25 may. 2021 a las 14:49
  • 1
    Aqui puedes ver un fiddle con jquery precargado jsfiddle.net/hb5mLxuf
    – AugustoM
    el 25 may. 2021 a las 14:57
  • 1
    Otro fiddle usando solo JS sin librerias jsfiddle.net/hb5mLxuf/1
    – AugustoM
    el 25 may. 2021 a las 15:10
  • 1
    Gracias amigo ya le di solución, al final implemente <script> $("#algun-formulario").submit(function(e) { $("#staticBackdrop").modal("show"); }); </script> así llamaba a mi modal y también me faltaba llamar al jquery
    – JMM
    el 25 may. 2021 a las 15:17
1

Si estas utilizando ajax , puede utilizar el metodo beforeSend donde puede llamar a tu modal de esta manera $("#tuModal").show() y luego cuando termine de procesar con la funcion success cierras tu modal $("#tuModal").hide() , y quedaria asi .

 $.ajax({
        url: "datos.php",
        type: "post",
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function(){
          $("#tuModal").show()
        },
        success: function (resultado){
          $("#tuModal").hide()
        }

   });

Espero te sirva cualquier duda puedes comentarme .

1
  • No estoy utilizando ajax, no se podría llamar desde el controlador? antes de que inserte los datos
    – JMM
    el 25 may. 2021 a las 2:51

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.