Orbeon Forms community mailing list

Access to model from within xbl component javascript

Classic

List

Threaded

13 messages Options

bwallis42

Access to model from within xbl component javascript

Hi,
How can I access the model for my xbl component from within it's javascript code. I've created the control as described in the doco and have the following in my xbl to call the javascript when required.

                <xf:action ev:event="xforms-enabled">
                    <xxf:script>YAHOO.xbl.im.GrowthChart.instance(this).init();
                    </xxf:script>
                </xf:action>

                <xf:action ev:event="xforms-value-changed">
                    <xxf:script>YAHOO.xbl.im.GrowthChart.instance(this).update(event.target);
                    </xxf:script>
                </xf:action>

But I cannot work out how I can get hold of my model from within the javascript. The model is declared in the control like so:

<xf:instance id="chart-row-prototype">
                    <row xmlns="">
                        <date />
                        <age />
                        <length />
                        <weight />
                        <headCircumference />
                    </row>
                </xf:instance>
                <xf:instance id="local-chart-data" xxbl:mirror="true">
                    <rows xmlns="" />
                </xf:instance>

I need to iterate over the rows extracting the values for each of the elements in each row to create a javascript structure to pass to a graphing function.

thanks,
brian...

bwallis42

Re: Access to model from within xbl component javascript

This post was updated on .

I've been trying a few options for this and came across xf:load which shows promise but I cannot get it to work.

If I have

<xf:action ev:event="xforms-enabled">
  <xxf:script>YAHOO.xbl.im.GrowthChart.instance(this).init();
  </xxf:script>
</xf:action>

my component's javascript init() function is called. If I change this to use xf:load instead

<xf:action ev:event="xforms-enabled">
  <xf:load resource="javascript:YAHOO.xbl.im.GrowthChart.instance(this).init()" />
</xf:action>

The reason I'd like to use load is that I can us xforms variables in this call as described in http://wiki.orbeon.com/forms/doc/developer-guide/xforms-javascript-integration so I should be able to do the following:

<xf:var name="readonly" value="exf:readonly($binding)" />
<xf:action ev:event="xforms-enabled">
  <xf:load resource="javascript:YAHOO.xbl.im.GrowthChart.instance(this).init({$readonly})" />
</xf:action>

but since init() is not being called from within the xf:load this doesn't work for me.

What am I doing wrong? This seems to be the same as described in the documentation.

thanks,
brian...

bwallis42

Re: Access to model from within xbl component javascript

P.S.

Is it possible to access the event when using xf:load? In a script I can use the 'event' variable so to get the event target as a parameter I would do the following

<xf:action ev:event="xforms-value-changed">
  <xxf:script>
      YAHOO.xbl.im.GrowthChart.instance(this).update(event.target);
  </xxf:script>
</xf:action>

but the access to event from the load resource string doesn't seem to work, I get "ReferenceError: event is not defined"

<xf:action ev:event="xforms-value-changed">
   <xf:load resource="javascript:YAHOO.xbl.im.GrowthChart.instance(this).update(event.target);" />
</xf:action>

Alessandro Vernet

Re: Access to model from within xbl component javascript

Administrator

Hi Brian,

About your penultimate message in this thread, I am wondering if `this` is set properly with xf:load. Can you try changing it to just `javascript:console.log(42)`. Does that get logged in the console? Then what about `javascript:console.log(this)`?

