You need to sign in to do that
Don't have an account?
VN
Page getting refreshed on close of modal window.
Hi,
I have a modal window which has a few checkboxes displayed. When i select a few checkboxes and click 'ok' button i want the selected chekboxes to be displayed as tabs. But this is not happening because i believe the whole page is getting refreshed and the variable list storing the selected checkboxes is getting cleared.
How do i stop the page from getting refreshed. I tried using action function but that is not helping either.
The code for tabs display
<div class="tabbable-line tabbable-tabdrop tabbable-custom-profile" id="showcaseTabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tabDashboard" data-toggle="tab"> Dashboard </a>
</li>
<li>
<apex:repeat value="{!selectedTabsList}" var="tabName" id="theRepeat">
<apex:outputLink > {!tabName} </apex:outputLink>
</apex:repeat>
</li>
<li>
<apex:outputLink html-data-target="#displayShowcase" html-data-toggle="modal" >
<i class="fa fa-plus"></i>
</apex:outputLink>
</li>
</ul>
</div>
The modal window code
<div id="displayShowcase" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="pull-right" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-remove font-theme"></i>
</a>
<h4 class="modal-title font-theme">Select Tabs</h4>
</div>
<div class="modal-body">
<apex:pageBlock >
<apex:pageBlockTable value="{!showcaseTabList}" var="showCaseTab" id="table" title="All Showcases">
<apex:column >
<apex:inputCheckbox value="{!showCaseTab.selected}" id="inputId"/>
</apex:column>
<apex:column value="{!showCaseTab.recType}" />
</apex:pageBlockTable>
</apex:pageBlock>
</div>
<div class="modal-footer">
<button class="btn btn-outline btn-theme" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="btnConfirm" class="btn btn-outline btn-theme">OK</button>
</div>
</div>
</div>
</div>
<apex:actionFunction name="chkSelectedTabs" action="{!allSelectedTabs}" rerender="showcaseTabsContainer"/>
the javascript for button click
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous">
</script>
<script>
$(function() {
$("#btnConfirm").on("click", function() {
chkSelectedTabs();
return false;
});
});
</script>
Please advice
I have a modal window which has a few checkboxes displayed. When i select a few checkboxes and click 'ok' button i want the selected chekboxes to be displayed as tabs. But this is not happening because i believe the whole page is getting refreshed and the variable list storing the selected checkboxes is getting cleared.
How do i stop the page from getting refreshed. I tried using action function but that is not helping either.
The code for tabs display
<div class="tabbable-line tabbable-tabdrop tabbable-custom-profile" id="showcaseTabs">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tabDashboard" data-toggle="tab"> Dashboard </a>
</li>
<li>
<apex:repeat value="{!selectedTabsList}" var="tabName" id="theRepeat">
<apex:outputLink > {!tabName} </apex:outputLink>
</apex:repeat>
</li>
<li>
<apex:outputLink html-data-target="#displayShowcase" html-data-toggle="modal" >
<i class="fa fa-plus"></i>
</apex:outputLink>
</li>
</ul>
</div>
The modal window code
<div id="displayShowcase" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="pull-right" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-remove font-theme"></i>
</a>
<h4 class="modal-title font-theme">Select Tabs</h4>
</div>
<div class="modal-body">
<apex:pageBlock >
<apex:pageBlockTable value="{!showcaseTabList}" var="showCaseTab" id="table" title="All Showcases">
<apex:column >
<apex:inputCheckbox value="{!showCaseTab.selected}" id="inputId"/>
</apex:column>
<apex:column value="{!showCaseTab.recType}" />
</apex:pageBlockTable>
</apex:pageBlock>
</div>
<div class="modal-footer">
<button class="btn btn-outline btn-theme" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="btnConfirm" class="btn btn-outline btn-theme">OK</button>
</div>
</div>
</div>
</div>
<apex:actionFunction name="chkSelectedTabs" action="{!allSelectedTabs}" rerender="showcaseTabsContainer"/>
the javascript for button click
<script src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous">
</script>
<script>
$(function() {
$("#btnConfirm").on("click", function() {
chkSelectedTabs();
return false;
});
});
</script>
Please advice
Do you have an element with Id - "showcaseTabsContainer"?
Thanks