XBL Companion Javascript, Multiple Custom Function Triggers

[Joel Oates]

Hello All!

I am having an issue with the implementation of my own companion java-script
class, the issue is around calling my own custom functions declared inside
the javascript but I cannot call separate custom functions from within my
XBL.

I have my class declared and all working with the following. (Snippet)

(function() {

// Optional shortcut to jQuery
var $ = ORBEON.jQuery;

// Register your companion class by its binding name
ORBEON.xforms.XBL.declareCompanion("workflow|pdf-viewer", {

// Your custom data goes here
init: function() {
},

// Your custom functions go here
displayPDF: function(val) {
... Do stuff ...
});
},
onNextPage: function () {
... Do Stuff ...
},
onPrevPage: function () {
... Do Stuff ...
},
})
})();

Now I have my XBL component declared with the following...

<xbl:xbl {Name Spaces}>
<xbl:script src="/xbl/workflow/pdf-viewer/pdf-viewer.js" />


<xbl:binding id="workflow-pdf-viewer"
element="workflow|pdf-viewer"
xxbl:mode="lhha binding javascript-lifecycle">

<metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
<display-name lang="en">PDF Viewer</display-name>
<icon lang="en">
</icon>
<template>
<workflow:pdf-viewer id="" ref="" xmlns="">
<xf:label ref="" />
<xf:hint ref="" />
<xf:help ref="" />
<xf:alert ref="$fr-resources/detail/labels/alert" />
</workflow:pdf-viewer>
</template>
</metadata>
<xbl:resources>
<xbl:style src="" />
</xbl:resources>
<xbl:template>

<xf:model id="local-model">
<xf:instance>
<test></test>
</xf:instance>

<xf:bind id="test-bind" name="test" ref="instance()"/>
</xf:model>
<xf:group id="workflow-component-group" model="local-model">
... My Triggers and Actions are here ....
</xf:group>
</xbl:template>
</xbl:binding>
</xbl:xbl>

Now I can call my displayPDF function with the following (from inside the
<xf:group> )

<xf:trigger>
<xf:label value="'Display PDF'"/>
<xf:action type="javascript" ev:event="DOMActivate"
observer="workflow-pdf-viewer">
<xf:param
name="testValue"
value="bind('test-bind')"/>
<xf:body>

ORBEON.xforms.XBL.instanceForControl(this).displayPDF(testValue);
</xf:body>
</xf:action>
</xf:trigger>

This works! However if I want another trigger to call a different function
on the java script, it will trigger ALL the javascript actions (As they all
have the same observer (but I need them to, to have the javasctipt to map
correctly))

Example:

<xf:trigger>
<xf:label value="'Display PDF'"/>
<xf:action type="javascript" ev:event="DOMActivate"
observer="workflow-component-group">
<xf:param
name="testValue"
value="bind('test-bind')"/>
<xf:body>

ORBEON.xforms.XBL.instanceForControl(this).displayPDF(testValue);
</xf:body>
</xf:action>
</xf:trigger>
<xf:trigger class="next">
<xf:label value="'Next Page'"/>
<xf:action type="javascript" event="DOMActivate"
observer="workflow-component-group">
<xf:body>
ORBEON.xforms.XBL.instanceForControl(this).onNextPage();
</xf:body>
</xf:action>
</xf:trigger>

Is there a way I can call multiple custom functions on the javascript using
triggers?

I believe the main cause is because all my triggers have the same observers
on the actions, and once the DOMAcitvate event is triggered on one, the
other events also are fired! however I need the Observer's to be the same as
its the only way the javascript maps correctly to the action. Is there
another way of getting this mapping working without using the same
observers?

Thanks for your time, Sorry for the lengthy one, Little stuck at the moment.

Cheers,
Joel.



--
Sent from: http://discuss.orbeon.com/

[Joel Oates]

I have found a way around this, by using event listeners inside the javascript. Code for my event listeners that attach the onPrevPage and onNextPage functions to the buttons with the class prev and next.

init: function() { var xblContext = this; $(xblContext.container).find('.prev')[0].addEventListener('click', xblContext.onPrevPage.bind(xblContext)); $(xblContext.container).find('.next')[0].addEventListener('click', xblContext.onNextPage.bind(xblContext)); },

---

Sent from the Orbeon Forms community mailing list mailing list archive at Nabble.com.

[Joel Oates]

[Alessandro Vernet]

Hi Joel,

I might be missing something, but it seems to me that you could just remove
the `observer` attribute on your `<xf:action>`. Without the `observer`, the
action is observing the parent element, so just the trigger you're
interested in. You'll let me know if this works for you.

‑Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

[Joel Oates]

The issue I had here was I had my buttons in a grid, so when they tried to
call the Java-Script it said it couldn't find the function (I believe the
context ($(this)) was the grid rather than the xblClass! So it works if I
don't have any of the triggers in a grid!

Cheers for the reply.
Joel.

[Alessandro Vernet]

Got it Joel. I imagine we don't need to dig too much into this since you made
it work. But listeners should work in repeated grid. If you (or someone
else) stumbles on this again in the future, we would need to have test we
can run locally to reproduce and debug the issue.

‑Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet