Reset modal data with bootstrap + jQuery

Question

I have a MVC 5 c# project using Bootstrap bootstrap-transition.js v2.3.1, with bootstrap-modal.js v2.2.0, jQuery jQuery JavaScript Library v2.1.3 and finally, select2 Version: 3.5.2.

In this project, the I have a modal with the following information:

<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>

And in the cshtml, I render the model using these two lines:

 ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true);
    Html.RenderPartial("_ModalPackagePopup", createModal);

When I open the modal for the first time, it is empty, which is good. However if I change one of the fields, close it and re-open it again, the old information is still there. I want to avoid this behaviour, I want to reset the modal's information when it is closed.

To achieve this i tried every solution in this discussion, but without success:

how to destroy bootstrap modal window completely?

Changing the package name field to empty is easy, I just do $(#createPkgModal input#package-name).val('') and it works, however the other field, which uses select2, is not affected by this change.

How can I fix this and reset the modal's data everytime I close it?

http://stackoverflow.com/questions/15205262/resetting-select2-value-in-dropdown-with-reset-button — Linesofcode, Jan 28 '15 at 16:44
Wow... easier than expected xD if you post that as an answer, I will accept it :D Can't believe I searching in the wrong tree :P — Flame_Phoenix, Jan 28 '15 at 16:50

score 0 · Accepted Answer · answered Jun 03 '15 at 10:30

There may be many ways in which one can reset a modal's data, however, the onse I used was to use jQuery and manually reset every field using $(#fieldId).val('');.

In the case of select2, I had to use the selecte's variant for this: $('#fieldId').select2('data', null);

Reset modal data with bootstrap + jQuery

1 Answers1