You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Sumanth <ro...@gmail.com> on 2014/12/02 19:54:13 UTC

A submit button block inside an ajax form causing problem with disabling the input.

Hello Guys,

Let me explain what I'm trying to achieve first,

I have a table with select button and below the table a submit button "Add
me to the table". If he adds himself, his name is shown on the table and
the button is removed. He can delete himself from the table by selecting
the select button from the table. Once he removes himself, the "Add me to
the table" is shown again. This whole thing of what has to be shown and
which buttons are to shown depends on certain permissions(Business logic).

So, I'm doing it using blocks to reduce un-necessary if else if else code
.below is a form for the buttonBlock

        <t:block t:id="bookingForm" >
          <t:zone t:id="tableZone" id="tableZone">
            <t:form t:id="tableZoneForm" id="tableZoneForm" t:zone="^">
              <t:if t:test="condition1" >
                <t:if t:test="condition2" >
                   <t:delegate t:to="buttonBlock" />
                </t:if>
              </t:if>
            </t:form>
          </t:zone>
        </t:block>

And the code of the block which gets rendered.

<t:block t:id="submitButtonBlock" >
 <div class="row" >
  <t:submit t:id="addToTable" id="addToTable" value="add me to table"
            t:event="addmeToTable" />
   </div>
 </t:block>



Everything is working fine. I'm able to add > the button disappears >
delete the resource from table > the button reappears etc.

Now I've a requirement to change the text to "adding resource", disable the
submit button when clicked  , before zone update and then hide the button.
This too works fine. when the resource is deleted from the table and the
zone is updated again, the submit button is re-rendered with a different
id.

The javascript used to do this
void afterRender()  {

javascriptSupport.require("mixins/ajax-submit-processing").with(addToTable.getClientId());
  }

This does not behave like ""adding resource", disable the submit button
when clicked" since the id has changed to "addToTable_f378583" etc  . How
to prevent this?

Re: A submit button block inside an ajax form causing problem with disabling the input.

Posted by Sumanth <ro...@gmail.com>.
Hi Chris,

Thanks for this help. But we used a mixin, which always gets invoked and
this solved the issue for me :) .

On Wed, Dec 3, 2014 at 10:36 AM, Chris Poulsen <ma...@nesluop.dk>
wrote:

> Normally you can fix the client id by specifying it yourself - but it seems
> like the submit component does not honor this?
>
> You could mark up the submit in another way (a data attribute or something
> else that allows you to find it in the DOM)
>
> --
> Chris
>
> On Tue, Dec 2, 2014 at 7:54 PM, Sumanth <ro...@gmail.com> wrote:
>
> > Hello Guys,
> >
> > Let me explain what I'm trying to achieve first,
> >
> > I have a table with select button and below the table a submit button
> "Add
> > me to the table". If he adds himself, his name is shown on the table and
> > the button is removed. He can delete himself from the table by selecting
> > the select button from the table. Once he removes himself, the "Add me to
> > the table" is shown again. This whole thing of what has to be shown and
> > which buttons are to shown depends on certain permissions(Business
> logic).
> >
> > So, I'm doing it using blocks to reduce un-necessary if else if else code
> > .below is a form for the buttonBlock
> >
> >         <t:block t:id="bookingForm" >
> >           <t:zone t:id="tableZone" id="tableZone">
> >             <t:form t:id="tableZoneForm" id="tableZoneForm" t:zone="^">
> >               <t:if t:test="condition1" >
> >                 <t:if t:test="condition2" >
> >                    <t:delegate t:to="buttonBlock" />
> >                 </t:if>
> >               </t:if>
> >             </t:form>
> >           </t:zone>
> >         </t:block>
> >
> > And the code of the block which gets rendered.
> >
> > <t:block t:id="submitButtonBlock" >
> >  <div class="row" >
> >   <t:submit t:id="addToTable" id="addToTable" value="add me to table"
> >             t:event="addmeToTable" />
> >    </div>
> >  </t:block>
> >
> >
> >
> > Everything is working fine. I'm able to add > the button disappears >
> > delete the resource from table > the button reappears etc.
> >
> > Now I've a requirement to change the text to "adding resource", disable
> the
> > submit button when clicked  , before zone update and then hide the
> button.
> > This too works fine. when the resource is deleted from the table and the
> > zone is updated again, the submit button is re-rendered with a different
> > id.
> >
> > The javascript used to do this
> > void afterRender()  {
> >
> >
> >
> javascriptSupport.require("mixins/ajax-submit-processing").with(addToTable.getClientId());
> >   }
> >
> > This does not behave like ""adding resource", disable the submit button
> > when clicked" since the id has changed to "addToTable_f378583" etc  . How
> > to prevent this?
> >
>

Re: A submit button block inside an ajax form causing problem with disabling the input.

Posted by Chris Poulsen <ma...@nesluop.dk>.
Normally you can fix the client id by specifying it yourself - but it seems
like the submit component does not honor this?

You could mark up the submit in another way (a data attribute or something
else that allows you to find it in the DOM)

-- 
Chris

On Tue, Dec 2, 2014 at 7:54 PM, Sumanth <ro...@gmail.com> wrote:

> Hello Guys,
>
> Let me explain what I'm trying to achieve first,
>
> I have a table with select button and below the table a submit button "Add
> me to the table". If he adds himself, his name is shown on the table and
> the button is removed. He can delete himself from the table by selecting
> the select button from the table. Once he removes himself, the "Add me to
> the table" is shown again. This whole thing of what has to be shown and
> which buttons are to shown depends on certain permissions(Business logic).
>
> So, I'm doing it using blocks to reduce un-necessary if else if else code
> .below is a form for the buttonBlock
>
>         <t:block t:id="bookingForm" >
>           <t:zone t:id="tableZone" id="tableZone">
>             <t:form t:id="tableZoneForm" id="tableZoneForm" t:zone="^">
>               <t:if t:test="condition1" >
>                 <t:if t:test="condition2" >
>                    <t:delegate t:to="buttonBlock" />
>                 </t:if>
>               </t:if>
>             </t:form>
>           </t:zone>
>         </t:block>
>
> And the code of the block which gets rendered.
>
> <t:block t:id="submitButtonBlock" >
>  <div class="row" >
>   <t:submit t:id="addToTable" id="addToTable" value="add me to table"
>             t:event="addmeToTable" />
>    </div>
>  </t:block>
>
>
>
> Everything is working fine. I'm able to add > the button disappears >
> delete the resource from table > the button reappears etc.
>
> Now I've a requirement to change the text to "adding resource", disable the
> submit button when clicked  , before zone update and then hide the button.
> This too works fine. when the resource is deleted from the table and the
> zone is updated again, the submit button is re-rendered with a different
> id.
>
> The javascript used to do this
> void afterRender()  {
>
>
> javascriptSupport.require("mixins/ajax-submit-processing").with(addToTable.getClientId());
>   }
>
> This does not behave like ""adding resource", disable the submit button
> when clicked" since the id has changed to "addToTable_f378583" etc  . How
> to prevent this?
>