XPages Bootstrap Modal

Question

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>
    &#160;
    <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

Answer 1

You're also not setting ignoreRequestParams on the data sources, so you may get problems editing existing documents (you'll be saving the querystring document instead of creating new ones)

Answer 2

It seems both datasources are submitted. There is an action for a button to saveDocument with var parameter, where you can specify which datasource you want to save. So I think you end up with 2 save buttons, which are shown conditionally and save a datasource. Here an example to save a specific datasource

<xp:button value="Save" id="button1" styleClass="btn btn-primary pull-right">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
  <xp:this.action>
   <xp:actionGroup>
    <xp:saveDocument var="assetDoc"></xp:saveDocument>
   </xp:actionGroup>
  </xp:this.action>
 </xp:eventHandler>
</button