使用 bootstrap + jQuery 重置模态数据
Reset modal data with bootstrap + jQuery
我有一个使用 Bootstrap bootstrap-transition.js v2.3.1
、bootstrap-modal.js v2.2.0
、jQuery jQuery JavaScript Library v2.1.3
的 MVC 5 c# 项目,最后是 select2 Version: 3.5.2
.
在这个项目中,我有一个包含以下信息的模态:
<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
</div>
<div class="modal-body" data-val="@Model.packageId">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Package Name: </label>
<div class="controls">
<input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder" value="@Model.pkgNameValue">
</div>
</div>
<div class="control-group">
<label class="control-label">Select the materials:</label>
<div class="controls">
<input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
</div>
</div>
</div>
</div>
在 cshtml 中,我使用这两行渲染模型:
ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true);
Html.RenderPartial("_ModalPackagePopup", createModal);
当我第一次打开模式时,它是空的,这很好。但是,如果我更改其中一个字段,将其关闭并再次打开,旧信息仍然存在。我想避免这种行为,我想在关闭时重置模态的信息。
为了实现这一点,我尝试了本次讨论中的所有解决方案,但都没有成功:
- how to destroy bootstrap modal window completely?
将包名称字段更改为空很容易,我只需要 $(#createPkgModal input#package-name).val('')
就可以了,但是使用 select2 的其他字段不受此更改的影响。
如何解决这个问题并在每次关闭时重置模态的数据?
可能有很多方法可以重置模态的数据,但是,我使用的是 jQuery 并使用 $(#fieldId).val('');
.
手动重置每个字段
对于 select2,我不得不为此使用 selecte 的变体:$('#fieldId').select2('data', null);
我有一个使用 Bootstrap bootstrap-transition.js v2.3.1
、bootstrap-modal.js v2.2.0
、jQuery jQuery JavaScript Library v2.1.3
的 MVC 5 c# 项目,最后是 select2 Version: 3.5.2
.
在这个项目中,我有一个包含以下信息的模态:
<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
</div>
<div class="modal-body" data-val="@Model.packageId">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Package Name: </label>
<div class="controls">
<input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder" value="@Model.pkgNameValue">
</div>
</div>
<div class="control-group">
<label class="control-label">Select the materials:</label>
<div class="controls">
<input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
</div>
</div>
</div>
</div>
在 cshtml 中,我使用这两行渲染模型:
ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true);
Html.RenderPartial("_ModalPackagePopup", createModal);
当我第一次打开模式时,它是空的,这很好。但是,如果我更改其中一个字段,将其关闭并再次打开,旧信息仍然存在。我想避免这种行为,我想在关闭时重置模态的信息。
为了实现这一点,我尝试了本次讨论中的所有解决方案,但都没有成功:
- how to destroy bootstrap modal window completely?
将包名称字段更改为空很容易,我只需要 $(#createPkgModal input#package-name).val('')
就可以了,但是使用 select2 的其他字段不受此更改的影响。
如何解决这个问题并在每次关闭时重置模态的数据?
可能有很多方法可以重置模态的数据,但是,我使用的是 jQuery 并使用 $(#fieldId).val('');
.
对于 select2,我不得不为此使用 selecte 的变体:$('#fieldId').select2('data', null);