How to verify modal closure

Navigation
2

Via Ajax I register items in the database and return a certain value to the user through a modal using innerHTML . Then the html of the modal is filled with the values that I pulled from the bank.

I put a .gif for when the modal open the user understands that something is being loaded. After that, this .gif is replaced by the bank values.

When I make a new request, the modal is again opened and since the " html " of it has already been filled (in the last request), it opens with the values of the last innerHTML done. After a delay of 1, 2s is that the content is rewritten with the new values.

MY AJAX: 

 //CHAMA O AJAX
  $.ajax({           
    url: '<?php bloginfo("template_url") ?>/consulta.php',
    type: 'POST',                    
    data: 'nome=' + $("#nome").val() + '&email=' + $("#email").val() + '&telefone=' + $("#telefone").val() + '&experiencia=' + $("#experiencia").val() + '&altura=' + $("#altura").val() + '&peso=' + $("#peso").val(),      
    error: function(){
        alert('ERRO!!!');
    },
    success: function(data){
         $('#modelo_prancha').html(data);   //IMPRIME O RESULTADO DENTRO DO MODAL    
        }              
    });

$("#ajax-modal").modal('show');   //ABRE O MODAL

//RESETA O FORMULÁRIO
$(':input','#myForm')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
} 
});

MODAL: 

<div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="col-md-12 conteudo-modal">
            <div class="col-md-6 col-sm-12 texto">
              <div id="texto_modal">    
                  <p id="modelo_prancha">
                    <img src="carregando.gif"><!-- aqui, o .gif é substituído pelos dados do banco --> 
                  </p>
              </div>
            </div>              
        </div>
       </div>   
      <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
      </div>    
   </div>
  </div>
</div>

To solve this, I thought about capturing the modal closure and putting .gif back on. 

 if(modal == "fechado"){
     $('#modelo_prancha').html("carregando.gif"); //Aqui eu insiro o .gif após o modal ser fechado
 }

My problem: The modal opens with a gif. The gif is replaced by data that comes from the bank. The modal is opened, the database data is replaced (after delay of 1, 2s) by new data coming from the database and so on.

As I thought of solving: After closing the modal I enter .gif again in modal

How can I do this? or.. How can I solve this problem?

- UPDATE - RESOLVED -

('# ajax-modal'). On ('hide.bs.modal', function (event) {     $ ('# template_patch'). html (''); // First I zero the content        $ ('# template_patch'). append (''); // Then I call the gif

})

    
asked by anonymous 07.07.2016 / 20:48

1 answer

2

You can use the hide.bs.modal event to detect that the modal has been closed. 

$('#myModal').on('hide.bs.modal', function (event) {
  //executar algo...
  alert('modal fechou');
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Exibir modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Título do modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>
    
07.07.2016 / 21:03
Return id or name of the dynamic object that was clicked PHP function always returning NULL