Orbeon Forms community mailing list

two way js communications between parent and iframe content

Classic

List

Threaded

9 messages Options

two way js communications between parent and iframe content

This post was updated on .

This 3 year old thread covers my interest .. to use javascript in a parent wrapper page to invoke controls in an embedded xform

"How can I active the button on xforms page from javacript in parent IFrame?"

The answer was ..

Your code won't work because the element returned by
getElementById('buttonid') is a element. Clicking the span won't cause the button to be activated.

Maybe try dispatching a DOMActivate to the button control instead. See the doc here:

http://www.orbeon.com/ops/doc/reference-xforms-2#xforms-javascript-events

-Erik

Are there any wiki examples / tutorials I can refer to .. button in parent window js invokes js in iframe content to submit content of an xform to a database?

I am using a php CMS (Wordpress or Drupal interpreted by Quercus) as the container for iframe embedded xforms and I want the xform controls / submit buttons to be in the parent window and not in the embedded xform.

Conversely how can the embedded xform invoke javascript functions in the parent (CMS) window?

i.e. parent-child js connection .. both ways?

...

Adding a further note of explanation ...

To give a specific example ...

If I place http://localhost:8080/orbeon/xforms-sandbox/sample/custom-events

as one simple app in a wordpress iframe

how do I then call the <xforms:script> in this app from the parent window in which the "custom-events" xform is embedded?

Re: two way js communications between parent and iframe content

If I launch this test xform

http://localhost:8090/orbeon/xforms-sandbox/sample/custom-events

I see the popup message "hi there"

However when I try to loading this test xform into a client side iframe (name "orbeon_iframe" on another Apache server) ...

instead of seeing the popup message "hi there" this exception error comes up ...

"exception in client-side code"

when I click on "show details" I see this ...

Message: this._messageDialog is null
file: http://localhost:8080/orbeon/ops/javascript/orbeon/xforms/action/Message.js
line number: 67

I next searched for Message.js but soon realised this and other javascript files are bundled in

orbeon-resources-public.jar
and
orbeon.jar

I inspected the innards of the orbeon jars and this is the point in the javascript where the exception error occurs ...

_showMessage: function() {
// Create a span, otherwise setBody() assume the

// parameters is HTML, while we want it to be text

var span = document.createElement("span");
OD.setStringValue(span, this._messageQueue[0]);
this._messageDialog.setBody(span);
this._messageDialog.show();
},

this._messageDialog is showing null .. so is this a DOM path referencing problem due to running in an iframe?

Does this javascript need to be modified to accommodate content appearing in a client side iframe?

Should I be using a DOM path like this in Message.js .. at a guess .. ???

objDoc = window.frames["orbeon_iframe"].document;

Do I have to unbundle the javascripts from the orbeon jars and edit them?

This returns to the general problem of addressing xforms embedded inside iframes in a client side script.

Re: two way js communications between parent and iframe content

I've just found that this exception arises from calling the orbeon xform from a remote (Apache) server ..

this seems to be a cross-domain security problem with javascript

if I run the test form on quercus / Tomcat (having set quercus.xml and orbeon.xml context files in Tomcat 6.0\conf\Catalina\localhost\) I can now embed the xform in a parent iframe without seeing the exception error.

but I still need to figure out the protocol for targeting the javascript event handler (parent <--> child).

...

Searching around to solve this problem I found this js library which might be useful for cross-domain messaging .. http://easyXDM.net

this library would need to be placed in the consumer and the provider (orbeon).

https://github.com/oyvindkinsey/easyXDM#readme

Tambet Matiisen

Re: Re: two way js communications between parent and iframe content

On 11.01.2011 0:33, DL wrote:

I've just found that this exception arises from calling the orbeon xform from
a remote (Apache) server ..

this seems to be a cross-domain security problem with javascript

if I run the test form on quercus / Tomcat (having set quercus.xml and
orbeon.xml context files in Tomcat 6.0\conf\Catalina\localhost\) I can now
embed the xform in a parent iframe without seeing the exception error.

If you have a control over the remote Apache server, you can overcome the cross-domain security problem by setting up proxy for Orbeon. You do this in Apache configuration with ProxyPass and ProxyPassReverse directives:

ProxyPass /orbeon/ http://your.tomcat.host/orbeon/

      ProxyPassReverse /orbeon/ http://your.tomcat.host/orbeon/

See also http://httpd.apache.org/docs/2.2/mod/mod_proxy.html.

Tambet

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

Alessandro Vernet

Re: two way js communications between parent and iframe content

Administrator

