Attaching javascript behaviour to xforms:insert'ed element

> All,
>
> I have a question for the Orbeon Forms community that straddles
> general javascript coding and the Orbeon Forms javscript API, that I
> am hoping you can help me with.
>
>
> Setup
> ---------
> Apache Tomcat 5.5.28
> Orbeon Forms 3.7.1 (Developer Release)
> MS Windows XP
> Mozilla Firefox 3.5
>
>
> Background
> ------------------
> I have a form that has a large, repeatable section. As such, I needed
> a way to scale the interface for multiple repeats without making the
> page too long. My solution involved using the JQuery "slide"
> functionality (http://docs.jquery.com/UI/Effects/Slide), and following
> the instructions here:
> http://jqueryfordesigners.com/slide-out-and-drawer-effect/
>
> I am aware that the more recent builds of Orbeon Forms have
> convieniently added JQuery accordion functionality, but there is an
> existing bug with xforms:group in the development branch which is
> keeping me from get the latest and greatest (I'll submit a bug report
> shortly).
>
> Description
> -----------------
> The venture worked just fine for when the page initally loads, but the
> a problem arises when I attempt to add a new repeatable element using
> xforms:insert. The JQuery code attaches Javascript functionality to
> all the repeated elements at document.ready(...), but I do not know
> how to attach the same functionality to dynamically added elements. If
> there was a way to get a handle on the new element that is being
> created, I might be able to attach the functionality to this?
>
> I have attached a complete example of what I am trying to do, but I'll
> repeat some of the code here. For the attached example, please note
> that you will need to change the oxf.epilogue.theme variable in
> resources/config/properties-base.xml to point to
> resources/test/theme-test.xsl.
>
> I am using JQuery version 1.3.2.
>
> Here is the javascript code that runs when the page first loads,
> initalizing the JQuery slide functionality. It is pretty much verbatim
> from the "slide-out-and-drawer-effect" link above:
>
> $(document).ready(function () {
>  $('LI.drawer P:not(:first)').hide(); // hide all ULs inside LI.drawer
> except the first one
>  $('H2.drawer-handle').click(function () {
>    // hide all the drawer contents
>    $('LI.drawer P:visible').slideUp().prev().removeClass('open');
>
>    // show the associated drawer content to 'this' (this is the
> current H2 element)
>    // since the drawer content is the next element after the clicked H2, we find
>    // it and show it using this:
>    $(this).addClass('open').next().slideDown();
>  });
> });
>
> Here is my xforms:insert:
>
> <xforms:trigger appearance="button">
>    <xforms:label>Add a new item. This new item is what we want to
> decorate</xforms:label>
>    <xforms:action ev:event="DOMActivate">
>        <xforms:insert nodeset="dec:item" at="last()" position="after"
> origin="instance('template')"/>
>        <xforms:load resource="javascript:decorateNewItem()"
> ev:event="DOMActivate" xxforms:show-progress="false"/>
>    </xforms:action>
> </xforms:trigger>
>
> (You can call javascript functions as an action. Neat!)
>
> My javascript function does not do much at the moment:
>
> function decorateNewItem() {
> alert ('New item needs to be decorated');
> };
>
> How can I decorate the newly inserted element with the same JQuery
> behaviour? Any ideas, anyone?
>
> Many thanks for all your help!
>
> Sincerely,
> Henrik Pettersen
> Sparkling Ideas for the European Medicines Agency
>

> All,
>
> my problem with the latest snapshot of the development turned out to
> be a user error. The XBL based accordion menu works perfectly, so
> there is no need for me to implement my JQuery solution.
>
> So I now have a (much better) workaround for my problem. Thank you,
> Orbeon Forms team!
>
> Many thanks, everyone!
>
> Henrik
>
> 2009/11/17 Henrik Pettersen <[hidden email]>:
>> All,
>>
>> I have a question for the Orbeon Forms community that straddles
>> general javascript coding and the Orbeon Forms javscript API, that I
>> am hoping you can help me with.
>>
>>
>> Setup
>> ---------
>> Apache Tomcat 5.5.28
>> Orbeon Forms 3.7.1 (Developer Release)
>> MS Windows XP
>> Mozilla Firefox 3.5
>>
>>
>> Background
>> ------------------
>> I have a form that has a large, repeatable section. As such, I needed
>> a way to scale the interface for multiple repeats without making the
>> page too long. My solution involved using the JQuery "slide"
>> functionality (http://docs.jquery.com/UI/Effects/Slide), and following
>> the instructions here:
>> http://jqueryfordesigners.com/slide-out-and-drawer-effect/
>>
>> I am aware that the more recent builds of Orbeon Forms have
>> convieniently added JQuery accordion functionality, but there is an
>> existing bug with xforms:group in the development branch which is
>> keeping me from get the latest and greatest (I'll submit a bug report
>> shortly).
>>
>> Description
>> -----------------
>> The venture worked just fine for when the page initally loads, but the
>> a problem arises when I attempt to add a new repeatable element using
>> xforms:insert. The JQuery code attaches Javascript functionality to
>> all the repeated elements at document.ready(...), but I do not know
>> how to attach the same functionality to dynamically added elements. If
>> there was a way to get a handle on the new element that is being
>> created, I might be able to attach the functionality to this?
>>
>> I have attached a complete example of what I am trying to do, but I'll
>> repeat some of the code here. For the attached example, please note
>> that you will need to change the oxf.epilogue.theme variable in
>> resources/config/properties-base.xml to point to
>> resources/test/theme-test.xsl.
>>
>> I am using JQuery version 1.3.2.
>>
>> Here is the javascript code that runs when the page first loads,
>> initalizing the JQuery slide functionality. It is pretty much verbatim
>> from the "slide-out-and-drawer-effect" link above:
>>
>> $(document).ready(function () {
>>  $('LI.drawer P:not(:first)').hide(); // hide all ULs inside LI.drawer
>> except the first one
>>  $('H2.drawer-handle').click(function () {
>>    // hide all the drawer contents
>>    $('LI.drawer P:visible').slideUp().prev().removeClass('open');
>>
>>    // show the associated drawer content to 'this' (this is the
>> current H2 element)
>>    // since the drawer content is the next element after the clicked H2, we find
>>    // it and show it using this:
>>    $(this).addClass('open').next().slideDown();
>>  });
>> });
>>
>> Here is my xforms:insert:
>>
>> <xforms:trigger appearance="button">
>>    <xforms:label>Add a new item. This new item is what we want to
>> decorate</xforms:label>
>>    <xforms:action ev:event="DOMActivate">
>>        <xforms:insert nodeset="dec:item" at="last()" position="after"
>> origin="instance('template')"/>
>>        <xforms:load resource="javascript:decorateNewItem()"
>> ev:event="DOMActivate" xxforms:show-progress="false"/>
>>    </xforms:action>
>> </xforms:trigger>
>>
>> (You can call javascript functions as an action. Neat!)
>>
>> My javascript function does not do much at the moment:
>>
>> function decorateNewItem() {
>> alert ('New item needs to be decorated');
>> };
>>
>> How can I decorate the newly inserted element with the same JQuery
>> behaviour? Any ideas, anyone?
>>
>> Many thanks for all your help!
>>
>> Sincerely,
>> Henrik Pettersen
>> Sparkling Ideas for the European Medicines Agency
>>
>
>
> --
> 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
>
>