I have a page and it shows a modal with 2 buttons, one of confirmation and another of canceling, according to the code Below:
Within this modal I have a DIV <div class="resp"></div>
This div I get a response from a page in PHP , I would like to hide the 2 BUTTONS I have inside this modal and after receiving the response from the php page show another button to close this modal.
How can I do this?
<!-- Modal -->
<div class="modal fade" id="md-default" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="i-circle primary"><i class="fa fa-check"></i></div>
<h4>Confirma o envio?</h4>
<div class="resp"></div>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary btn-flat enviar" >Sim</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Ajax call code
<script>
$('.formulario').submit(function() {
var form_data = new FormData();
form_data.append('fileUploadAudio', $('input.fileUploadAudio').prop('files')[0]);
form_data.append('titulo', $('input.titulo').val());
form_data.append('mensagem', $('textarea.mensagem').val());
form_data.append('tipo_notificacao', $('input.tipo_notificacao').val());
$.ajax({
url: 'postar.php', // caminho para o script que vai processar os dados
type: 'POST',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(response) {
$('.resp').html(response);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
return false;
});
</script>
Test page: LINK