时间戳

首页 > 解决方案 > Bootstrap modal 不会在 adminlte 中更新内容和重置表单

jquery - Bootstrap modal 不会在 adminlte 中更新内容和重置表单

问题描述

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

我使用 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

}

标签： jqueryspring-bootbootstrap-modaladminlte

解决方案

将其放入页面的 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();
});

推荐阅读