Use befereSend in ajax to make a loading screen in Modal

Asked

Viewed 117 times

0

I’m trying to make a loading screen using modal and jquery, where while collecting the database information, it has to appear loading. But even after you have already loaded, the modal is not disappearing. Follow the code:

<!-- Modal aguarde -->
<div class="modal fade" id="modalaguarde" tabindex="-1" role="dialog" aria-labelledby="modalAguarde" aria-hidden="true">
    <div class="modal-dialog modal-aguarde modal-dialog-centered" role="document">
       <div class="modal-content">
           <div class="modal-body">
                <div class="text-center">
                   <img src="img/carregando.gif" class="modal-img"> 
                   <h5>carregando...</h5>
                </div>
           </div>
       </div>
     </div>
  </div><!-- Fim Modal -->


$(document).ready(function(){    
    $('.play').click(function(e) {
        e.preventDefault();

        $.ajax({
            url: 'url...',
            type: 'post',
            data:  {},
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function(){
                $('#modalaguarde').modal('show');
            },success: function(data){
                $('#modalaguarde').modal('hide');
            }
         });
     });
});
php jquery html5 ajax

  • The main div is not closed with </div>.

  • I temporarily removed the response. I had said: "Oh yes, so the story changes rss... makes a test, comments everything inside the Success and leaves only the code that closes the modal to see if it works."

1 answer

0

This behavior may be displayed, when you have a modal hidden at a time when it has not finished opening it may be in a state that will ignore the argument of hide. And in your case it’s related to fade in <div class="modal fade">.

An outline option is to use a setTimeout() to delay the instruction of hide

$(document).ready(function() {
  $('.play').click(function(e) {
      e.preventDefault();        
     
$.ajax({
          url: '#',
          type: 'post',
          data: {},
          dataType: 'json',
          cache: false,
          contentType: false,
          processData: false,
          beforeSend: function() {            
            $('#modalaguarde').modal('show')
          },
          success: function(data) {
            //seu codigo
          },
          error: function(data){
            //tratamento do erro
          },
         complete: function() {
           
            setTimeout(function()
            {            
              $('#modalaguarde').modal('hide');
            }, 2000);
          }
        
      });

      
  });
});
@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Modal aguarde -->
<div class="modal fade" id="modalaguarde" role="dialog" abindex="-1" aria-labelledby="modalAguarde" aria-hidden="true">
  <div class="modal-dialog modal-aguarde modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="text-center">
          <img src="img/carregando.gif" class="modal-img">
          <h5>carregando...</h5>
        </div>
      </div>
    </div>
  </div>
</div>
<button class="play">play</button>
<!-- Fim Modal -->

Browser other questions tagged php jquery html5 ajax

You are not signed in. Login or sign up in order to post.