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
})