How to check the modal closure

Question

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

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

When I make a new request, the modal again is opened and as the "html" of it had already been filled (on the last request), it opens with the values of the last innerHTML done. After a delay of 1, 2s 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 of capturing the closing of the modal and putting again the .gif.

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

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

How I thought to settle: After closing the modal I insert the .gif again within the modal

How can I do that? or. How can I solve my problem?

--UPDATE - RESOLVED--

('#ajax-modal'). on('Hide.bs.modal', Function (Event) { $('#template board'). html(' '); //First I zero the content $('#template board'). append(''); //Then I call gif

})

Answer 1

You can use the event Hide.bs.modal 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>
<script src="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>