如何在关闭时将 bootstrap 模态重置为其原始内容？

Question

P.S我不太擅长javascript，我知道有人问过这个问题，但解决方案不适用于我的问题，所以我会再问这个问题。

我被这个问题困住了，还没有找到解决办法。我想清除模式关闭后发生的所有事情。

我的模态是一个表单模态，所以每当我点击提交时，codeigniter 验证消息将通过在 <div style="font-size:10px;width:50%;" id="info"></div> 上使用 ajax 来显示。现在，每当我关闭模式时，验证消息在我重新打开时都会保留。关闭模式后应该如何清除这些内容？

这是ajax调用的函数：

public function addcomp () {
  $this->load->library('form_validation');
  $this->load->helper('security');
  $this->form_validation->set_rules('comp_name','Computer Name','trim|required|callback_pc_exist');
  $this->form_validation->set_rules('status','Status','trim|required');
  $this->form_validation->set_rules('location','Location','trim|required');

  if ($this->form_validation->run()) {

    $this->load->model('asset_model');
    $result=$this->asset_model->addpc();

    if (!$result) {
      echo mysqli_error($result);
    } else {
      echo "<div class='alert alert-success alert-dismissable'>
      <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
      Computer Successfully Added!</div>";
    }
  }
  echo validation_errors("<div class='alert alert-danger alert-dismissable'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>","</div>");
}

这是提交调用的ajax：

$(document).ready(function(){
  $("#addpc").submit(function(){
    var formdata=$("#addpc").serialize();
    $.ajax({
      url:"asset_management/addcomp",
      type:"POST",
      data: formdata,
      async: true,
    }).done(function( formdata ) {
      $('#info').html(formdata);
      $("#addpc")[0].reset();
      viewdata();
    });
    return false;
  });
});

Answer 1

你可以利用Bootstrap's Modal Events。你应该关心这两个：

hide.bs.modal This event is fired immediately when the hide instance method has been called.

hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

所以，你可以这样做：

$(function () {
  // Delegating to `document` just in case.
  $(document).on("hidden.bs.modal", "#myModalID", function () {
    $(this).find("#info").html(""); // Just clear the contents.
    $(this).find("#info").remove(); // Remove from DOM.
  });
});

更新

看到你的代码，你可能需要使用这个：

$(function () {
  // Delegating to `document` just in case.
  $(document).on("hidden.bs.modal", "#myModalID", function () {
    $(this).find(".alert-danger").remove(); // Remove from DOM.
  });
});

如何在关闭时将 bootstrap 模态重置为其原始内容？

How to reset bootstrap modal to its original contents on close?

javascript

jquery

twitter-bootstrap

bootstrap-modal