You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Stephen Nutbrown <st...@gmail.com> on 2015/07/13 21:47:26 UTC

Ajaxformloop add row link max size.

Hi!

Wohoo, I'm getting married next year and I'm currently in the process of
setting up a small wedding website for my guests to RSVP. However, I have a
small problem which I'm sure has a simple solution, I just can't see it.

I have an ajaxformloop for the guests to add +1s. Some have more allocated
than others (eg some have kids etc). I'm using the form to collect names
for placemats and drink preferences etc.

I have a value from an Invite object  which represents the max number of
guests for the invite. My ajaxformloop should only let them add that many
guests using the add row link.

I've tried returning null from my onAddNewRow event and it didn't like
that.

I've also tried putting a t:if around the add new row link, however this
doesn't work, probably because it's ajax and doesn't update this part.

Is there a max size parameter or something similar for the add row link or
the ajaxformloop? Or perhaps there is another easy way, I'm sure there will
be but I can't spot it.

Thanks,
Steve

Re: Ajaxformloop add row link max size.

Posted by Lance Java <la...@googlemail.com>.
You could put the add row link in a zone and update the zone with nothing
(via AjaxResponseRenderer) when the max is hit.

Re: Ajaxformloop add row link max size.

Posted by Stephen Nutbrown <st...@gmail.com>.
I'd just like to close the loop a little bit as in the end I asked this on
SO also. Here is a link to the same question with an answer. It's not
ideal, but for my use case it's ok.

http://stackoverflow.com/questions/31518944/tapestry5-ajaxformloop-limit-number-of-rows/31619004#31619004

On 15 July 2015 at 16:25, Stephen Nutbrown <st...@gmail.com> wrote:

> Hi,
>
> Thank you for your reply Lance, sorry I didn't see it sooner. I still
> haven't managed to fix this, but I have done some experimenting and i'm not
> sure if it's due to my misunderstanding (most likely) or some bug.
>
> My ajaxformloop now looks like this:
>
> <div class="col-sm-6" t:type="ajaxformloop" t:id="formloop"
> source="invite.people" value="guest">
>   <div class="formgroup">
>   <t:label for="name"/>
>   <t:textfield t:id="name" value="guest.name" t:validate="required,
> maxlength=50"/>
>   </div>
>
>   <div class="formgroup">
>   <t:label for="music"/>
>   <t:textfield t:id="music" value="guest.music"/>
>   </div>
>   <div class="formgroup">
>   <t:label for="attending"/>
>   <t:select t:id="attending" value="guest.attending"
> model="attendingModel" t:encoder="attendingEncoder"/>
>   </div>
>   <div class="formgroup">
>   <t:label for="drink" />
>   <t:select t:id="drink" value="guest.drink" model="drinkModel"
> t:encoder="drinkEncoder"/>
>   </div>
>   <div class="formgroup">
>   <t:label for="chocolate" />
>   <t:select t:id="chocolate" value="guest.chocolate"
> model="chocolateModel" t:encoder="chocolateEncoder"/>
>   </div>
>   <t:removerowlink>Remove</t:removerowlink>
>   <div t:type="zone" t:id="addRowZone" id="addRowZone">
>   <p:addRow>
>   <t:addrowlink>Add a plus one</t:addrowlink>
>   </p:addRow>
>   </div>
>   </div>
>   <div class="col-sm-12">
>   <button t:type="submit" />
>   </div>
>
>
>
> One thing I notice, is that as soon as I add the zone around the addRow
> link, my add row link changes from saying "Add a plus one" to "Add row".
> This makes me think tapestry is no longer picking up my add row link, and
> is instead adding it's own? I think this as if I remove the addrow link
> entirely, this is exactly what I get (the same result).
>
> So my plan is to update that zone with an empty body. I'm not quite sure
> how to do this, but as you mention AjaxResponseRenderer seems like the way
> forwards, so I do this:
>
>     @Inject
>     private AjaxResponseRenderer ajaxResponseRenderer;
>     @InjectComponent
>     private Zone addRowZone;
>
> My onAddRowFromFormLoop needs to return a "Person" object so I cannot
> return anything special, but looking at the ajaxResponseRenderer I don't
> know how I can update the contents of my addRowZone. Currently it looks
> like this:
>
> Object onAddRowFromFormLoop() {
> Person person = null;
> if (moreGuestsAllowed()) {
> person = new Person();
> invite.getPeople().add(person);
> person.setInvite(invite);
> dao.create(person);
> dao.update(invite);
> return person;
> }
>
>                 //ajaxResponseRenderer.addRender("addRowZone",
> addRowZone);
> return person;
> }
>
> I have also tried putting a t:if around the addrow link and then updating
> the zone using the above line (I assumed it would re-render it, i'm not
> quite sure) - this didn't work and I was left still with the "Add row"
> rather than the "Add a plus one" link.
>
> Any ideas why my "Add a plus one" addrowlink is lost as soon as I put it
> in the zone? I put some test text "Hello" just inside the zone before
> <p:addRow> add row link and this showed correctly, however if I put that
> inside the <p:addRow> then it does not show and on inspecting the source of
> the page produced, it isn't there at all.
>
> So it looks to me like the zone shows, but the addrow link inside it does
> not. Is this a bug, or just me?
>
> Any help is really appreciated.
>
> Thanks,
> Steve
>
> On 13 July 2015 at 20:47, Stephen Nutbrown <st...@gmail.com> wrote:
>
>> Hi!
>>
>> Wohoo, I'm getting married next year and I'm currently in the process of
>> setting up a small wedding website for my guests to RSVP. However, I have a
>> small problem which I'm sure has a simple solution, I just can't see it.
>>
>> I have an ajaxformloop for the guests to add +1s. Some have more
>> allocated than others (eg some have kids etc). I'm using the form to
>> collect names for placemats and drink preferences etc.
>>
>> I have a value from an Invite object  which represents the max number of
>> guests for the invite. My ajaxformloop should only let them add that many
>> guests using the add row link.
>>
>> I've tried returning null from my onAddNewRow event and it didn't like
>> that.
>>
>> I've also tried putting a t:if around the add new row link, however this
>> doesn't work, probably because it's ajax and doesn't update this part.
>>
>> Is there a max size parameter or something similar for the add row link
>> or the ajaxformloop? Or perhaps there is another easy way, I'm sure there
>> will be but I can't spot it.
>>
>> Thanks,
>> Steve
>>
>
>

