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

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

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

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

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

Chris Poulsen
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 <[hidden email]> 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?
>
Reply | Threaded
Open this post in threaded view
|

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

roasteddragon
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 <[hidden email]>
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 <[hidden email]> 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?
> >
>