Section close/open with partial refresh - xpages

I have a section in my xpage, it's open by default. When i close the section and make a partial refresh it opens the section again.
Is there a easy way the prevent this.

Hehe, according to your problem i build a small XPage to test what i commented here is what i got:
<xp:panel id="refresh">
<xp:section id="section1" initClosed="false">
<xp:panel id="innerRefresh">Section content</xp:panel>
</xp:section>
</xp:panel>
<xp:button value="refresh inner div" id="button3">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="innerRefresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="refresh outer div" id="button4">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="refresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button value="refresh section" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="section1">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:button value="full refresh" id="button2">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler></xp:button>
By trying to refresh the sction in differen ways i saw nothing unusual if i pressed each button once or twice with about one secound in between, but if you press the button "refresh section" multiple times the section opens again. This effekt works in my IE8 and Firefox 19.0.2. I would recomend using a panel/div around your section and refresh it instead of the section direkt.
Update:
Try this, it creates up to 3 sections dynamical and each refreshable by its own button, and they will stay closed,
<xp:this.beforePageLoad><![CDATA[#{javascript:var sectioncount:java.util.Vector = #Explode("1,2,3",",");
viewScope.put("sectioncount",sectioncount);
viewScope.put("selectedSection", sectioncount)
}]]></xp:this.beforePageLoad>
<xp:checkBoxGroup id="checkBoxGroup1"
value="#{viewScope.selectedSection}">
<xp:this.defaultValue><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.defaultValue>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:// full update //partial update}]]></xp:this.action>
</xp:eventHandler>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.value>
</xp:selectItems>
</xp:checkBoxGroup>
<xp:repeat id="repeat2" rows="30" var="varcollection"
repeatControls="true">
<xp:this.value><![CDATA[#{javascript:return viewScope.get( "sectioncount" );}]]></xp:this.value>
<xp:panel>
<xp:this.rendered><![CDATA[#{javascript:var vec:java.util.Vector = viewScope.get( "selectedSection" );
return #IsMember(varcollection,vec);
}]]></xp:this.rendered>
<xp:button value="refresh this section:" id="button3">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="refresh">
<xp:this.action><![CDATA[#{javascript://refresh}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:panel id="refresh">
<xp:section id="section1" initClosed="false">
<xp:panel id="innerRefresh">
<xp:text>
<xp:this.value><![CDATA[#{javascript:var date:java.util.Date = new java.util.Date;
return date.toTimeString()}]]></xp:this.value>
</xp:text></xp:panel>
</xp:section>
</xp:panel>
</xp:panel>
</xp:repeat>

Related

checkbox control not calculating value consistently

I want to use the feature of the checkbox control by using SSJS to return "true" or "false" based on the value of a session variable. The calculation only runs when the page is completely refreshed. The code does not on a partial or full refresh once the page is loaded (The only exception is that the code will run on the first partial or full refresh - which is interesting). I wrote a quick demonstration program.
I am sure this has something to do with the JSF lifecycle, but am not sophisticated in the technology to decipher what is going on.
Thanks,
---Lisa&
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.beforeRenderResponse><![CDATA[#{javascript:if (sessionScope.uncheck === true) {
sessionScope.checked = false;
} else {
sessionScope.checked = true;
}}]]></xp:this.beforeRenderResponse>
<xp:panel id="Panel1">
<xp:label id="label1" value="Panel1" style="font-weight:bold"></xp:label>
<xp:button id="button1" value="Button1 - Check the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:sessionScope.checked = true;
print("just clicked Button1 sessionScope.checked = ",sessionScope.checked);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button3" value="Button 2 - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:sessionScope.checked = false;
print("just clicked Button2 sessionScope.checked = ",sessionScope.checked);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button2" value="Reload page - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.uncheck = true;
context.reloadPage();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button4" value="Reload page - Check the Box">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:sessionScope.uncheck = false;
context.reloadPage();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel id="Panel2">
<xp:label id="label2" value="Panel2" style="font-weight:bold">
</xp:label>
<xp:checkBox id="checkBox1" text="Computed Checkbox">
<xp:this.defaultChecked><![CDATA[#{javascript:print("Calculating CheckBox - sessionScope.checked = ",sessionScope.checked);
return sessionScope.checked}]]></xp:this.defaultChecked>
</xp:checkBox>
</xp:panel>
</xp:view>
Bind your sessionScope variable directly to the xp:checkBox. This way any changes to the sessionScope variable will be reflected by the checkbox when refreshed:
<xp:checkBox id="checkBox1" text="Computed Checkbox" value="#{sessionScope.checked}"></xp:checkBox>
Here's an example using your buttons for partial refresh and for full reload:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="Panel1">
<xp:label id="label1" value="Panel1" style="font-weight:bold"></xp:label>
<xp:button id="button1" value="Button1 - Check the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = true;
print("just clicked Button1 sessionScope.checked = ",sessionScope.checked);
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button3" value="Button 2 - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="Panel2">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = false;
print("just clicked Button2 sessionScope.checked = ",sessionScope.checked);
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button2" value="Reload page - Uncheck the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = true;
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:button id="button4" value="Reload page - Check the Box">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:
sessionScope.checked = false;
}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
<xp:panel id="Panel2">
<xp:label id="label2" value="Panel2" style="font-weight:bold">
</xp:label>
<xp:checkBox id="checkBox1" text="Computed Checkbox" value="#{sessionScope.checked}"></xp:checkBox>
</xp:panel>
</xp:view>

put tabPanel forward: best method?

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>

Use XSP.partialRefreshPost function in XPages Extension Library dialog

In a xe:dialog (XPages Extension Library dialog), I want to use XSP.partialRefreshPost function, but when refreshing the entered values are lost.
The following example demonstrate the problem.
ComboBox1, inputText1, ComboBox2, inputText2 : OK but not in a xe:dialog
ComboBox3, inputText3 : OK but not use XSP.partialRefreshPost
ComboBox4, inputText4 : NOK because it uses XSP.partialRefreshPost function in xe:dialog
I try to change the properties xe:dialog without success.
How to use XSP.partialRefreshPost in a xe:dialog to have refresh OK ?
Thanks
<?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:label id="label1" value="refresh partial"></xp:label>
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"refreshId="comboBox1">
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText1">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="inputText1">
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xp:label id="label2" value="refresh XSP.partialRefreshPost"></xp:label>
<xp:comboBox id="comboBox2">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:comboBox2}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText2">
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:inputText2}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xe:dialog id="dialog1" partialRefresh="true">
<xp:label id="label3" value="refresh partial"></xp:label>
<xp:comboBox id="comboBox3">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="comboBox3">
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText3">
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="inputText3">
</xp:eventHandler>
</xp:inputText>
<xp:br></xp:br>
<xp:label id="label4" value="refresh XSP.partialRefreshPost"></xp:label>
<xp:comboBox id="comboBox4">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["1", "2", "3"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:comboBox4}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:comboBox>
<xp:inputText id="inputText4">
<xp:eventHandler event="onchange" submit="false">
<xp:this.script><![CDATA[XSP.partialRefreshPost("#{id:inputText4}", {immediate: true});]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
</xe:dialog>
<xp:button id="button1" value="dialog">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openDialog('#{id:dialog1}');]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</xp:view>
partialRefreshPost doesn't work as expected in <xe:dialog>, e.g., when you choose a value in a combobox then partialRefreshPost sends the selected value on change event to server but server's response contains the old value and combobox value jumps back to old value. Even binding the field to data like a scope variable doesn't help.
But there is a workaround. Add parameter execId to partialRefreshPost:
XSP.partialRefreshPost("#{id:comboBox4}",
{execId: "#{id:comboBox4}", immediate: true})
Specify the element which you want to refresh, in this case the same (comboBox4). This way it will work as expected - like outside of a dialog box.

by clicking on one button invoke two other buttons

I would like by clicking on a button to "activate" the clicking of 2 other buttons.
I've put this ccjs in the onclick event:
document.getElementById("#{id:button28}").click();document.getElementById("#{id:button29}").click();
But then only button 28 gets clicked !
Then I tried putting this part1 of the code under the onclick event and part2 under the onmousedown event. Then I have to click 2 times this button before he actually does the job.
the code so far:
<xp:button value="Save" id="button26">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script>
<xp:executeClientScript>
<xp:this.script><![CDATA[document.getElementById("#{id:button29}").click();
></xp:this.script>
</xp:executeClientScript>
</xp:this.script></xp:eventHandler></xp:button><xp:button id="button29" value="button29">
<xp:eventHandler
event="onclick" submit="true" refreshMode="partial"
id="eventHandler21" refreshId="outsidePanel5">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:sessionScope.put("test","");// and some more code}]]>
</xp:this.script>
</xp:executeScript>
</xp:actionGroup>
</xp:this.action>
<xp:this.onComplete><![CDATA[document.getElementById("#{id:button28}").click();]]></xp:this.onComplete>
</xp:eventHandler></xp:button><xp:button value="button28" id="button28">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="outsideMogelijkheid">
<xp:this.action>
<xp:executeScript
script="#{javascript://some code}">
</xp:executeScript>
</xp:this.action>
</xp:eventHandler></xp:button>
If you want to run the SSJS in another button, you can actually call the eventHandler programmatically rather than triggering the button in CSJS. This will also perform better, because you're not switching between CSJS and SSJS all the time. The following code should work:
var eventHandler:com.ibm.xsp.component.xp.XspEventHandler = getComponent("button29");
eventHandler.getAction().invoke(facesContext, null);
eventHandler = getComponent("button28");
eventHandler.getAction().invoke(facesContext, null);
If these buttons execute SSJS code you need to add the code to click on the second button in the
onComplete event of the first button.
http://xpagesblog.com/XPagesHome.nsf/Entry.xsp?documentId=0574D334CB03EACF852578CB00667F54
Addition
Working example of onComplete not that it only works with partial refresh
<xp:button value="Save" id="button26">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[document.getElementById("#{id:button29}").click()]]>
</xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button29" value="button29">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField1">
<xp:this.action><![CDATA[#{javascript:viewScope.test="Almost Done"}]]>
</xp:this.action>
<xp:this.onComplete>
<![CDATA[document.getElementById("#{id:button28}").click();]]>
</xp:this.onComplete>
<xp:this.onError><![CDATA[alert("error")]]></xp:this.onError>
</xp:eventHandler></xp:button>
<xp:button value="button28" id="button28">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="computedField1">
<xp:this.script><![CDATA[alert("Button 28")]]></xp:this.script>
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:viewScope.test="Done"}]]>
</xp:this.script>
</xp:executeScript>
</xp:this.action></xp:eventHandler>
</xp:button>
<xp:br></xp:br>
<xp:text escape="true" id="computedField1" value="#{viewScope.test}"></xp:text>

