I set up a really simple little test page with this code:
<xp:panel id="panelAll">
<xp:panel rendered="#{javascript:(viewScope.vsPanelRed) ? true : false;}" style="background-color:rgb(255,0,0)">
Panel Red
</xp:panel>
<xp:panel
rendered="#{javascript:(viewScope.vsPanelRed) ? false : true;}"
style="background-color:rgb(0,255,0)">
Panel Green
</xp:panel>
</xp:panel>
<xp:br></xp:br>
<xp:panel id="panelMain">
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<![CDATA[XSP.partialRefreshPost('#{id:panelAll}',{clearForm: true});]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel><!-- panelMain -->
the action toggles the viewScope vsPanelRed from true to false and displays either the red panel or the green on. If I use the conventional refreshMode="partial" refreshId="panelAll" on the eventHandler for the onclick the panel toggles if I use the partialResheshPost as the blog says (and I think I have it entered correctly the partial refresh does not happen infact the action to toggle the vsPanelRed does not happen either. So I must have something wrong in the ![CDATA ] but I can't figure out why.
What am I missing?
Sven Hasselbach did not include support for event handlers in his optimized partial refresh. I have extended his solution to include support for this - see my blog post "XPages: Optimized partial refreshes for event handlers".
If you include my optimized version as a xp:scriptBlock on your XPage then you need to change your button to this:
<xp:button value="Label" id="button1">
<xp:eventHandler id="submitEventHandler" event="onclick" submit="false">
<xp:this.script>
<![CDATA[
XSP.partialRefreshPost(
'#{id:panelAll}',
{clearForm: true, submitid: '#{id:submitEventHandler}'}
);
]]>
</xp:this.script>
<xp:this.action><![CDATA[#{javascript:
println( "in Click Button");
if (viewScope.vsPanelRed == true){
viewScope.vsPanelRed = false;
}else{
viewScope.vsPanelRed = true;
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Related
i tried this with sessionScope (didn't work):
The following Tabs should be controllable with the help of variable 'm1':
<xp:tabbedPanel id="tabbedPanel1"
selectedTab="#{javascript:sessionScope.get('m1')}">
<xp:tabPanel label="Config" id="conf">
<xc:k_conf></xc:k_conf>
</xp:tabPanel>
<xp:tabPanel label="Solution" id="sol">
<xc:k_sol></xc:k_sol>
</xp:tabPanel>
</xp:tabbedPanel>
In Control k_conf is a button 'calculate' which performs an agent and then sets the varable 'm1' to 'sol'.
I would expect, that the Tab switches to 'Solution', but nothing happens (although refreshmode="complete").
<xp:button value="calculate" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
...
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
...
agent.runWithDocumentContext(docVG.getDocument());
sessionScope.put("m1","sol");
}]]>
</xp:this.script>
</xp:executeScript>
...
</xp:button>
Another approach was to use component (didn't work because 'show is not allowed for TabPanel'):
<xp:this.action>
<![CDATA[#{javascript:
var c = getComponent("IdofTab");
c.show("IdofTab");
}]]>
</xp:this.action>
That sessionScope approach should work, I just tried it and verified that. Is there some CSJS part to the button eventHandler that is not returning true and thus preventing the SSJS executeScript from being performed?
For the second approach, you can use the setSelectedTab method of the tabbed panel rather than show, for example:
<xp:button id="button2" value="Change Tab 4">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<![CDATA[#{javascript:
var c = getComponent("tabbedPanel1");
c.setSelectedTab("tabPanel4");
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
I got the problem, that my dialog boxes are stacking each time I click the button that opens the dialog. So if I've clicked three times I get this:
I couldn't find out how to prevent this. No matter which button I click (OK does a partial refresh | Abbrechen (Cancel) does a full update) I get another box each time I click the button.
Code of the button that opens the dialog:
<xp:button value="Plan meeting" id="buttonPlanMeeting">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
var c = getComponent("dPlanMeeting")
c.show();
} catch(e) {
dBar.error(location + e);
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Code for the complete dialog box:
<xe:dialog id="dPlanMeeting" title="Plan meeting" keepComponents="true">
<xp:panel>
<xp:text escape="true" id="MBPlanMeeting">
<xp:this.value><![CDATA[#{javascript:specialstrings.getString("ccEsgDocWflContentEditInfos.dPlanMeeting.MBPlanMeeting")}]]></xp:this.value>
</xp:text>
</xp:panel>
<xe:dialogButtonBar>
<xp:button value="Ok" id="buttonDelegateOk" styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
//will create a meeting for every day the visit is registered
var wfDoc:NotesDocument = docApplication.getDocument(true);
specialMeetingCreate(wfDoc);
var c = getComponent("dPlanMeeting");
c.hide();
var c = getComponent("dMeetingCreated")
c.show();
} catch (e) {
dBar.error(location + e);
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="Cancel" id="buttonDelegateCancel" styleClass="lotusFormButton">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
var c = getComponent("dPlanMeeting");
c.hide();
} catch (e) {
dBar.error(location + e);
}
}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xe:dialogButtonBar>
</xe:dialog>
Does this have anything to do with keepComponents? I've tried true and false, but the effect stays the same.
Any idea?
Ok it seems that the solution was just to set "keepComponents = false". I've tried that before, but now it'S working. I get the dialog box only once no matter how often I click the button
I would like to put a combox on an xpages so the user can choose to witch page he wants to go.
for example if he chooses google he would go to google.com etc
I tried :
<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="Google"
itemValue="Google">
</xp:selectItem>
<xp:selectItem itemLabel="Yahoo" itemValue="Yahoo"></xp:selectItem>
<xp:eventHandler event="onchange"
submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var item = getComponent("comboBox1").getValue();
if (item == 'Google') {
window.location.href = 'http://google.com';
};
}]]>
</xp:this.action>
</xp:eventHandler>
</xp:comboBox>
You are mixing server-side Javascript with client-side Javascript.
Do this instead:
<xp:eventHandler event="onchange" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
var item = getComponent("comboBox1").getValue();
if (item == 'Google') {
facesContext.getExternalContext().redirect("http://google.com");
};
}]]></xp:this.action>
</xp:eventHandler>
Try:
facesContext.getExternalContext().redirect("http://example.com")
This and more things are available on xpagescheatsheet.com. Note in addition to the printed cheatsheet there's a link to an online "URL Cheatsheet" that has a bunch or URL Examples.
Bind your combo to a document datasource field or to a scoped variable ?
After I click the button it goes to the next tab, however, if I click the previous tab to edit something then click the button again, nothing happens. Any idea why? Here is the button code:
<xp:button value="Next" id="buttonNext1">
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="panelMain">
<xp:this.action><![CDATA[#{javascript:
viewScope.currentTab = "tpCompanyInformation";
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
I see you bound the SelectedTab or even the defaultTab value of to your viewScope.currentTab and set the viewScope variable in every button with your viewScope.currentTab = "id".
I would recomend setting the tab direct in the component by using getComponent('tabbedPanel').setSelectedTab('tabid').
As a little goody: maby this Code helps you it will Create two buttons ('back' & 'next'), no mather how much tabs you will add to your panel the buttons should always work as forward and backward buttons.
ButtonBack:
<xp:button id="button1" value="back">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="tabbedPanel1">
<xp:this.action><![CDATA[#{javascript:var panel:com.ibm.xsp.component.xp.XspTabbedPanel = getComponent('tabbedPanel1');
var list:Array = panel.getChildren().toArray();
var currentTab = panel.getSelectedTab();
for(var i = 0; i < list.length;i++){
if(currentTab.equals(list[i].id)){
if(i > 0)
panel.setSelectedTab(list[i-1].id);
else
panel.setSelectedTab(list[list.length - 1].id);
}
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Button Next:
<xp:button value="Next" id="buttonNext1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="tabbedPanel1">
<xp:this.action><![CDATA[#{javascript://
var panel:com.ibm.xsp.component.xp.XspTabbedPanel = getComponent('tabbedPanel1');
var i:java.util.Iterator = panel.getChildren().iterator();
var currentTab = panel.getSelectedTab();
while(i.hasNext()){
if(currentTab.equals(i.next().id)){
if(i.hasNext())
panel.setSelectedTab(i.next().id);
else
panel.setSelectedTab(panel.getChildren().iterator().next().id);
}
}
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
Really looking for an idea why my XPage is doing this.
I have field with a dynamic databinding:
<xp:inputText id="CORE_Input" value="#{Document[compositeData.PARA_DataBinding]}"</xp:inputText>
That works quit well until I start to hide it based on a notes formula.
Let me tell what it does: I click a checkbox in my XPage. That checkbox is running SSJS which is calling: Document.getDocument(true) to push the data from my XPage back into the notesdocument without saving it. Once that is done I can use session.evaluate("checkbox!="something"") to hide the inputText field.
It works quit well but the problem is that once I untick the checkbox the value is gone from the inputfield.
If you know a better way to use notes formulas for hiding or the reason why the inputfield is empty once it comes back would be highly appreciated. Here is an example:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:checkBox id="checkBox1" value="#{Document.Check}" text="hide" checkedValue="hide">
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[document.getElementById("#{id:hide}").click()]]></xp:this.script>
</xp:eventHandler>
</xp:checkBox>
<xp:panel id="test">
<xp:inputText id="CORE_Input" type="#{compositeData.NODE}"
value="#{Document[compositeData.PARA_DataBinding]}"
defaultValue="#{javascript:compositeData.PARA_DefaultValue}" style="margin-left:24px">
<xp:this.styleClass><![CDATA[#{javascript:DOMElement.getAttribute("stylesize");}]]></xp:this.styleClass> <xp:this.rendered><![CDATA[#{javascript:var doc:NotesXspDocument=Document;
var erg=session.evaluate('Check="hide"',doc.getDocument());
if(#Text(erg)=="1")
{return false}
else
{return true}}]]></xp:this.rendered>
</xp:inputText>
<xp:button value="hide" id="hide">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="test">
<xp:this.action>
<![CDATA[#{javascript:var doc:NotesXspDocument=Document;doc.getDocument(true)}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:button value="unhide" id="unhide">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="test">
<xp:this.action><![CDATA[#{javascript:sessionScope.hide=""}]]></xp:this.action>
</xp:eventHandler></xp:button>
</xp:panel></xp:view>
The problem you have is your default value: As soon the component is unhidden, the value is recalculated. You have to check if the component is partially refreshed. If so, stop the recalculation:
<xp:this.defaultValue>
<![CDATA[#{javascript:
importPackage( com.ibm.xsp.ajax );
if( AjaxUtil.isAjaxPartialRefresh(facesContext) == true )
return;
compositeData.PARA_DefaultValue
}]]>
</xp:this.defaultValue>
This should solve your problem