About your last message, what would you like event.target to return? If it is something returned by the XPath event() function (https://github.com/orbeon/orbeon-forms/wiki/XForms-~-Events), then you could use an AVT, i.e. YAHOO.xbl.im.GrowthChart.instance(this).update({event('xxf:absolute-targetid')});

Alex

On Sun, May 24, 2015 at 7:27 PM, bwallis42 <[hidden email]> wrote:

P.S.

Is it possible to access the event when using xf:load? In a script I can use
the 'event' variable so to get the event target as a parameter I would do
the following

but the access to event from the load resource string doesn't seem to work,
I get "ReferenceError: event is not defined"

--
View this message in context: http://discuss.orbeon.com/Access-to-model-from-within-xbl-component-javascript-tp4659972p4659983.html

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

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

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

bwallis42

Re: Access to model from within xbl component javascript

In reply to this post by bwallis42

Hi, I'm hoping someone can answer this. I would like to demonstrate a component I've written to some customers in a couple of weeks but I still cannot work out how to access the xbl component model from my javascript. All the ways I could find/think of have not worked.

Is it possible?

thanks
brian...

Alessandro Vernet

Re: Access to model from within xbl component javascript

Administrator

Brian, have you seen my Thursday answer to your 2 messages?

Alex

On Sun, May 31, 2015 at 8:59 PM, bwallis42 <[hidden email]> wrote:

Hi, I'm hoping someone can answer this. I would like to demonstrate a
component I've written to some customers in a couple of weeks but I still
cannot work out how to access the xbl component model from my javascript.
All the ways I could find/think of have not worked.

Is it possible?

thanks
brian...

--
View this message in context: http://discuss.orbeon.com/Access-to-model-from-within-xbl-component-javascript-tp4659972p4660008.html

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

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

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

bwallis42

Re: Access to model from within xbl component javascript

Alessandro Vernet wrote

Brian, have you seen my Thursday answer to your 2 messages?

Sorry, somehow I seem to have missed that answer.

So I tried this on the xforms-enabled event

                <xf:action ev:event="xforms-enabled">
                    <xf:load resource="javascript:console.log('xforms-enabled(xf:load)');console.log(this);" />
                    <xxf:script>console.log('xforms-enabled(xxf:script)');console.log(this);</xxf:script> -->
                </xf:action>

and get either of the following depending on when xforms-enabled is asserted (it seems to be 5 times on load and 7 times each time I add a row to the dynamic table I'm creating).

xforms-enabled(xxf:script)
<span id="fr-view-wizard≡section-1-control≡xf-435≡control-2-control≡im-component-group" class="xforms-group">
xforms-enabled(xf:load)
Window new?t=19

and

xforms-enabled(xf:load)
Object { replace=function(),  eval=function(),  escapeForMarkup=function(),  more...}
xforms-enabled(xxf:script)
<span id="fr-view-wizard≡section-1-control≡xf-435≡control-2-control≡im-component-group" class="xforms-group">

Similar code in the xforms-value-changed event shows the following each time a value is changed:

xforms-value-changed(xf:load)
Object { replace=function(),  eval=function(),  escapeForMarkup=function(),  more...}
xforms-value-changed(xxf:script)
<span id="fr-view-wizard≡section-1-control≡xf-435≡control-2-control≡im-component-group" class="xforms-group xforms-visited">

So in the script case 'this' is always pointing to the same span which I assume is the one containing the control. In the xf:load case 'this' either points to a Window with the name 'fb-test-iframe' or some object with the following structure (from firebug)

endsWith                          function(text, suffix)
escapeForMarkup              function(text)
eval                                 function(jsString)
normalizeSerializedHTML   function(text)
replace                            function(text, token, newToken)

From these results it looks like this is not initialised correctly or consistently in the xf:load case.

bwallis42

Re: Access to model from within xbl component javascript

In reply to this post by Alessandro Vernet

Alessandro Vernet wrote

About your last message, what would you like event.target to return? If it
is something returned by the XPath event() function (
https://github.com/orbeon/orbeon-forms/wiki/XForms-~-Events), then you
could use an AVT, i.e.
YAHOO.xbl.im.GrowthChart.instance(this).update({event('xxf:absolute-targetid')});

What I think I'm actually after is probably both the targetid and the value which I can get from event('xxf:value'). But I can't use either of those from xxf:script and with out a consistent value for 'this' I can't get it working using xf:load either.

Can you think of another way to achieve this? I need the call to 'YAHOO.xbl.im.GrowthChart.instance(this)' to work but need the various XML Events 'event(...)' functions to work as well.

bwallis42

Re: Access to model from within xbl component javascript

Thinking more about what I really need in my javascript, I don't really want the event targetid or the value. What I want is my complete XML model which looks a little like this:

<control-1>
  <table>
    <row>
      <date>2014-12-23</date>
      <height>23</height>
      <weight>12.2</weight>
      <age>13.5</age>
      <headCircumference>43</headCircumference>
    </row>
    <row>
      <date>2015-1-20</date>
      <height>24.2</height>
      ...
    </row>
    ...
  </table>
</control-1>

Getting the value of one cell in the table each time a cell is changed is a bit painful to use and it would be much easier if I just got the whole table each time so I can plot the graph lines from the data in the rows.

Is there any way to access the whole model from the javascript each time a value changes in the table?

thanks
brian...

Alessandro Vernet

Re: Access to model from within xbl component javascript

Administrator

In reply to this post by bwallis42

Brian,

So your testing shows that `this` isn't set properly when calling JavaScript with `xf:load`, which doesn't surprise me. So, use xxf:script instead. And if you need to pass something to the script, you'll need to put an xf:output style="display: none" value="…", and go read its value from JavaScript.

About the event handler being called "too many times", you can add ev:target="#observer", so you only get the xforms-enabled sent to a specific control, instead of also getting all the xforms-enabled from controls it contains as they bubble up.

Alex

On Mon, Jun 1, 2015 at 6:06 PM, bwallis42 <[hidden email]> wrote:

Alessandro Vernet wrote
> Brian, have you seen my Thursday answer to your 2 messages?

Sorry, somehow I seem to have missed that answer.

So I tried this on the xforms-enabled event

and get either of the following depending on when xforms-enabled is asserted
(it seems to be 5 times on load and 7 times each time I add a row to the
dynamic table I'm creating).

and

Similar code in the xforms-value-changed event shows the following each time
a value is changed:

So in the script case 'this' is always pointing to the same span which I
assume is the one containing the control. In the xf:load case 'this' either
points to a Window with the name 'fb-test-iframe' or some object with the
following structure (from firebug)

From these results it looks like this is not initialised correctly or
consistently in the xf:load case.

--
View this message in context: http://discuss.orbeon.com/Access-to-model-from-within-xbl-component-javascript-tp4659972p4660015.html

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

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

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

Alessandro Vernet

Re: Access to model from within xbl component javascript

Administrator

In reply to this post by bwallis42

Brian,

Then you could use an <xf:output style="display: none" class="my-xml" value="saxon:serialize(instance('your-instance'), 'xml')"/> and when your JavaScript is invoked, find the element with class my-xml inside `this`, and get its value. E.g. something like: $(this).find('.my-xml').text().

Alex

On Tue, Jun 2, 2015 at 1:47 PM, bwallis42 <[hidden email]> wrote:

Thinking more about what I really need in my javascript, I don't really want
the event targetid or the value. What I want is my complete XML model which
looks a little like this:

Getting the value of one cell in the table each time a cell is changed is a
bit painful to use and it would be much easier if I just got the whole table
each time so I can plot the graph lines from the data in the rows.

Is there any way to access the whole model from the javascript each time a
value changes in the table?

thanks
brian...

--
View this message in context: http://discuss.orbeon.com/Access-to-model-from-within-xbl-component-javascript-tp4659972p4660020.html

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

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

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

bwallis42

Re: Access to model from within xbl component javascript

Alessandro Vernet wrote

Then you could use an <xf:output style="display: none" class="my-xml"
value="saxon:serialize(instance('your-instance'), 'xml')"/> and when your
JavaScript is invoked, find the element with class my-xml inside `this`,
and get its value. E.g. something like: $(this).find('.my-xml').text().

Thanks Heaps Alex. That is what I wanted.

I now have the model as an XML string in my javascript and am playing with an XML to javascript converter library (X2JS, https://code.google.com/p/x2js/) to convert the XML to a useful form.

This should work fine.

Again, thanks for the help. Putting the model into an invisible output field never occurred to me. Makes it easy and understandable for future maintenance.

Alessandro Vernet

Re: Access to model from within xbl component javascript

Administrator

Brian, excellent, I am glad this is working for you.

Alex

On Wed, Jun 3, 2015 at 12:33 AM, bwallis42 <[hidden email]> wrote:

Alessandro Vernet wrote
> Then you could use an
> <xf:output style="display: none" class="my-xml"
> value="saxon:serialize(instance('your-instance'), 'xml')"/>
> and when your
> JavaScript is invoked, find the element with class my-xml inside `this`,
> and get its value. E.g. something like: $(this).find('.my-xml').text().

Thanks Heaps Alex. That is what I wanted.

I now have the model as an XML string in my javascript and am playing with
an XML to javascript converter library (X2JS,
https://code.google.com/p/x2js/) to convert the XML to a useful form.

This should work fine.

Again, thanks for the help. Putting the model into an invisible output field
never occurred to me. Makes it easy and understandable for future
maintenance.

--
View this message in context: http://discuss.orbeon.com/Access-to-model-from-within-xbl-component-javascript-tp4659972p4660026.html

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

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

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