Bootstrap remove modal content issue

Question

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:

<div class="modal fade popup" id="popupSelect">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a>
        <h4 class="modal-title">Select meal</h4>
    </div>
    <div class="modal-body-select">
        <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Category</label>
            <div class="col-lg-10">
                <select name="selectCategory" class="form-control selectCategory"
                    id="selectCategory">
                    <option value="0">Select category</option>
                    <c:forEach items="${categories}" var="category">
                        <option value="${category.text}">${category.value}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <br>
        <div class="form-group">
            <label for="select" class="col-lg-2 control-label">Meal</label>
            <div class="col-lg-10">
                <select name="selectMeal" class="form-control idMeal" id="selectMeal">
                    <option value="0">Select meal</option>
                </select>
            </div>
        </div>
        <input type="hidden" value="-1" id="hSelectIndex"/>
    </div>

    <div class="modal-footer">
        <a href="" class="btn btn-warning buttons" data-dismiss="modal">Close</a>
        <input type="button" class="btn btn-warning buttons btnSaveChanges"
            value="Save Changes" />
    </div>
</div>

First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time. I tried to remove the data content using:

 function removeModalContent(){
    $('#popupSelect').on('hidden', function () {

        $(this).removeData();

    });
}

But it is not working! What i am doing wrong? Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".

Answer 1

I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden , it is hidden.bs.modal (See Bootstrap Docs , under heading 'Events'). So this...

$('#popupSelect').on('hidden', function () {...

will not fire. Change it to...

$('#popupSelect').on('hidden.bs.modal', function () {...

I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.

Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.

Answer 2

When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:

1) Subscribe to button click event in order to show the modal window:

$("#btnSearchCustomer").click(function () {
        searchCustomers($(this));
    });

2) The function searchCustomers shows the pop-up window.

function searchCustomers(btn) {
    btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
    clearSearchForm(); // clears any user input
    // checks if the modal has all the data loaded (to avoid loading on start)
    if (!searchForIsLoaded) {
        loadSearchForm(); // loads any necessary data from the DB using AJAX
        searchForIsLoaded = true;
    }
    $('#mdlSearchForm').modal('show'); // shows the modal window
    btn.removeAttr("disabled"); // enables the button again
}

You need to implement the function clearSearchForm for cleaning any field the user has modified.

3) Subscribe to OK button on modal window and do something with user input

4) Hide modal form

I hope it helps