Call Eventhandler from ClientSide JS

Question

I was looking at this post by Jeremy Hodge http://xpagesblog.com/XPagesHome.nsf/Entry.xsp?documentId=88065536729EA065852578CB0066ADEC With Event handlers and calling them from ClientSide JS. But I can get them to work if I put some SSJS in side the event I would like to fire.

Does this still work or am I doing something wrong?

    <xp:button value="click me" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete">
            <xp:this.script><![CDATA[executeOnServer('dostuff');]]></xp:this.script>

        </xp:eventHandler>
    </xp:button>
    <xp:eventHandler event="onfubar" id="dostuff" submit="true">
        <xp:this.action><![CDATA[#{javascript:print("1");viewScope.data="Y"}]]></xp:this.action>
    </xp:eventHandler>

The executeOnServer function comes directly from Jeremys page

Answer 1

Found the problem my it wasn't in my code but in the Executeonserver code. Thanks everybody for the help to get the solution.

this line needed to change dojo.query('[name="$$xspsubmitid"]')[0].value = form.id + ':' +functionName;

to

dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;

Of course when you have the answer everything seams easy.

Answer 2

If the event is contained in a custom control the event is a child of the custom control and has another id then in an event in the XPage.

The id of the event in a normal XPage:

view:_id1:dostuff

If it is contained by a custom control:

view:_id1:_id5:dostuff

where _id5 is the id of the custom control.

This is not working with the current CSJS code.

To fix this, you can add add an id to your custom control

 <xc:event id="abc"></xc:event>

and then calculate the id of the custom control and add it to the event:

<xp:button value="click meCC" id="button1">
    <xp:eventHandler event="onclick" submit="false"
        refreshMode="none">
        <xp:this.script><![CDATA[
        var ccId = '#{javascript:getComponent('abc').getId()}';
         executeOnServer(ccId + ':dostuff');]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

Hope this helps

Sven

Answer 3

First, for the "click me" button the "Server Options" should be set to "No Submission" (remove refreshMode="complete" and set submit="false"). Which means it only executes the client script (in this case running the "dostuff" event). Second the "submit" parameter from the "dostuff" eventHandler should be set to "false".

The code below will print "1" in the server Console when clicking the "click me" button. Hope this helps.

<xp:this.resources>
    <xp:script src="/executeOnServer.js" clientSide="true"></xp:script>
</xp:this.resources>

<xp:button value="click me" id="button1">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[executeOnServer("dostuff");]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

<xp:eventHandler event="onfubar" id="dostuff" submit="false">
    <xp:this.action><![CDATA[#{javascript:print("1");}]]></xp:this.action>
</xp:eventHandler>

Answer 4

I don't know if this is what you're looking for, but I largely prefer the Remote Service control from the Extension library (xe:jsonRpcService).

Answer 5

Jeremy Hodge has wrote a terrific blog article about this subject. http://xpagesblog.com/XPagesHome.nsf/Entry.xsp?documentId=88065536729EA065852578CB0066ADEC

An eventhandler can exist without a surrounding button, give the eventhandler an id and you can access it.