In reply to this post by DL

Assuming you have a trigger id `my-trigger`, to simulate in JavaScript
a user click on the button corresponding to that trigger, I often use:

ORBEON.util.Dom.getElementByTagName(ORBEON.util.Dom.get(id), "button").click();

Alex

On Fri, Jan 7, 2011 at 11:57 AM, DL <[hidden email]> wrote:

>
> This 3 year old thread covers my interest .. to use javascript in a parent
> wrapper page to invoke controls in an embedded xform
>
> "How can I active the button on xforms page from javacript in parent
> IFrame?"
>
> The answer was ..
>
>
>> Your code won't work because the element returned by
>> getElementById('buttonid') is a element. Clicking the span won't cause
>> the button to be activated.
>>
>> Maybe try dispatching a DOMActivate to the button control instead. See the
>> doc here:
>>
>> http://www.orbeon.com/ops/doc/reference-xforms-2#xforms-javascript-events
>>
>> -Erik
>
> Are there any wiki examples / tutorials I can refer to .. button in parent
> window js invokes js in iframe content to submit content of an xform to a
> database?
>
> I am using a php CMS (Wordpress or Drupal interpreted by Quercus) as the
> container for iframe embedded xforms and I want the xform controls / submit
> buttons to be in the parent window and not in the embedded xform.
>
> Conversely how can the embedded xform invoke javascript functions in the
> parent (CMS) window?
>
> i.e. parent-child js connection .. both ways?
>
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/two-way-js-communications-between-parent-and-iframe-content-tp3192702p3192702.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> 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
>
>

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

SparkyII

Re: two way js communications between parent and iframe content

I'm also trying to simulate pressing a button on a form (to resubmit a query and repopulate a form). Do you have a small working example of your
ORBEON.util.Dom.getElementByTagName(ORBEON.util.Dom.get(id), "button").click();

I could have a look at?

M.

Erik Bruchez

Re: Re: two way js communications between parent and iframe content

Administrator

Not sure exactly what example you would like beyond the code you provide below?

-Erik

On Tue, Mar 1, 2011 at 8:51 AM, SparkyII <[hidden email]> wrote:

I'm also trying to simulate pressing a button on a form (to resubmit a query
and repopulate a form). Do you have a small working example of your

ORBEON.util.Dom.getElementByTagName(ORBEON.util.Dom.get(id),
"button").click();

I could have a look at?

M.

--
View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/two-way-js-communications-between-parent-and-iframe-content-tp3192702p3330156.html

Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.

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

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

SparkyII

Re: Re: two way js communications between parent and iframe content

Thanks for your reply.

Essentially, I've created a multipart form using the form builder. What I would like to be able to do is, after a successful database update, reload the form so that the recently added data is displayed in the form. The easiest way to do that is to simply click the button which loads the data in the xforms:action ev:event="xforms-submit-done" section of the database update.

I thought adding something like:
<xxforms:script>
try
{
ORBEON.util.Dom.getElementByTagName(ORBEON.util.Dom.get(id),
"view-control").click();
}
catch(err)
{
alert(err);
}
</xxforms:script>

Might do it, but it doesn't seem to work. I couldn't find any documentation on the ORBEON.util.Dom namespace either.

I'd just like to see a minimal reference example of the above working.

Many thanks,

Sparks

Erik Bruchez

Re: Re: Re: two way js communications between parent and iframe content

Administrator

Just to confirm the first step: you placed an XForms listener already, right? Something like:

<xxforms:script ev:event="xforms-submit-done" ev:observer="whatever submission id you need to listen to">

... javascript here, like alert("Submission done!"); ...

</xxforms:script>

-Erik

On Thu, Mar 3, 2011 at 6:38 AM, SparkyII <[hidden email]> wrote:

Thanks for your reply.

Essentially, I've created a multipart form using the form builder. What I
would like to be able to do is, after a successful database update, reload
the form so that the recently added data is displayed in the form. The
easiest way to do that is to simply click the button which loads the data in
the xforms:action ev:event="xforms-submit-done" section of the database
update.

I thought adding something like:

try

{

ORBEON.util.Dom.getElementByTagName(ORBEON.util.Dom.get(id),

"view-control").click();
}
catch(err)
{
alert(err);
}

Might do it, but it doesn't seem to work. I couldn't find any documentation
on the ORBEON.util.Dom namespace either.

I'd just like to see a minimal reference example of the above working.

Many thanks,

Sparks

--
View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/two-way-js-communications-between-parent-and-iframe-content-tp3192702p3333465.html

Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.

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