You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Andreas Deininger <ad...@googlemail.com> on 2011/06/15 13:38:30 UTC
ajaxformloop: accessing id of elements
Hi,
I just started to develop my first web app using tapestry, and
everything went pretty smoothly.
However now I'm facing the a problem:
I used a prototype based plug in to mask the input for a text field
with the id 'myid'.
This is the code inside my page.tml which works perfectly fine:
<snip>
<script type="text/javascript">
Event.observe(window, 'load', function() {
new MaskedInput('#myid', '99/99/9999');
});
</script>
<t:textfield t:id="myid" value="foo" size="50" />
</snip>
Now I want to apply the mask to one or more (dynamically created)
textfields inside an ajaxformloop:
<div t:type="ajaxformloop" t:id="myprop" source="myprop.prop"
value="currentprop">
<t:textfield t:id="myid" value="currentprop.prop" />
</div>
Here I run into problems since I do not know how to access the ids of
the dynamically created text fields.
Any hint how to get decorate these fields with an input mask is highly
appreciated.
Thanks in advance
Andreas
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: ajaxformloop: accessing id of elements
Posted by archaeopteryx <an...@foerster-technik.de>.
Hi,
thanks for your quick response, which brought me closer to the solution, but
couldn't solve my problem yet.
The problem is that at the time when the window is loaded, the input
elements that I want to manipulate do not exist inside the DOM tree yet.
They are only created after the user pressed the "add row" link button
inside the ajax form loop.
I tried to register on the click event on the "add row" link, to no avail,
since the input elements of my row are created *after* the click handler is
executed, AFAICS.
Event.observe($('addlink'), 'click', function() {
$$('input.myclass').each(function(input) {
// custom action
});
});
Any ideas?
Thanks for your help.
Andreas
--
View this message in context: http://tapestry.1045711.n5.nabble.com/ajaxformloop-accessing-id-of-elements-tp4490925p4491384.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: ajaxformloop: accessing id of elements
Posted by "Thiago H. de Paula Figueiredo" <th...@gmail.com>.
On Wed, 15 Jun 2011 08:38:30 -0300, Andreas Deininger
<ad...@googlemail.com> wrote:
> Hi,
Hi!
> I just started to develop my first web app using tapestry,
Welcome!
> and everything went pretty smoothly.
Nice! :)
> However now I'm facing the a problem:
>
> I used a prototype based plug in to mask the input for a text field with
> the id 'myid'.
> This is the code inside my page.tml which works perfectly fine:
>
> <snip>
> <script type="text/javascript">
> Event.observe(window, 'load', function() {
> new MaskedInput('#myid', '99/99/9999');
> });
> </script>
What's this first parameter of MaskedInput? From your usage above, it
seems that it receives a CSS selector. So you can give a class (example:
'date') and id for your TextField, use Prototype for getting all elements
with this class and then pass the id to MaskedInput.
> Here I run into problems since I do not know how to access the ids of
> the dynamically created text fields.
You can set the ids yourself. Something like this (not tested):
private int count;
public int getCount() {
return count++;
}
<div t:type="ajaxformloop" t:id="myprop" source="myprop.prop"
value="currentprop">
<t:textfield t:id="myid" value="currentprop.prop" id="count"
class="date"/>
</div>
<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('input.date').each(function(input) {
new MaskedInput(input.id, '99/99/9999');
});
});
</script>
By the way, it's recommended to move this JavaScript code to a .js file
and include it in your page or component using the @Import annotation.
--
Thiago H. de Paula Figueiredo
Independent Java, Apache Tapestry 5 and Hibernate consultant, developer,
and instructor
Owner, Ars Machina Tecnologia da Informação Ltda.
http://www.arsmachina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: ajaxformloop: accessing id of elements
Posted by Josh Canfield <jo...@gmail.com>.
> I used a prototype based plug in to mask the input for a text field
> with the id 'myid'.
> This is the code inside my page.tml which works perfectly fine:
You may want to consider making "MaskedInput" into a mixin then you
can add the script dynamically as the fields are added to the page.
<t:textfield t:id="myid" value="currentprop.prop" mixins="MaskedInput"
pattern="'99/99/9999'"/>
http://tapestry.apache.org/component-mixins.html
Josh
On Wed, Jun 15, 2011 at 4:38 AM, Andreas Deininger
<ad...@googlemail.com> wrote:
> Hi,
>
> I just started to develop my first web app using tapestry, and
> everything went pretty smoothly.
> However now I'm facing the a problem:
>
> I used a prototype based plug in to mask the input for a text field
> with the id 'myid'.
> This is the code inside my page.tml which works perfectly fine:
>
> <snip>
> <script type="text/javascript">
> Event.observe(window, 'load', function() {
> new MaskedInput('#myid', '99/99/9999');
> });
> </script>
>
> <t:textfield t:id="myid" value="foo" size="50" />
> </snip>
>
> Now I want to apply the mask to one or more (dynamically created)
> textfields inside an ajaxformloop:
>
> <div t:type="ajaxformloop" t:id="myprop" source="myprop.prop"
> value="currentprop">
> <t:textfield t:id="myid" value="currentprop.prop" />
> </div>
>
> Here I run into problems since I do not know how to access the ids of
> the dynamically created text fields.
> Any hint how to get decorate these fields with an input mask is highly
> appreciated.
>
> Thanks in advance
> Andreas
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org