Use befereSend in ajax to make a loading screen in Modal

Question

Use befereSend in ajax to make a loading screen in Modal

Navigation

#1 by (0 votes)

0

I'm trying to make a loading screen using modal and jquery, in that while collecting information from the database, it has to appear loading. But even after it has already loaded, the modal is not disappearing. Here is 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

asked by anonymous 29.11.2018 / 21:00

1 answer

Doubt in use cases, digital bank financial system and credit card How to sum the first 2 occurrences of a column using a key as a reference in SQLServer

score 0 · Answer 1

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

A contour option is to use a setTimeout() to delay the hide statement

$(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><scriptsrc="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 -->