It looks like the Select & Change / onChange event is not being called for my radion button group. In the SSJS sample below, the onChange event of radio button group should set the value of the edit box and also do a full update. Neither seems to be occurring.
<xp:radioGroup id="radioGroup1">
<xp:selectItem itemLabel="One"></xp:selectItem>
<xp:selectItem itemLabel="Two"></xp:selectItem>
<xp:selectItem itemLabel="Three"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("inputText1").setValue(getComponent("radioGroup1").getValue());}]]></xp:this.action>
</xp:eventHandler>
</xp:radioGroup>
On Select should set this: <xp:inputText id="inputText1"></xp:inputText>
<xp:br></xp:br>
Selected Value: <xp:text escape="true" id="computedField1" style="font-weight:bold"><xp:this.value><![CDATA[#{javascript:return getComponent("radioGroup1").getValue();}]]></xp:this.value></xp:text>
<xp:br></xp:br>
<xp:button value="Update" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
</xp:eventHandler></xp:button>
<xp:br></xp:br>
OnChange event for a radio group doesn't work properly in IE. OnClick event works. So you need to write code based on the browser, as follows.
<xp:radioGroup id="radioGroup1">
<xp:selectItem itemLabel="One"></xp:selectItem>
<xp:selectItem itemLabel="Two"></xp:selectItem>
<xp:selectItem itemLabel="Three"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="panelRadioVal" rendered="#{javascript:!context.getUserAgent().isIE()}" />
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="panelRadioVal" rendered="#{javascript:context.getUserAgent().isIE()}" />
</xp:radioGroup>
<xp:panel id="panelRadioVal">
<xp:inputText value="#{javascript:getComponent('radioGroup1').getSubmittedValue()}" />
</xp:panel>
It looks like your first getComponent in your eventhandler should be "inputText1" not "inputText".
Also, why perform a full update and not a partial refresh? Just trying to understand the business case.
Related
I am working on a XPage.
I have a managedBean for it ContractsBean. In ContractsBean I have a method saveContract().
On the XPage I also have a datasource bound to a document in another NSF, its variable is the standard #{document1}.
Parts of the page data is coming from a NSF file and other parts of the page from DB2.
I am working on saving the page with , some of the data goes to the NSF and the other to DB2. I first worked with the NSF, and saved the data successfully using document1.
I then added a ActionListener to call a event listener and the event listener didn't fire. I remove the save document1 and the ActionListener fires normally.
Is it I cannot have both a xp:this.action and actionListeners in the same event handler?
Any JSF gurus, this may seem familiar...
<xp:button value="Submit" id="btnSubmit"
styleClass="btn green pull-left">
<xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh" immediate="true">
<xp:this.action>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:this.action>
<xp:this.actionListeners>
<xp:actionListener
type="com.page.listeners.SaveContractListener">
</xp:actionListener>
</xp:this.actionListeners>
</xp:eventHandler>
</xp:button>
Now if I do this, remove the xp.this.action it works, the action listener fires.
<xp:button value="Submit" id="btnSubmit"
styleClass="btn green pull-left">
<xp:eventHandler event="onclick" submit="true"
refreshMode="norefresh" immediate="true">
<xp:this.actionListeners>
<xp:actionListener
type="com.page.listeners.SaveContractListener">
</xp:actionListener>
</xp:this.actionListeners>
</xp:eventHandler>
</xp:button>
If I cannot have both in a EventHandler, what is the alternative to use the ActionListener to get a handle to document1 (how?) and save it in my actionListener?
I got it to work using this markup
<xp:button value="Submit" id="btnSubmit"
styleClass="btn green pull-left">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" disableValidators="true" immediate="true">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:actionGroup>
</xp:this.action>
<xp:this.actionListeners>
<xp:actionListener
type="com.page.SaveContractListener">
</xp:actionListener>
</xp:this.actionListeners></xp:eventHandler>
</xp:button>
I have a required Edit Box in a facet of a dynamic content control. Client side validation is disabled. I want to have a cancel button in this facet that will take the user back to the previous facet they were on. The part I cannot figure out is how to tell the Edit Box to not run the validation when the Cancel button is clicked.
Here is my cancel button:
<xp:button value="Cancel" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:getComponent("dc").show(sessionScope.backBtn);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Here is the required edit box:
<xp:inputText id="inputText1" value="#{document1.Vendor}" required="true" disableClientSideValidation="true">
<xp:this.validators>
<xp:validateRequired message="Vendor name is a required field."></xp:validateRequired>
</xp:this.validators>
</xp:inputText>
You need the immediate attribute on true, see example; immediate="true"
<xp:button id="buttonCancel" themeId="Button.Danger">
<i class="fa fa-undo"></i>
<xp:this.value><![CDATA[#{javascript:language.getLanguageString("button.cancel")}]]></xp:this.value>
<xp:eventHandler event="onclick"
submit="true" refreshMode="complete" immediate="true"
save="false">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript
script="#{javascript:viewStateBean.restoreState = true}">
</xp:executeScript>
<xp:openPage
name="/languages.xsp">
</xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
There's a property in the panel on the lefft where you can select not to run validation for the event of this button.
I would like to perform a partial refresh on a second panel after the first partial refresh has completed. This is my code from the source:
<xp:comboBox id="comboBox3" value="#{document1.Company}">
<xp:selectItem itemLabel="Select a Company" itemValue="Select a Company">
</xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var db = sessionScope.serverPath + "!!" + sessionScope.dbName; #Trim(#Unique(#DbColumn(db, "vwTblCompany",1)));}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnlLocation">
</xp:eventHandler>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" disableValidators="true" refreshId="pnlLocation">
<xp:this.action><![CDATA[#{javascript:getComponent("comboBox4").setValue("Select a Location");}]]></xp:this.action>
</xp:eventHandler>
<xp:eventHandler>
<xp:this.onComplete><![CDATA[function() {
XSP.partialRefreshGet("#{id:pnlApprovalInfo}");
}]]></xp:this.onComplete>
</xp:eventHandler>
</xp:comboBox>
The error I get when I click on the keyword field is:
An error occurred while updating some of the page. Cannot read property 'call' of null.
Can someone show me what I'm doing wrong?
Thanks,
Dan
Never mind. I figured out how to do it:
<xp:comboBox id="comboBox3" value="#{document1.Company}">
<xp:selectItem itemLabel="Select a Company" itemValue="Select a Company">
</xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var db = sessionScope.serverPath + "!!" + sessionScope.dbName; #Trim(#Unique(#DbColumn(db, "vwTblCompany",1)));}]]>
</xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="pnlLocation">
<xp:this.onComplete><![CDATA[XSP.partialRefreshGet("#{id:pnlApprovalInfo}")]]></xp:this.onComplete>
</xp:eventHandler>
Added component:
<xp:radioGroup id="radioGroup1" layout="lineDirection">
<xp:selectItem itemLabel="1" itemValue="1"></xp:selectItem>
<xp:selectItem itemLabel="2" itemValue="2"></xp:selectItem>
<xp:selectItem itemLabel="3" itemValue="3"></xp:selectItem>
</xp:radioGroup>
How to add a new selectItem by pressing the button? For ssjs?
Add a selectItems property to radioGroup which reads additional options from a viewScope. Set the viewScope in button and add a new option with Java object SelectItem with label and value:
<xp:radioGroup id="radioGroup1" layout="lineDirection">
<xp:selectItem itemLabel="1" itemValue="1"></xp:selectItem>
<xp:selectItem itemLabel="2" itemValue="2"></xp:selectItem>
<xp:selectItem itemLabel="3" itemValue="3"></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:viewScope.selectItems}]]></xp:this.value>
</xp:selectItems>
</xp:radioGroup>
<xp:button
value="Add option"
id="button1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
if (!viewScope.selectItems) {
viewScope.selectItems = [];
}
viewScope.selectItems.add(new javax.faces.model.SelectItem("Value1", "Label1"));
}]]></xp:this.action>
</xp:eventHandler></xp:button>
Try Knut's answer to Xpages add values into Combo Box. Combo Box and Radio Group both use the same underlying component for options.
If you try to add an xp:selectItem element to the radioGroup component dynamically from the button, the option will only be available for that partial refresh. Refresh an area tat contains the radioGroup again and it will revert to the options specifically coded in your design. If you use a viewScope variable instead, you'll retain the options for the life of the page.
I have an xPage with a couple custom controls. One CC nested inside the other. When I place the xPage into edit mode the innermost CC does not swich to edit mode but it's containing CC does. What am I missing here? The edit button is just a simple 'change document mode' action.
xPage Code
<?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:this.data>
<xp:dominoDocument var="document1" formName="Test"></xp:dominoDocument>
</xp:this.data>
<xp:button value="Edit" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
</xp:this.action></xp:eventHandler></xp:button>
<xp:button value="Submit" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="false" save="true">
</xp:eventHandler>
</xp:button>
<xc:Outer></xc:Outer>
</xp:view>
Outer Custom Control
<?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:this.data>
<xp:dominoDocument var="document1" formName="Test"></xp:dominoDocument>
</xp:this.data>
<xp:table style="border-color:rgb(0,64,128);border-style:solid;border-width:medium">
<xp:tr>
<xp:td>
<xp:label id="label1" value="Outer CC"></xp:label>
</xp:td>
<xp:td>
<xp:button value="Edit" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:changeDocumentMode mode="edit"></xp:changeDocumentMode>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Submit" id="button2"><xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Outer Field" id="label2"></xp:label>
</xp:td>
<xp:td>
<xp:inputText id="inputText1"
value="#{document1.FieldOuter}">
</xp:inputText>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td>
<xc:Inner></xc:Inner></xp:td>
</xp:tr>
</xp:table>
</xp:view>
Inner Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Test"></xp:dominoDocument>
</xp:this.data>
<xp:table style="border-color:rgb(255,128,0);border-style:solid;border-width:medium">
<xp:tr>
<xp:td>
<xp:label value="Inner CC" id="label1"></xp:label>
</xp:td>
<xp:td>
<xp:button value="Edit" id="button1"><xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:changeDocumentMode mode="edit" var="document1"></xp:changeDocumentMode>
</xp:this.action></xp:eventHandler></xp:button>
<xp:button value="Submit" id="button2"><xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="false" save="true"></xp:eventHandler></xp:button></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label value="Field Inner" id="label2"></xp:label>
</xp:td>
<xp:td>
<xp:inputText id="inputText1" value="#{document1.FieldInner}"></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
</xp:view>
Each Custom Control and your xpage all have a datasource but they have the same name and are bound to the same document as they are not ignoring request params. The Change Document Mode button is looking for the first datasource on the page with the var specified and changing that to read only and hence only updating for fields that are bound to that datasource. I would ensure you only have a single datasource with the same name and work it that way.