如何在关闭时将引导模式重置为其原始内容？

Question

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

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

我的模态是表单模态，所以每当我点击提交时，codeigniter 验证消息将通过使用 ajax on 显示<div style="font-size:10px;width:50%;" id="info"></div>。现在，每当我关闭模态时，当我重新打开它时，验证消息都会保留。关闭模态后应该怎么做才能清除它们？

这是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 的 Modal Events。你应该关心这两个：

• hide.bs.modal 当调用 hide 实例方法时，会立即触发此事件。
• hidden.bs.modal 当模态完成对用户隐藏时触发此事件（将等待 CSS 转换完成）​​。

所以，你可以这样做：

$(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.
  });
});