Programmatically Triggering an XPages
Server Side Event Handler from a Client Side Script

Read the associated Blog Post: Programmatically Triggering an XPages Server Side Event Handler from a Client Side Script

This example demonstrates how to trigger an event handler serverr side using client-side javascript code. In this example, clicking the "Click To Trigger..." button executes an event handler server side that increments a value stored in the viewScope. After the event is triggered, the server sends a partial refresh of the panel containing the click counter (which contains an xp:text with a value equal to viewScope.clickCount so you can see the click counter increment.

Note: The code in this example has been updated versus what was posted in the original blog entry. The first parameter needs to be a fully qualified path to the event handler, rather than just the server side event handler's id. This allows you to call event handlers that are embedded in custom controls as well. You can acquire the id of the event handler server side and pass it through to the client script as you would any other control (for example using # {id:eventhanderId} or the SSJS function getClientId()). It is important to pay attention to the id of the event handler you are calling, especially in cases where the a custom control is in an xp:repeat, because the event handler is executed within the context you specify. For example, specifying an event handler with an id of view:_id1:repeatCtrl:0:_id33:eventhandler1 would execute against the first item in the xp:repeat with an id of repeatCtrl, whereas view:_id1:repeatCtrl:1:_id33:eventhandler1 would execute against the second item.

Working Example
Click Counter: 0
XPage Source Code for this Sample
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<xp:this.resources>
		<xp:dojoModule name="dijit.form.Button"></xp:dojoModule>
		<xp:script src="/executeOnServer.js" clientSide="true"></xp:script>
	</xp:this.resources>

	<xp:this.beforePageLoad><![CDATA[# {javascript:
			viewScope.clickCounter = 0;
	}] ]></xp:this.beforePageLoad>

	<xp:this.data>
		<xp:dominoDocument var="document1" formName="sample-data"
			action="editDocument"
			postSaveDocument="# {javascript:viewScope.clickCounter = viewScope.clickCounter + 1;}">
			<xp:this.documentId><![CDATA[# {javascript:
				database.getView('sample-data-view').getFirstDocument().getUniversalID();
			}] ]></xp:this.documentId>
		</xp:dominoDocument>
	</xp:this.data>
	
	<xp:panel styleClass="workingSample" id="panel1">

		<xp:text
			value="Click Counter: # {javascript:@Text(viewScope.clickCounter)}" />

		<xp:br />

		<button dojoType="dijit.form.Button" type="button"
			onClick="XSP.executeOnServer('# {id:eventhandler1a}', '# {id:panel1}')">
			Click To Trigger Server Event Handler
		</button>

		<xp:eventHandler event="onfubar" id="eventhandler1a">
			<xp:this.action>
				<xp:saveDocument />
			</xp:this.action>
		</xp:eventHandler>
	</xp:panel>
</xp:view>
Client-Side JavaScript Code for this Sample
// Additional XSP function to trigger an eventhandler server side
XSP.executeOnServer = function () {
	// must supply event handler id or we're outta here....
	if (!arguments[0])
		return false;

	// the ID of the event handler we want to execute
	var functionName = arguments[0];

	// OPTIONAL - The Client Side ID that you want to partial refresh after executing the event handler
	var refreshId = (arguments[1]) ? arguments[1] : "@none";
	var form = (arguments[1]) ? this.findForm(arguments[1]) : dojo.query('form')[0];
       
	// catch all in case dojo element has moved object outside of form...
	if (!form)
		form = dojo.query('form')[0];

	// OPTIONAL - Options object contianing onStart, onComplete and onError functions for the call to the
	// handler and subsequent partial refresh
	var options = (arguments[2]) ? arguments[2] : {};

	// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
	var submitValue = (arguments[3]) ? arguments[3] : '';

	// Set the ID in $$xspsubmitid of the event handler to execute
	dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
	dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
	this._partialRefresh("post", form, refreshId, options);
}
CSS for this Sample
No CSS