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

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

本文关键字：原始 模式      更新时间：2023-09-26

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

我被这个问题卡住了，还没有找到解决办法。我想把它结束后发生在我的模态中的所有事情都清除掉。

我的模态是一个表单模态，所以每当我单击提交时，代码点火器验证消息都会通过在<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;
  });
});

您可以使用Bootstrap的模式事件。你应该关心这两个：

  • hide.bs.modal调用隐藏实例方法后会立即激发此事件
  • 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.
  });
});
相关文章：