Bootstrap modal 不更新 adminlte 中的内容和重置表单

Question

当我打开带有数据的模态并关闭它并再次打开时，form 不会 reset 并显示 old 数据我该如何修复它并初始化表单数据？

我使用 bootstrap v3.3.7 和 adminlte v2

模态 html:

<div class="modal fade" id="new" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img src="/image/loading.gif" class="loading"/>
                <span>Lodaing . . .</span>
            </div>
        </div>
    </div>
</div>

点击按钮：

<button href="/edit/id" data-target="#new" data-toggle="modal" type="button" class="btn btn-success">Edit</button>

使用 spring boot 控制器打开模态内容：

@RequestMapping(value =  "/edit")
public String edit(Model model,
                   @ModelAttribute(value = "id") String paramId){


    if (paramId == 0){
        //open modal without data...
    }

    if (paramId != 0){
        //open modal with data...
    }


    model.addAttribute("edit", data);

    return "view/edit"; //open modal html template

}

Answer 1

将此放在您页面的 javascript 中，以在关闭时清除模态内容：

$(document).on('hidden.bs.modal', '.modal', function (e) {
    // Handles the event thrown when a modal is hidden
    $(this).removeData('bs.modal');
    $(this).find(".modal-content").empty();
});

Answer 2

很明显，每次打开和关闭模态时，模态内容都会保留，您应该使用以下代码清除模态内容：

$(document).on('hidden.bs.modal', '.modal', function (e) {
    $(this).find(".modal-content").empty();
    $(this).removeData('bs.modal');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button href="/edit/id" data-target="#new" data-toggle="modal" type="button" class="btn btn-success">Edit</button>
<div class="modal fade" id="new" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img src="/image/loading.gif" class="loading"/>
                <span>Lodaing . . .</span>
            </div>
        </div>
    </div>
</div>

Bootstrap modal 不更新 adminlte 中的内容和重置表单

Bootstrap modal does not update content and reset form in adminlte

jquery

spring-boot

bootstrap-modal

adminlte