Refresh Bootstrap Modal after Closing

Question

I have a modal with two panels (accordion-toggle), and after I close the modal and re-open it. Everything is still there, such as: data, panels are still opened, etc. I don't want my parent page to re-load/refresh, I just want my modal to.

I have tried the following and so far no luck:

document.location.reload(); //this refreshes parent page...don't want

var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle'); //does nothing

$('#elementId').empty(); //completely destroys my modal, don't want

$('#elementId').on('hidden.bs.modal', function () {
$('#elementId').removeData('bs.modal');}); //does nothing

data-cache="false" //put in HTML, does nothing

***Update**** Here is my HTML code, as requested. It has a lot of dropdowns (bootstrap multiselect plugin), two panels and a button on the footer.

I would like to have my panels collapsed and my dropdowns cleared when the modal is either closed/opened. In other words, revert back to it's original state.

<div class="modal fade in" aria-hidden="false" id="setEventConditionsModal" data-backdrop="static">
    <div class="modal-backdrop fade in" style="height: 100%"></div>
    <div class="modal-dialog" style="left: 0!important; width: 65%">
        <div class="modal-content" style="width: 100%">
            <div class="modal-header">
                <button type="reset" class="close" data-toggle="modal" data-dismiss="modal" id="closeModal">x</button>
                <div>
                    <div>
                        <h4 class="modal-title">Events</h4>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h3 class="panel-title text-left"> <a class="accordion-toggle accordion-toggle-styled collapsed" id="test" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <i class="fa fa-plus-circle pull-right"></i> Selected Events </a> </h3>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body text-left" id="demo"></div>
                    </div>
                </div>
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h3 class="panel-title text-left"> <a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <i class="fa fa-plus-circle pull-right"></i> Edit Conditions </a> </h3>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" style="margin-bottom: -25px">
                        <div class="panel-body text-left">
                            <div class="col-md-4">
                                <label>Creditor Name Match</label>
                                <select id="creditorName-dropdown"></select>
                                <p></p>
                                <label>Client</label>
                                <select id="client-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label style="margin-top: 7px">Accuracy</label>
                                <select id="accuracy-dropdown"></select>
                            </div>
                            <div class="col-md-4">
                                <label>Chapter</label>
                                <select id="chapter-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label>Division</label>
                                <select id="division-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label style="margin-top: 2.5%">Workflow</label>
                                <select id="workflow-dropdown"></select>
                            </div>
                            <div class="col-md-4">
                                <label>Jurisdiction</label>
                                <select id="jurisdiction-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label>Unit</label>
                                <select id="unit-dropdown" multiple="multiple"></select>
                            </div>
                        </div>                            
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="submit" id="insertButton" class="btn btn-success"><i class="fa fa-floppy-o"></i> Save</button>
            </div>
        </div>
    </div>
</div>

Can anyone help me please!?

Thank you in advance!

Answer 1

What I do is before to open the modal, I clean the inputs, so take a look the code: Demo -> http://jsfiddle.net/s181uj5j/

$('#document').ready(function(){
    $('#btn-show-modal').on('click', function(){
        $('.modal-input').val('');
    });
});

hope it's helps!