2

Via Ajax eu cadastro itens no banco de dados e retorno um determinado valor para o usuário através de um modal usando o innerHTML. Feito isso o "html" do modal está preenchido com os valores que puxei do banco.

Eu coloquei um .gif para quando o modal abrir o usuário compreenda que algo está sendo carregado. Após isso, esse .gif é substituído pelos valores do banco.

Quando eu faço uma nova requisição, o modal novamente é aberto e como o "html" dele já tinha sido preenchido(na última requisição), ele abre com os valores do último innerHTML feito. Depois de um delay de 1, 2s é que o conteúdo é reescrito com os novos valores.

MEU 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>

Para resolver isso, eu pensei em capturar o fechamento do modal e colocar novamente o .gif.

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

Meu problema: O modal é aberto com um gif. O gif é substituido por dados que vem do banco. O modal é aberto, os dados do banco é substituído (após delay de 1, 2s) por novos dados que vem do banco e assim sucessivamente.

Como pensei em resolver: Após fechar o modal eu insiro o .gif novamente dentro do modal

Como posso fazer isso? ou.. Como posso solucionar esse meu problema?

--UPDATE - RESOLVIDO--

('#ajax-modal').on('hide.bs.modal', function (event) { $('#modelo_prancha').html(' '); //Primeiro eu zero o conteúdo $('#modelo_prancha').append(''); //Depois eu chamo o gif

})

1 Resposta 1

3

Você pode usar o evento hide.bs.modal para detectar que o modal foi fechado.

$('#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>

1
  • 1
    Muito obrigado @abfurlan! Coloquei o código na minha pergunta, vlw!!
    – Zkk
    Commented 7/07/2016 às 19:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .