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

@Fredrik: I have created a blank XPage, added the function and your code above. It works as designed ("1" was printed to server console) with 8.5.3. — Sven Hasselbach, May 24 '12 at 05:38
I've checked again and it works if you place it directly inside an XPage but If you place it inside a Custom Control nothing happends. So there is my real problem. — Fredrik Norling, May 24 '12 at 08:25
Working link for the Jeremy Hodge post: http://xpages.info/XPagesHome.nsf/Entry.xsp?documentId=88065536729EA065852578CB0066ADEC — jpishko, Jun 17 '16 at 14:51

score 4 · Answer 1 · answered May 24 '12 at 10:30

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

You can also use getComponent('dostuff').getClientId(facesContext) to calculate the id of the event. — Per Henrik Lausten, Jun 27 '13 at 08:37

score 2 · Accepted Answer · answered May 29 '12 at 14:56

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.

Dalie · Answer 3 · 2012-05-23T15:31:59.727

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>

score 0 · Answer 4 · answered May 26 '12 at 22:12

0

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).

answered May 26 '12 at 22:12

D.Bugger

2,300
15
19

What I see is the major problem with the Remote Service Control is that it doesn't operate in the same viewScope as the rest of the page. – Fredrik Norling May 28 '12 at 08:10
:-O Ah, could be, I didn't know; but sessionScope should be okay. – D.Bugger May 28 '12 at 14:27

score -1 · Answer 5 · answered May 23 '12 at 19:50

-1

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.

answered May 23 '12 at 19:50

Frank van der Linden

140
8

Sorry Frank but that is the article I'm refering to. – Fredrik Norling May 24 '12 at 08:26

Call Eventhandler from ClientSide JS

5 Answers5

Linked