Hide Buttons and Enable Other with ajax

Question

I have a page and in it I display a modal with 2 buttons, a confirmation and another cancellation, as code Below: Inside that modal I have a DIV <div class="resp"></div> This div I get a reply from a page on PHP, I would like to hide the 2 BUTTONS I have inside this modal and after receiving the answer from the page php show another button to close this modal. How Can I Do That?

<!-- 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">&times;</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 -->

Code of the call ajax

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

Page for testing: LINK

Answer 1

I would make the following change in your HTML, leave the div.resp with display:none, and would leave a button[data-dismiss=modal] inside it, along with a div.msg, when the ajax gives the answer, you add the answer inside that div.msg and of the one fadeIn in div.resp, and a fadeOut in div.modal-footer, HTML would look like this:

<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">&times;</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" style:"display:none">
                  <div class="msg"></div>
                  <button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancelar</button>
               </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>

Because that way the event in button[data-dismiss=modal] would already be working, due to the bootstrap call when loading the page, if left to put this button only after next to the message, you have to add the event to the button, which would have a rework.

I hope this can help.