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 ?
Related
I have enabled a partial refresh at the combo box change event.it refreshes other fields. but on change of combo box value the refresh is taking alot of time and it gives me popup alert"An error occured while updating some of the page, timeout exceed."
<xp:comboBox
id="access_status"
value="#{document1.access_status}"
style="font-size:7pt;width:109.0px"
defaultValue="New">
<xp:selectItem
itemLabel="New"
itemValue="New"
id="selectItem2">
</xp:selectItem>
<xp:selectItem
itemLabel="Change required"
itemValue="Change required"
id="selectItem3">
</xp:selectItem>
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="access_type_email"
disableValidators="true">
</xp:eventHandler>
</xp:comboBox>
<xp:checkBox text="Email" id="access_type_email"
checkedValue="Yes" value="#{document1.access_type_email}" style="font-size:7pt">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="panel_request_information"
disableValidators="true" id="eventHandler1">
</xp:eventHandler>
</xp:checkBox>
Add execMode="partial" execId="access_status" to your comboBox eventHandler:
<xp:comboBox
...
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="access_type_email"
disableValidators="true"
execMode="partial"
execId="access_status">
</xp:eventHandler>
</xp:comboBox>
It will send only the value of your combobox to server for partial refresh, not all other fields. Maybe the other fields in form need too much time for a full submit...
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 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>
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>