When I save a document from an extension library dialog box some values are blank

Using 8.5.3 UP1
When I save my document from a dialog box certain fields are not being populated. If I save the document from within the xpage it saves these fields just fine. Here is a simple example to illustrate the issue:
<xp:link text="Save Document By Dialog"
id="link21">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}");]]></xp:this.script>
</xp:eventHandler>
</xp:link>
<br/>
<xp:button value="Save By Button" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Dialog">
<br />
<b>
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:"Save this document?"}]]></xp:this.value>
</xp:text>
</b>
<br />
<br />
<xp:button value="Yes" id="button7">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.script><![CDATA[XSP.closeDialog("#{id:dialog1}");]]></xp:this.script>
<xp:this.action>
<xp:saveDocument var="document1"></xp:saveDocument>
</xp:this.action></xp:eventHandler>
</xp:button>
<xp:button value="No" id="button8">
<xp:this.onclick><![CDATA[XSP.closeDialog("#{id:dialog1}");]]></xp:this.onclick>
</xp:button>
</xe:dialog>
<br/><br/>
<xp:inputText id="TitleTX" value="#{document1.TitleTX}"></xp:inputText>
<br/><br/>
<xp:inputRichText id="inputRichText1" value="#{document1.ProcessMapsRT}">
</xp:inputRichText>
The DOJO processes associated with the xe:dialog moves the dialog to another place in the DOM which means it will loose track of the data sources in the main parts of the document. If you do you saving in the dialog with SSJS instead of simple actions it may work better.
I have had the most success using a dialog contained in a custom control where the datasource is passed in through the composite data. That way the connection to the data is not lost and still works, BUT, I still use SSJS for saving in these situations.
/Newbs
UPDATE: This may be a time to use the technique Steve Pridemore described in NotesIn9 #42 (see xpages.tv).
First put a new event onto your XPage at the level with the data source in it.
<xp:eventHandler
id="saveEventHandler"
submit="true"
save="true"
event="calledbyid"
refreshMode="complete">
</xp:eventHandler>
Next, have the action in the dialog invoke this event using client side javascript:
XSP.executeOnServer('#{id:saveEventHandler}')
That "should" do it. I have not fully tested it but the examples from NoteIn9 do work.
/Newbs
Have you tried using dataContexts to define your datasource? I believe dataContext is a global object.
Update: dataContexts or even dominoDocument datasource worked when saving a document, but the problem was that the values were not saved. I therefore used a viewScope variable to store the values and that did the trick. I am not sure if this will help you, but here you go, this works for me:
<?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:this.data>
<xp:dominoDocument var="newDoc" formName="frmContact"></xp:dominoDocument>
</xp:this.data>
<xp:inputText id="inputText1" value="#{viewScope.firstName}"></xp:inputText>
<xp:inputText id="inputText2" value="#{viewScope.lastName}"></xp:inputText>
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="dialog1">
<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1">
<xp:button value="Label" id="button2">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:newDoc.replaceItemValue("fldFirstName", viewScope.firstName);
newDoc.replaceItemValue("fldLastName", viewScope.lastName);
newDoc.save();
getComponent("dialog1").hide();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</xe:dialog>
</xp:view>
Hope this helps!
Ensure your data are posted to server before opening dialog. I would suggest to open such dialog with SSJS syntax - getComponent("dialog1").show()

Resources