Adding unique IDs in xforms with JS

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Adding unique IDs in xforms with JS

Stephanie Hall (TT)

Hi,

 

I am new to Orbeon and X-Forms, and in my application, I am trying to use javascript with my xforms to show/hide buttons for different instances in the repeats by putting them in divs.  Is there a way to assign a unique ID to the div specific to the index of the repeater?   They can’t be hard-coded.

 

So to loosely illustrate:

 

                <xforms:repeat id=”repeater”>

                                <my instance #1>

                                <my instance #2>

                                <my instance #3>

                                                <button onclick=”showDiv(“div_3”)”>

                                                <div id=”div_3”>…</div>

                </xforms:repeat>

 

I’ve tried to do something like ‘<div id="advancedSettings_<xforms:output value="count(preceding-sibling::component)+1"/>” style="display:none">’ but that doesn’t work.

 

Any help is greatly appreciated. Thanks!

Stephanie



--
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
Reply | Threaded
Open this post in threaded view
|

Re: Adding unique IDs in xforms with JS

Alessandro  Vernet
Administrator
Stephanie,

On Mon, Oct 26, 2009 at 1:22 PM, Stephanie Hall (TT)
<[hidden email]> wrote:
>                                                 <div id=”div_3”>…</div>

You can just keep your div as is, and each iteration will
automatically have the id you specified followed by a separator,
followed by the index of the iteration (starting with 1). The
separator is a special character, and I recommend you use
XFORMS_SEPARATOR_1. So in JavaScript to access fourth iteration, you'd
write: "div_3" + XFORMS_SEPARATOR_1 + "4".

Alex
--
Orbeon Forms - Web forms, open-source, for the Enterprise
Orbeon's Blog: http://www.orbeon.com/blog/
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
Reply | Threaded
Open this post in threaded view
|

Re: Adding unique IDs in xforms with JS

Markku Laine
In reply to this post by Stephanie Hall (TT)
Stephanie,


On 26.10.2009, at 22.22, Stephanie Hall (TT) wrote:

I am new to Orbeon and X-Forms, and in my application, I am trying to use javascript with my xforms to show/hide buttons for different instances in the repeats by putting them in divs.  Is there a way to assign a unique ID to the div specific to the index of the repeater?   They can’t be hard-coded.

In XForms, you can generate UUIDs as follows (or just use string( random(true))):
<xforms:output value="digest( string( random( true ) ), 'MD5', 'hex' )" />


-Markku


--
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
Reply | Threaded
Open this post in threaded view
|

RE: Re: Adding unique IDs in xforms with JS

Stephanie Hall (TT)
In reply to this post by Alessandro Vernet
Thanks for the help, Alex.  What about when you don't know what index you're accessing?  So each row will have a button to do something in javascript with its div and that button will need to be created with each repeat.

So on the third repeat, something like
<xf:repeat>
        .
        .
        .
        <tr>
                <div id="div(dot)3"> //so the (dot)3 will automatically be created as the repeater repeats.
                        {stuff}
                </div>
                <button onclick="toggleSection(????)"/>  
        </tr>
</xf:repeat>

How can I access that "3" to put in my JS toggleSection function?  Using document.getElementById('div'+XFORMS_SEPARATOR_1+index('project-repeat'))) does not work as it does not recognize the "index('project-repeat')".

-----Original Message-----
From: Alessandro Vernet [mailto:[hidden email]]
Sent: Monday, October 26, 2009 8:53 PM
To: [hidden email]
Subject: [ops-users] Re: Adding unique IDs in xforms with JS

Stephanie,

On Mon, Oct 26, 2009 at 1:22 PM, Stephanie Hall (TT) <[hidden email]> wrote:
>                                                 <div
> id="div_3">...</div>

You can just keep your div as is, and each iteration will automatically have the id you specified followed by a separator, followed by the index of the iteration (starting with 1). The separator is a special character, and I recommend you use XFORMS_SEPARATOR_1. So in JavaScript to access fourth iteration, you'd
write: "div_3" + XFORMS_SEPARATOR_1 + "4".

Alex
--
Orbeon Forms - Web forms, open-source, for the Enterprise Orbeon's Blog: http://www.orbeon.com/blog/ 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
Reply | Threaded
Open this post in threaded view
|

Re: RE: Re: Adding unique IDs in xforms with JS

Alessandro  Vernet
Administrator
Stephanie,

On Wed, Oct 28, 2009 at 7:15 AM, Stephanie Hall (TT)
<[hidden email]> wrote:

> Thanks for the help, Alex.  What about when you don't know what index you're accessing?  So each row will have a button to do something in javascript with its div and that button will need to be created with each repeat.
>
> So on the third repeat, something like
> <xf:repeat>
>        .
>        .
>        .
>        <tr>
>                <div id="div(dot)3"> //so the (dot)3 will automatically be created as the repeater repeats.
>                        {stuff}
>                </div>
>                <button onclick="toggleSection(????)"/>
>        </tr>
> </xf:repeat>
>
> How can I access that "3" to put in my JS toggleSection function?  Using document.getElementById('div'+XFORMS_SEPARATOR_1+index('project-repeat'))) does not work as it does not recognize the "index('project-repeat')".
You can do the following: In the onclick, "this" will point to the
button. So you can pass it to toggleSection: toggleSection(this), and
in that function look for the div before the <button> and find that ID
for that div.

Alex
--
Orbeon Forms - Web forms, open-source, for the Enterprise
Orbeon's Blog: http://www.orbeon.com/blog/
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