I have some strange behavior that involves bootstrap modals on my XPages. Perhaps one of you might be able to shed some light on what's causing it.
I have two bootstrap modals:
<xc:ccSYS_BS_Modal modalSize="regular" modalAllowESC="true"
modalAnimated="yes" modalID="newAssetModal"
modalTitle="Create Asset">
<xp:this.facets>
<xc:ccNewDocModalButtons xp:key="modalFooterFacet" />
<xc:ccNewAssetModalForm xp:key="modalContentFacet" />
</xp:this.facets>
</xc:ccSYS_BS_Modal>
<xc:ccSYS_BS_Modal modalSize="regular" modalAllowESC="true"
modalAnimated="yes" modalID="newCompanyModal"
modalTitle="Create Company">
<xp:this.facets>
<xc:ccNewDocModalButtons xp:key="modalFooterFacet" />
<xc:ccNewCompanyModalForm xp:key="modalContentFacet" />
</xp:this.facets>
</xc:ccSYS_BS_Modal>
These are derived from a custom control with the following custom properties: modalAllowEsc, modalAnimated, modalID, modalSize and modalTitle.
Here is the source for the ccNewAssetModalForm:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:panel id="pnlNewAssetModal">
<xp:this.data>
<xp:dominoDocument var="assetDoc" formName="tblAsset">
<xp:this.databaseName><![CDATA[#{javascript:var db = sessionScope.serverPath + "!!" + sessionScope.dbName;return db;}]]></xp:this.databaseName>
</xp:dominoDocument>
</xp:this.data>
<xp:label styleClass="text-muted" value="Asset Class"
id="label1">
</xp:label>
 
<br></br>
<xp:inputText id="inputText1" value="#{assetDoc.AssetClass}">
<xp:this.attrs>
<xp:attr name="placeholder"
value="Enter the Asset Class">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
<br></br>
<xp:label styleClass="text-muted" value="Asset Life"
id="label2">
</xp:label>
<br></br>
<xp:inputText id="inputText2" value="#{assetDoc.AssetLife}">
<xp:this.attrs>
<xp:attr name="placeholder"
value="Enter the Asset Life">
</xp:attr>
</xp:this.attrs>
</xp:inputText>
<br></br>
</xp:panel>
</xp:view>
The source for the ccNewCompanyModalForm is:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:panel id="pnlNewCompanyModal">
<xp:this.data>
<xp:dominoDocument var="companyDoc"
formName="tblCompany">
<xp:this.databaseName><![CDATA[#{javascript:var db = sessionScope.serverPath + "!!" + sessionScope.dbName;return db;}]]> </xp:this.databaseName>
</xp:dominoDocument>
</xp:this.data>
<xp:label styleClass="text-muted" value="Company Name" id="label4"> </xp:label>
<br></br><xp:inputText id="inputText4" value="#{companyDoc.CompanyName}">
<xp:this.attrs>
<xp:attr name="placeholder" value="Enter the Company Name"></xp:attr>
</xp:this.attrs>
</xp:inputText>
<br></br>
<xp:label styleClass="text-muted" value="Company Code" id="label5"></xp:label>
<br></br><xp:inputText id="inputText5" value="#{companyDoc.CompanyCode}">
<xp:this.attrs>
<xp:attr name="placeholder" value="Enter the Company Code"></xp:attr>
</xp:this.attrs>
</xp:inputText>
<br></br>
<xp:label styleClass="text-muted" value="Clearing Code" id="label3"></xp:label>
<br></br><xp:inputText id="inputText3" value="#{companyDoc.ClearingCode}">
<xp:this.attrs>
<xp:attr name="placeholder" value="Enter the Clearing Code"></xp:attr>
</xp:this.attrs>
</xp:inputText>
<br></br>
</xp:panel>
</xp:view>
My call to the first modal is:
<xp:link escape="true" text="" id="link5"
style="color:#4A4A4A">
<i class="fa fa-plus"></i>
<xp:this.attrs>
<xp:attr name="data-toggle"
value="modal">
</xp:attr>
<xp:attr name="data-target"
value="#newAssetModal">
</xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onclick" refreshMode="partial" execMode="partial"
onComplete="x$('#{id:newAssetModal}').modal();"
refreshId="pnlNewAssetModal" disableValidators="true">
</xp:eventHandler>
</xp:link>
The call to the second modal is:
<xp:link escape="true" text="" id="link6"
style="color:#4A4A4A">
<i class="fa fa-plus"></i>
<xp:this.attrs>
<xp:attr name="data-toggle"
value="modal">
</xp:attr>
<xp:attr name="data-target"
value="#newCompanyModal">
</xp:attr>
</xp:this.attrs>
<xp:eventHandler event="onclick"
execMode="partial" submit="true" refreshMode="partial"
onComplete="x$('#{id:newCompanyModal}').modal();"
refreshId="pnlNewCompanyModal" disableValidators="true">
</xp:eventHandler>
</xp:link>
When I click on the first link, it opens the Create Asset modal and when I save it, it creates TWO documents - one with the asset form and the other with the company form.
The ccNewDocModalButtons is common to both:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:ccSYS_BS_Column>
<xc:this.columnOffset>
<xc:columnOffset mobileDevice="0" tabletDevice="0"
desktopDevice="0" desktopDeviceLarge="0">
</xc:columnOffset>
</xc:this.columnOffset>
<xc:this.columnWidth>
<xc:columnWidth mobileDevice="12" tabletDevice="12"
desktopDevice="12" desktopDeviceLarge="12">
</xc:columnWidth>
</xc:this.columnWidth>
<button type="button" class="btn btn-danger alert-danger pull-left"
data-dismiss="modal" aria-hidden="true" >Cancel</button>
<xp:button value="Save" id="button1" styleClass="btn btn-primary pull-right">
<xp:eventHandler event="onclick" refreshMode="complete" immediate="false" save="true"></xp:eventHandler>
</xp:button>
</xc:ccSYS_BS_Column>
</xp:view>
I can't for the life of me see why that's happening. If I hide the second modal and the link that calls it, only one document is created.
Obviously, I'm missing something elementary :) I'd appreciate your assistance.
Thanks,
Dan
