javascript - 隐藏按钮并使用 ajax 启用另一个按钮

Question

我有一个页面，显示模态 2 按钮、确认和取消，如下代码所示:在此模态中有一个 DIV <div class = "resp"> </ div>这个 div 我从 PHP 中的页面获得响应，我会隐藏此模式中的 2 个按钮，并在收到来自 php 页面的响应后显示另一个按钮来关闭此模式。我怎样才能做到这一点？

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

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

我的页面正在运行 LINK

Answer 1

首先给这两个按钮一些id，例如

<button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id="cancelButton">Cancelar</button>
<button type="submit" class="btn btn-primary btn-flat enviar" id="submitButton">Sim</button>

然后我们将在成功函数中隐藏这些按钮并添加新的按钮用于关闭(根据您的需要更改关闭按钮的HTML) .

$.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) {

       closeButton = '<button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id = "closeButton">Close</button>'
       $('#cancelButton').hide();
       $('#submitButton').hide();
       $('.resp').html(response);
       $('.modal-footer').append(closeButton);
   },
   error: function(xhr, status, error) {
       alert(xhr.responseText);
   }
});