Orbeon Forms community mailing list

Calling events in an xbl component from external javascript

Classic

List

Threaded

4 messages Options

apgoar

Calling events in an xbl component from external javascript

Please forgive me if I'm missing something obvious.

I'm writing a XBL component that pops up a dialog, and displays an external page (a page not under my control. My difficulty is that I need to be able to dismiss the dialog from some external javascript. But so far, nothing I have tried has works.

Essentially I have something like:
<xbl:script src="NMImageLibPicker.js" />
<xbl:binding id="fr-NMImageLibPicker" element="fr|NMImageLibPicker">
....
<xbl:template>
...
<xhtml:div>
<xxforms:dialog id="imageLibPickerDialog">
<xhtml:iframe src="<MyHTMLGeneratorScript>" width="600" height="600" />
</xxforms:dialog>
<xforms:trigger id="show-default-dialog">
<xforms:label>Pick Library Image</xforms:label>
<xxforms:show ev:event="DOMActivate" dialog="imageLibPickerDialog"/>
</xforms:trigger>
</xhtml:div>
....
</xbl:binding>

So far, the dialog displays great. The <MyHTMLGeneratorScript> calls a fixed javascript routine when certain events occur. What I would like to do it based on the event, dismiss the imageLibPickerDialog.

I tried calling
ORBEON.xforms.Document.dispatchEvent("imageLibPickerDialog", "xxforms:hide");
which did not work (and after reading the documentation, I think I understand why).

I also tried defining a custom handler
<xbl:handlers>

<xbl:handler event="my-event" phase="target">
<xxforms:script>alert("Whohoo!");</xxforms:script>
</xbl:handler>
</xbl:handlers>
that I could call
ORBEON.xforms.Document.dispatchEvent("fr-NMImageLibPicker", "my-event");
But no go.

Any tips or documentation pointers on how to trigger an xforms even to dismiss a dialog in an xbl component from external javascript code? If I knew the class or id of either the dialog, or an element in the dialog (like the iframe in this case), is there some way to get a handle to the containing xbl component to allow me to dispatch an event to it?

Many thanks,

Andy G
Harding Marketing

Alessandro Vernet

Re: Calling events in an xbl component from external javascript

Administrator

Andy,

As you noticed, you can't know the id of that specific dialog: the
effective id is generated dynamically based on the id you put in your
XForms code (imageLibPickerDialog), the id of the XBL component, and
that particular instance of the XBL component on the page, as you can
have multiple instances. One trick is to do a follows:

1. Add a trigger that closes the dialog, but which is not visible to users:

<xforms:trigger class="your-close-dialog" style="display: none">
<xforms:label>Close dialog</xforms:label>
<xxforms:hide ev:event="DOMActivate" dialog="imageLibPickerDialog"/>
</xforms:trigger>

You can test it out first by omitting the style="display: none", and
just clicking on it, to make sure it works.

2. In your JavaScript code, you want to simulate a click on that
trigger. So you need to find that trigger for the current instance of
your XBL component. Our XBL components have a special way of doing
this, using instance(). But if you implement this yourself, you'll
need to find a way have reference to a DOM node inside the XBL
component. If you are responding to an event, the target of the event
is what you're looking for. In other cases, 'this' is what you're
looking for. From there, you navigate the DOM to find the button with
the class your-close-dialog which is in the same XBL component, and
call button.click(). If this helps, once you found a parent of the
button inside the XBL component, you can use:

var trigger = YAHOO.util.Dom.getElementsByClassName("your-close-dialog",
null, theParentYouFound)[0];
var button = ORBEON.util.Dom.getElementByTagName(trigger, "button");
button.click();

Alex

On Monday, August 2, 2010, apgoar <[hidden email]> wrote:

>
> Please forgive me if I'm missing something obvious.
>
> I'm writing a XBL component that pops up a dialog, and displays an external
> page (a page not under my control. My difficulty is that I need to be able
> to dismiss the dialog from some external javascript. But so far, nothing I
> have tried has works.
>
> Essentially I have something like:
> <xbl:script src="NMImageLibPicker.js" />
> <xbl:binding id="fr-NMImageLibPicker" element="fr|NMImageLibPicker">
>    ....
>    <xbl:template>
>    ...
>    <xhtml:div>
>    <xxforms:dialog id="imageLibPickerDialog">
>    <xhtml:iframe src="<MyHTMLGeneratorScript>" width="600" height="600"
> />
>    </xxforms:dialog>
>    <xforms:trigger id="show-default-dialog">
>    <xforms:label>Pick Library Image</xforms:label>
>    <xxforms:show ev:event="DOMActivate"
> dialog="imageLibPickerDialog"/>
>    </xforms:trigger>
>    </xhtml:div>
>    ....
> </xbl:binding>
>
>
> So far, the dialog displays great. The <MyHTMLGeneratorScript> calls a fixed
> javascript routine when certain events occur. What I would like to do it
> based on the event, dismiss the imageLibPickerDialog.
>
> I tried calling
>    ORBEON.xforms.Document.dispatchEvent("imageLibPickerDialog",
> "xxforms:hide");
> which did not work (and after reading the documentation, I think I
> understand why).
>
> I also tried defining a custom handler
>    <xbl:handlers>
>    
>    <xbl:handler event="my-event" phase="target">
>    <xxforms:script>alert("Whohoo!");</xxforms:script>
>    </xbl:handler>
>    </xbl:handlers>
> that I could call
>    ORBEON.xforms.Document.dispatchEvent("fr-NMImageLibPicker",
> "my-event");
> But no go.
>
>
> Any tips or documentation pointers on how to trigger an xforms even to
> dismiss a dialog in an xbl component from external javascript code? If I
> knew the class or id of either the dialog, or an element in the dialog (like
> the iframe in this case), is there some way to get a handle to the
> containing xbl component to allow me to dispatch an event to it?
>
>
> Many thanks,
>
> Andy G
> Harding Marketing
>
>
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/Calling-events-in-an-xbl-component-from-external-javascript-tp2311085p2311085.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

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

Alessandro Vernet

Re: Calling events in an xbl component from external javascript

Administrator

In reply to this post by apgoar

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

apgoar

RE: Re: Calling events in an able component from external javascript

In reply to this post by Alessandro Vernet

Fantastic;

I will give it a try.

Thank you Alessandro

Andy
Laugh...and the world laughs with you. Laugh hysterically, for no apparent reason, and they'll leave you alone.

-----Original Message-----
From: Alessandro Vernet [mailto:[hidden email]]
Sent: Thursday, August 05, 2010 6:48 PM
To: [hidden email]
Subject: [ops-users] Re: Calling events in an xbl component from external javascript

Andy,

As you noticed, you can't know the id of that specific dialog: the effective id is generated dynamically based on the id you put in your XForms code (imageLibPickerDialog), the id of the XBL component, and that particular instance of the XBL component on the page, as you can have multiple instances. One trick is to do a follows:

1. Add a trigger that closes the dialog, but which is not visible to users:

<xforms:trigger class="your-close-dialog" style="display: none">
<xforms:label>Close dialog</xforms:label>
<xxforms:hide ev:event="DOMActivate" dialog="imageLibPickerDialog"/> </xforms:trigger>

You can test it out first by omitting the style="display: none", and just clicking on it, to make sure it works.

2. In your JavaScript code, you want to simulate a click on that trigger. So you need to find that trigger for the current instance of your XBL component. Our XBL components have a special way of doing this, using instance(). But if you implement this yourself, you'll need to find a way have reference to a DOM node inside the XBL component. If you are responding to an event, the target of the event is what you're looking for. In other cases, 'this' is what you're looking for. From there, you navigate the DOM to find the button with the class your-close-dialog which is in the same XBL component, and call button.click(). If this helps, once you found a parent of the button inside the XBL component, you can use:

var trigger = YAHOO.util.Dom.getElementsByClassName("your-close-dialog",
null, theParentYouFound)[0];
var button = ORBEON.util.Dom.getElementByTagName(trigger, "button"); button.click();

Alex

On Monday, August 2, 2010, apgoar <[hidden email]> wrote:

>
> Please forgive me if I'm missing something obvious.
>
> I'm writing a XBL component that pops up a dialog, and displays an
> external page (a page not under my control. My difficulty is that I
> need to be able to dismiss the dialog from some external javascript.
> But so far, nothing I have tried has works.
>
> Essentially I have something like:
> <xbl:script src="NMImageLibPicker.js" /> <xbl:binding
> id="fr-NMImageLibPicker" element="fr|NMImageLibPicker">
>    ....
>    <xbl:template>
>    ...
>    <xhtml:div>
>    <xxforms:dialog id="imageLibPickerDialog">
>    <xhtml:iframe src="<MyHTMLGeneratorScript>" width="600" height="600"
> />
>    </xxforms:dialog>
>    <xforms:trigger id="show-default-dialog">
>    <xforms:label>Pick Library Image</xforms:label>
>    <xxforms:show ev:event="DOMActivate"
> dialog="imageLibPickerDialog"/>
>    </xforms:trigger>
>    </xhtml:div>
>    ....
> </xbl:binding>
>
>
> So far, the dialog displays great. The <MyHTMLGeneratorScript> calls a
> fixed javascript routine when certain events occur. What I would like
> to do it based on the event, dismiss the imageLibPickerDialog.
>
> I tried calling
>    ORBEON.xforms.Document.dispatchEvent("imageLibPickerDialog",
> "xxforms:hide");
> which did not work (and after reading the documentation, I think I
> understand why).
>
> I also tried defining a custom handler
>    <xbl:handlers>
>    
>    <xbl:handler event="my-event" phase="target">
>
> <xxforms:script>alert("Whohoo!");</xxforms:script>
>    </xbl:handler>
>    </xbl:handlers>
> that I could call
>    ORBEON.xforms.Document.dispatchEvent("fr-NMImageLibPicker",
> "my-event");
> But no go.
>
>
> Any tips or documentation pointers on how to trigger an xforms even to
> dismiss a dialog in an xbl component from external javascript code? If
> I knew the class or id of either the dialog, or an element in the
> dialog (like the iframe in this case), is there some way to get a
> handle to the containing xbl component to allow me to dispatch an event to it?
>
>
> Many thanks,
>
> Andy G
> Harding Marketing
>
>
>
> --
> View this message in context:
> http://orbeon-forms-ops-users.24843.n4.nabble.com/Calling-events-in-an
> -xbl-component-from-external-javascript-tp2311085p2311085.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>

--
Orbeon Forms - Web forms, open-source, for the Enterprise - http://www.orbeon.com/ My Twitter: http://twitter.com/avernet

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws