How to call SSJS function from computed HTML link?

Question

I have a computed field on an xpage the result of which is HTML. In that HTML I want to compute a link that will trigger some server side js function followed by a partial refresh.

My current code looks like this:

<a href="#" onclick="return myFunction()">Click Here</a>

This will work if my js function is a client-side function but I want to use this function to set the value of a field on the document so I need SSJS.

Static links that are created from the controls pallet in an xpage allow the link to call SSJS with partial refreshes. How can I do this with a computed HTML link?

Answer 1

You can stick with your code if you use the XSP Object in the myFunction() client side function. This allows you to call a partial refresh. The other option is to call a Extlib JSON control and have your logic there. Depends a little on your coding style

Answer 2

Another option could be creating your own event handler and executing that via client side JavaScript code described in this article. So suppose you create an event handler something like this:

<xp:eventHandler event="name" id="eventhandler1a">
    <xp:this.action>
        <xp:saveDocument />
    </xp:this.action>
</xp:eventHandler>

You can then create a function to call this event handler via JavaScript code:

XSP.executeOnServer = function () {
    // the event handler id to be executed is the first argument, and is required
    if (!arguments[0])
        return false;
    var functionName = arguments[0];

    // OPTIONAL - The Client Side ID that is partially refreshed 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 containing 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);
}

You can then call the event handler via this client side JavaScript code:

XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}')

Here panel1 refers to control which would be partially refreshed.

Answer 3

The link control is not static. You can compute whatever you want, for example:

<xp:link escape="true" id="lnk">
   <xp:this.value><![CDATA[#{javascript:"#"}]]></xp:this.value>
   <xp:this.text><![CDATA[#{javascript:"Label here"}]]></xp:this.text>
</xp:link>