Hide buttons and Enable Other with ajax

0

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

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

    
asked by anonymous 23.08.2016 / 04:07

1 answer

0

I would make the following change in your HTML, leave the div.resp with display:none , and leave a button[data-dismiss=modal] inside it, along with a div.msg, when ajax gives the answer, you add the answer inside of this div.msg and a fadeIn in div.resp , and a fadeOut in div.modal-footer , the 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 in this way the event in button[data-dismiss=modal] would already be working, due to the bootstrap call when loading the page, if you leave to put this button next to the message, you must add the event to the button, which would have a rework.

I hope this can help.

    
23.08.2016 / 13:47