I have a form displayed in read mode using custom control which is bound to a view scoped bean. I need to have a picker on this CC so that users can select other documents. These display as links (generated using repeat control).
I planned to trigger a method in my view scoped bean to save this value when selection changes.
Now I am stuck with:
onChange event of multi-valued field (used with picker) does not trigger SSJS code
I tried creating a button which I clicked using CSJS on onChange of above field - this does not work either.
In short, SSJS code is not being triggered.
This is troubling me as I have a created a file download control wherein I have added a remove button calling a method in bean and it works just fine.
I am using Debugtoolbar by Mark Leusink and I am not able to display a simple message or set any scope variable. this is happening for onChange and onClick events!!
I have provided my CC code below. If you want you can put it in any Xpage bound to a view scoped bean.
<?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:panel id="panel1">
<xp:inputTextarea id="inputTextarea1" style="display:none" value="#{viewScope[compositeData.pickerDetails.beanName][compositeData.pickerDetails.saveToField]}"
multipleSeparator=","
>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="repeatLinks">
<xp:this.action><![CDATA[#{javascript://viewScope[compositeData.pickerDetails.beanName][compositeData.pickerDetails.saveToField]= getComponent("inputTextarea1").getValue();
//viewScope.get(compositeData.pickerDetails.beanName).setValue(compositeData.pickerDetails.saveToField,getComponent("inputTextarea1").getValue());
//viewScope[compositeData.pickerDetails.beanName].linkDocs(compositeData.pickerDetails.saveToField,getComponent("inputTextarea1").getValue());}]]></xp:this.action>
<xp:this.script><![CDATA[//console.log("Btn found : "+document.getElementById(getID("btnLinks")));
document.getElementById(getID("btnLinks")).click();]]></xp:this.script>
</xp:eventHandler>
</xp:inputTextarea>
<xe:valuePicker id="valuePicker1" listHeight="auto" listWidth="auto" dialogTitle="#{javascript:compositeData.pickerDetails.title}" for="inputTextarea1">
<xe:this.dataProvider>
<xe:simpleValuePicker labelSeparator="|">
<xe:this.valueList><![CDATA[#{javascript:var cd = compositeData.pickerDetails;
getPickerList(cd.viewName,cd.filter,cd.filterField);}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
<xp:repeat id="repeatLinks" rows="30" var="docLink">
<xp:this.value><![CDATA[#{viewScope[compositeData.pickerDetails.beanName][compositeData.pickerDetails.saveToField]}]]></xp:this.value>
<xp:text escape="false" id="computedField1">
<!-- Link is generated here -->
</xp:text>
<xp:br></xp:br>
</xp:repeat>
<xp:button value="Click Me" id="btnLinks" refreshId="repeatLinks" refreshMode="partial">
<xp:this.onclick><![CDATA[#{javascript:viewScope[compositeData.pickerDetails.beanName].linkDocs(compositeData.pickerDetails.saveToField,getComponent("inputTextarea1").getValue());}]]></xp:this.onclick>
</xp:button>
</xp:panel>
</xp:view>
You mention this is a custom control. The most likely cause then is validation failure elsewhere on the page. Your button calls SSJS without execMode="partial" and an execId. This means the complete XPage is validated during the partial refresh. Your refreshId doesn't include an errors block, so there's nothing to alert the user (and you!) if there is a validation error.
Setting execMode="partial" and execId="panel1" on your button should resolve the problem.
If that's the case, for the future I would recommend adding a PhaseListener into your applications so you can easily output what phases are being triggered and/or always ensuring the refreshArea includes an errors control.
If you remove the style "display:none;" does the code then trigger?
There might be a validation failure that's taking place. What happens if you select "process data without validation" for these events?
Related
In an xp:dialog I have a button which loads back-end data and closes the dialog.
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="rptContainer">
<xp:this.action><![CDATA[#{javascript:
//load data. will not add the code for that but works fine;
viewScope.put("customers",promoBean.getCampaign().getCustomers());
getComponent("dlgCampaign").hide();}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
On the event I have set partial refresh on a xp:panel control that contains a repeat control that is data-binded to viewScope.
<xp:panel id="rptContainer">
<xp:repeat id="rptCustomers" var="obj" indexVar="index" value="#{viewScope.customers}">...
With help of the xpages debug toolbar I see that the viewScope from the button in the dialog is being updated. but when the dialog is closed the changes are not visible in the repeat control.
I have placed a button outside the dialogbox which only performs the partial refresh and then the repeat control renders the changes.
Can anyone explain me how I can update the repeat control from within the dialog box?
I tried the onHide property of the dialog and used as code:
XSP.partialRefreshGet('#{id:rptContainer}');
But this has no effect.
I even tried a full update for the button event but this has also no result.
Can someone guide me how to do it the proper way?
when I close a dialogbox through SSJS, I close it using following syntax:
<xp:button value="OK" id="btnOK">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:/*your processing code*/
var dialogBox = getComponent('/*id of the dialog to close*/');
dialogBox.hide('/*id of the component to refresh*/');}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
Although the refresh mode is 'complete', only the component in the 'hide' method is refreshed.
I have a Xpage with two custom controls containing editable fields tied to the single data source on the Xpage. On the Xpage I use a xe:dialog that contains a button to save the data source document1 (using SSJS). No validation is occurring yet. I use a xe:dialogButtonBar to call the xe:dialog (using CSJS) which opens fine and then click the OK button containing Action Save Document data source.
diablogButtonBar onClick call to open dialog.
XSP.openDialog("#{id:dialogSaveAsDraft}");
With this configuration the document is saved but the editable fields are not created nor data saved. The Xpage has the following two properties set, computeWithForm: onsave, action:editDocument but have tried createDocument too.
Here is the twist: If I take the button in the xe:dialog and place it outside the xe:dialog, the button works and the Xpage and all editable fields save properly.
What am I missing? I have done almost exactly the same thing before but instead of using the xe:dialogButtonBar I used a string of buttons. I wanted to use the xe:dialogButton Bar to organize the UI.
Can some one explain why that would occur?
The problem is about the form submission. When you launch the dialog, editable fields on the other parts of the page are not submitted (dialog is launched upon partial refresh). Therefore the back-end component tree is not aware of the field updates of the client-side.
You can either open the dialog from the SSJS (so it submits the page) or create a "noupdate" submission with onComplete script to launch the dialog.
<xp:link
escape="true"
text="Open Dialog with SSJS"
id="link1">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="norefresh"
action="#{javascript:getComponent('dialogSaveAsDraft').show()}">
</xp:eventHandler>
</xp:link>
<xp:link
escape="true"
text="Open Dialog with onComplete"
id="link2">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="norefresh"
onComplete="XSP.openDialog('#{id:dialogSaveAsDraft}');">
</xp:eventHandler>
</xp:link>
If you use ComputeWithForm then you have to have a DisplayErrors control. That is where validation error messages will appear. Do you have that? If not you could be getting a validation error from the formulas on the form and they have no place to display the error messages. By the way, using ComputeWithForm is not really a good thing to do. You should repeat your validation logic directly on the XPage. Otherwise, you got too many things going on, the validation/translation that happens at the XPage level and again at the form level.
I have an inputText which is a required field on my Document.
<xp:inputText value="#{Cdoc.txt_NumeCompanie}" id="txt_NumeCompanie"
required="true" defaultValue="#{javascript:param.value}">
<xp:this.validators>
<xp:validateRequired message="Numele companiei este obligatoriu." loaded="true">
</xp:validateRequired>
</xp:this.validators>
<xp:eventHandler event="onchange" submit="false" disableValidators="true">
<xp:this.script><![CDATA[ XSP.partialRefreshPost("#{id:scrollDiv}", {
onComplete: function() {
XSP.partialRefreshPost("#{id:pers}");
}
});
]]></xp:this.script>
</xp:eventHandler>
</xp:inputText>
I also checked the Process data without validation ( from the Server tab ... ). But still no refresh is taking place.
You do not include the required second parameter on your second partialRefreshPost. Try this:
XSP.partialRefreshPost("#{id:scrollDiv}", {
onComplete: function() {
XSP.partialRefreshPost("#{id:pers}", {});
}
});
Update: you can use the onComplete event of the eventHandler to run your 2nd partial refresh. So use the traditional partial refresh of the first component and then run your 2nd partial refresh through the onComplete event:
<xp:inputText value="#{Cdoc.txt_NumeCompanie}" id="txt_NumeCompanie" required="true" defaultValue="#{javascript:param.value}">
<xp:this.validators>
<xp:validateRequired message="Numele companiei este obligatoriu." loaded="true">
</xp:validateRequired>
</xp:this.validators>
<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="scrollDiv">
<xp:this.onComplete><![CDATA[XSP.partialRefreshPost("#{id:pers}", {});]]></xp:this.onComplete>
</xp:eventHandler>
</xp:inputText>
By setting submit="false", you're preventing any server-side processing from being triggered by the eventHandler itself. That means disableValidators="true" is irrelevant, because the XPages lifecycle is not being processed from the eventHandler.
Instead the refresh is being generated from the client-side code, the XSP.partialRefreshPost. That doesn't have an option to disable validation, as covered here How to disable validators using the XSP.partialRefreshPost method?. disableValidators="true" doesn't and cannot influence the processing of the partialRefreshPost. So chances are your validation is still running. To confirm that, add an errors panel into the initial refresh area.
partialRefreshGet may work, I'm not sure.
My usual approach in these scenarios is to refresh a single area that comprises both areas you wish to refresh. Then set submit="true" and disableValidators="true". But bear in mind that even if validation is disabled, data conversion is still checked so if you enter a text value in a number field, the partial refresh would still fail.
Ok, first thing to do is open your toolbox and look at the network traffic. This will help you to understand what is going on. You can use FireBug in FireFox or Developer tools in Google Chrome.
What network traffic occurs for the above snippet?
Edit:
Still waiting to hear what network traffic is generated...
But just looking at your code... - try set submit="true". I had a look at some of the code I have, and I am not sure that the extra empty param is required :-)
Could you explain what you are trying to obtain?
Edit
Ok, I see what you want. I had a quick view in some code. I am not doing exactly the same that you are. However, when I nest the partial refreshes I typically do it this way:
<xp:button id="button1"
styleClass="btn btn-danger btn-lg#{FishingTripEdit.typeInput eq '1' ? ' inActive' : ''}">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="inputTypeSelected" disableValidators="true">
<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:MyBean.setData('0')}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>
<xp:this.onComplete><![CDATA[XSP.partialRefreshGet("#{id:buttonTopHolder}")]]></xp:this.onComplete>
<xp:this.script><![CDATA[return document.getElementById("#{id:triggerAsk}").value!=='1' ? true : confirm("Sure?")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
So for the "first" refresh I use the builtin markup - and onComplete I add the second as plain JavaScript. I know this is an example with a partialRefreshGet (which I prefer to use if at all possible due to less overhead). But perhaps it can give you an idea....
I am using the toolbar control and that has several actions on it to allow the user to switch document modes, save, return to the view, etc.
I want to add a cancel button to allow the user to cancel their edits and switch them back to read mode.
Since the same event is shared by all these actions (I am using simple actions in computed action groups) I can't check off the "Do not validate or update data". If I do a context.redirectToPage("newpage.xsp") that will cause validation to happen.
I want to be able "cancel" the validation and then perform some action like switch to read mode or to another XPage. Any suggestions?
I guess I need a context.DontSave() method...Is there a method I can use to disable the validation/updating when submitting?
Thanks,
Howard
You can create a standalone cancel button that discards changes and reloads the current page. In the example below I have not taken into account that the current page can contain parameters such as editDocument, documentId etc.
<xp:button id="cancel" value="Cancel" rendered="#{javascript:document.isEditable()}">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete" immediate="true" save="false" id="eventHandler1">
<xp:this.action>
<xp:actionGroup>
<xp:openPage name="#{javascript:view.getPageName()}"></xp:openPage>
</xp:actionGroup>
</xp:this.action></xp:eventHandler>
</xp:button>
I have the following LINK control on the form and would like to call the managed bean method onclick and do partial refresh (refreshing specifing part of the page). But I just found out, that this doesnt work, I can see that clicking on link sends XHR request to server, but the managed bean method call (entire onClick SSJS event) is not triggered. If I redesign thi as button controll, thigs are working properly, but I need link in this case. Is it some bug or my misuse of concept?
<xp:link escape="true" text="" id="link2" >
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" disableValidators="true" refreshId="create_recipe_form_panel">
<xp:this.action><![CDATA[#{javascript:F.getRecipe().adjustWt()}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
I would say: misuse of concept. A links should "send you somewhere else" while a button "does something for you". So most likely the link destination and the click action get in each others way. Use a button and give it a class. Play with the css until you have the visual you desire.