Re: Ajaxformloop add row link max size.

Posted by Stephen Nutbrown <st...@gmail.com>.
Hi,

Thank you for your reply Lance, sorry I didn't see it sooner. I still
haven't managed to fix this, but I have done some experimenting and i'm not
sure if it's due to my misunderstanding (most likely) or some bug.

My ajaxformloop now looks like this:

<div class="col-sm-6" t:type="ajaxformloop" t:id="formloop"
source="invite.people" value="guest">
  <div class="formgroup">
  <t:label for="name"/>
  <t:textfield t:id="name" value="guest.name" t:validate="required,
maxlength=50"/>
  </div>

  <div class="formgroup">
  <t:label for="music"/>
  <t:textfield t:id="music" value="guest.music"/>
  </div>
  <div class="formgroup">
  <t:label for="attending"/>
  <t:select t:id="attending" value="guest.attending" model="attendingModel"
t:encoder="attendingEncoder"/>
  </div>
  <div class="formgroup">
  <t:label for="drink" />
  <t:select t:id="drink" value="guest.drink" model="drinkModel"
t:encoder="drinkEncoder"/>
  </div>
  <div class="formgroup">
  <t:label for="chocolate" />
  <t:select t:id="chocolate" value="guest.chocolate" model="chocolateModel"
t:encoder="chocolateEncoder"/>
  </div>
  <t:removerowlink>Remove</t:removerowlink>
  <div t:type="zone" t:id="addRowZone" id="addRowZone">
  <p:addRow>
  <t:addrowlink>Add a plus one</t:addrowlink>
  </p:addRow>
  </div>
  </div>
  <div class="col-sm-12">
  <button t:type="submit" />
  </div>



One thing I notice, is that as soon as I add the zone around the addRow
link, my add row link changes from saying "Add a plus one" to "Add row".
This makes me think tapestry is no longer picking up my add row link, and
is instead adding it's own? I think this as if I remove the addrow link
entirely, this is exactly what I get (the same result).

So my plan is to update that zone with an empty body. I'm not quite sure
how to do this, but as you mention AjaxResponseRenderer seems like the way
forwards, so I do this:

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;
    @InjectComponent
    private Zone addRowZone;

My onAddRowFromFormLoop needs to return a "Person" object so I cannot
return anything special, but looking at the ajaxResponseRenderer I don't
know how I can update the contents of my addRowZone. Currently it looks
like this:

Object onAddRowFromFormLoop() {
Person person = null;
if (moreGuestsAllowed()) {
person = new Person();
invite.getPeople().add(person);
person.setInvite(invite);
dao.create(person);
dao.update(invite);
return person;
}

                //ajaxResponseRenderer.addRender("addRowZone", addRowZone);
return person;
}

I have also tried putting a t:if around the addrow link and then updating
the zone using the above line (I assumed it would re-render it, i'm not
quite sure) - this didn't work and I was left still with the "Add row"
rather than the "Add a plus one" link.

Any ideas why my "Add a plus one" addrowlink is lost as soon as I put it in
the zone? I put some test text "Hello" just inside the zone before
<p:addRow> add row link and this showed correctly, however if I put that
inside the <p:addRow> then it does not show and on inspecting the source of
the page produced, it isn't there at all.

So it looks to me like the zone shows, but the addrow link inside it does
not. Is this a bug, or just me?

Any help is really appreciated.

Thanks,
Steve

On 13 July 2015 at 20:47, Stephen Nutbrown <st...@gmail.com> wrote:

> Hi!
>
> Wohoo, I'm getting married next year and I'm currently in the process of
> setting up a small wedding website for my guests to RSVP. However, I have a
> small problem which I'm sure has a simple solution, I just can't see it.
>
> I have an ajaxformloop for the guests to add +1s. Some have more allocated
> than others (eg some have kids etc). I'm using the form to collect names
> for placemats and drink preferences etc.
>
> I have a value from an Invite object  which represents the max number of
> guests for the invite. My ajaxformloop should only let them add that many
> guests using the add row link.
>
> I've tried returning null from my onAddNewRow event and it didn't like
> that.
>
> I've also tried putting a t:if around the add new row link, however this
> doesn't work, probably because it's ajax and doesn't update this part.
>
> Is there a max size parameter or something similar for the add row link or
> the ajaxformloop? Or perhaps there is another easy way, I'm sure there will
> be but I can't spot it.
>
> Thanks,
> Steve
>