admin管理员组文章数量:1410712
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(); //pletely 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!
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(); //pletely 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!
Share edited Jun 30, 2015 at 12:33 Siguza 24k6 gold badges55 silver badges99 bronze badges asked Mar 23, 2015 at 12:37 tania_stania_s 2071 gold badge5 silver badges13 bronze badges 3- By ‚refresh’ you mean rollback modal content (panels and accordions) to it’s initial state (after first open)? – dzbo Commented Mar 23, 2015 at 12:52
- Yes I am! Exactly :) – tania_s Commented Mar 23, 2015 at 13:29
- Did you have a solution for getting it back a modal back to it's initial state? Thanks! @Dmonix – tania_s Commented Mar 23, 2015 at 14:38
1 Answer
Reset to default 1What I do is before to open the modal, I clean the inputs, so take a look the code: Demo -> http://jsfiddle/s181uj5j/
$('#document').ready(function(){
$('#btn-show-modal').on('click', function(){
$('.modal-input').val('');
});
});
hope it's helps!
本文标签: javascriptRefresh Bootstrap Modal after ClosingStack Overflow
版权声明:本文标题:javascript - Refresh Bootstrap Modal after Closing - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1745044814a2639297.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论