AJAX返回后关闭Bootstrap Modal

时间:2018-05-13 21:27:26

标签: jquery bootstrap-modal

我有一个Bootstrap 3模式,它有通过数据属性传递给它的数据,这些数据是从服务器中动态检索的,所以它不是静态的html。然后,我使用表单按钮以异步方式向PHP提交数据。

所有这一切都很好唯一的问题是当我按下提交时我似乎无法隐藏模态我尝试了一些没有成功的事情。

因此将内容传递给modal(这不是静态的,而是从AJAX数据中检索):

$('#myModal').on('show.bs.modal', function (e) {
  var ID = $(e.relatedTarget).attr('data-id');
  var URL = $(e.relatedTarget).attr('data-url');
  $(this).find('#id').val(ID);
  $(this).find('#url').val(URL);
});

这是提交功能:

$(document).ready( function() {
  $('.modal form').on('submit', function(event) {
    event.preventDefault()
    $.post( $(this).attr('action'), $(this).serialize(), function(data) {
      console.log(data)
      if(data.return===true) {
        $('#myModal').modal('hide');
      } else {
        alert('error');
      }
    }, 'json')
  })
});

模态:

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;    </button>
        <h4 class="modal-title">ID: <span class="ID"></span> <span class="URL"></span></h4>
      </div>
      <div class="modal-body">
        <form class="form-inline" action="print.php">
          <div class="form-group">
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="url" id="url">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我的模态ID是myModal,也没有在Web控制台中记录任何内容,但是我可以看到响应有效负载,它确实包含我设置的“done”值。

enter image description here

任何帮助都会受到赞赏。

0 个答案:

没有答案