How to make a button activate the second button

[kamal_khadka]

<h:panelGrid id="inventoryItemEditPButtons" styleClass="buttonDefaultMarginLeft">

          <h:commandButton status="globalStatusDialog"

            value="#{messages.order_buttonInventoryEditSave}" styleClass="button"

            action="#{mediator.addInventoryItem}"

            data="#{facesContext.maximumSeverity.ordinal ge 2}"/>

        </h:panelGrid>

        <h:panelGrid columns="2">

            <h:outputText value="Need more "/>

            <s:link view="/contactUs.xhtml" value="Click here"/>           

       </h:panelGrid>

       <br />

       <h:commandButton id="cbutton" styleClass="button" value="#{messages.buttonContinue}"

        action="next" style="float:right" />

right now when the first button is clicked an item is added to an inventory and stays in the same page. But if the user happen to click the second button(continue) then is taken to the account page when they can see the summary of details of the product.

I don't want the continue button to be clickable when the page is first loaded. User should be able to click only when the save button is clicked. If the user clicks the button a message should be shown.

Or when the page is first loaded only the save button should be shown and when that button is clicked then a loading gif is shown when done loading then the continue button should be shown.

Or when the use clicks the save button we can redirect to the next page. My action returns null and I can't change it as it will change the logic that other services are using. Is it possible to after the button is clicked it performs the action then redirect to next page.

Any kind of help is very much appreciated.

[mcmurdosound]

In JSF 1.2 h:commandButtons don't have attributes like "status". "data", "oncomplete" or "reRender". You should use a4j:commandButtons here.

You can disable the second button initially and reRender it after you hit the first one.

Example:

<a4j:commandButton value="first" action="#{bean.add}" reRender="list, button2" />

<rich:dataTable id="list" value="#{bean.list}" ...

...

</rich:dataTable>

<a4j:commandButton value="second" action="#{bean.secondAction}" disabled="#{empty bean.list}" styleClass="#{(empty bean.list)? 'disabled' : ''}" />

[kamal_khadka]

Changed from h:commandButton to a4j:commandButton.

Now when I hit the Save button (first button) I get a loading gif image which is good. Users will get the idea that product is saving.

If I am not wrong Continue button (second button) is disabled based on the list is empty or null and when the first button is clicked which makes the list not empty so on reRender the Continue button should be displayed.

In my SelectOneMenu I have entity and enum. Using those to disable the continue button gives me error like

Cannot convert from Enum to boolean or from Entity to boolean.

Need more Click Here and Continue button should be displayed only after Save is clicked.

<h:panelGrid>

          <a4j:commandButton 

            value="Save"

            action="addToInventory"

            reRender="cbutton, more"/>

</h:panelGrid>

<h:panelGrid>

            <h:panelGroup id="more" columns="2">

                <h:outputText value="Need More"/>

                <s:link view="contact.xhtml" value="Click here"/>           

               </h:panelGroup>

               <a4j:commandButton id="cbutton"

                   value="Continue"

                   action="next"

                   disabled="#{bean.product}"

                   styleClass="#{(bean.product)? 'disabled': ''}"/>

</h:panelGrid>

Entity selectOneMenu

<h:selectOneMenu value="#{bean.product}" required="true"

                             requiredMessage="Must choose one">

                          <s:selectItems var="_p" value="#{bean.products}" label="#{_p.product.name}" />

                          <s:convertEntity />

Enum selectOneMenu

<h:selectOneMenu value="#{bean.value}" required="true"

          requiredMessage="Must choose one"

          rendered="#{!bean.valueFixed}">

          <s:selectItems value="#{bean.values}" var="_v" label="#{_v.name}" />

          <s:convertEnum />

        </h:selectOneMenu>

Thank you very much for your help.

[mcmurdosound]

The EL-expressions for the rendered and disabled attributes have to evalutate to boolean.

rendered="#{!bean.valueFixed}" -> valueFixes must be a boolean

disabled="#{bean.product}" -> product must be a boolean

if you want to check if an entity or value is null, you have to use the "empty" operator. like:

styleClass="#{(empty bean.product)? 'disabled': ''}"

----

<s:selectItems value="#{bean.values}" var="_v" label="#{_v.name}" />

          <s:convertEnum />

only works, if bean.values is an enum.

[kamal_khadka]

rendered="#{!bean.valueFixed}" ; valueFixed property is boolean

but the bean.product is not and bean.values is an enum

I am not sure where my logic is failing: i have pasted everything below..

<ui:define name="body">

    <a4j:form>

       <s:div id="inventory">

        <h:panelGrid columns="1">

          <s:decorate id="itemDecoration" template="/layout/edit.xhtml">

            <ui:define name="label">Item : </ui:define>

                <h:selectOneMenu value="#{bean1.product}" required="true"

                      requiredMessage="Must choose one">

                          <s:selectItems var="_p" value="#{bean1.products}" label="#{_p.product.name}" />

                          <s:convertEntity />             

                  </h:selectOneMenu>

              </s:decorate>

      <s:decorate id="valueDecoration" template="/layout/edit.xhtml">

         <ui:define name="label">Value: </ui:define>

             <h:selectOneMenu value="#{bean2.value}" required="true"

                    requiredMessage="Must choose one"

                     rendered="#{!bean2.valueFixed}">

          <s:selectItems value="#{bean2.values}" var="_v" label="#{_v.name}" />

          <s:convertEnum />         

        </h:selectOneMenu>

      </s:decorate>

    </h:panelGrid>

  </s:div>

      <h:panelGrid>

          <a4j:commandButton

            value="SAVE"

            action="#{bean3.addItem}"

            reRender="next"/>

        </h:panelGrid>

        <h:panelGrid id="next">

            <h:panelGroup id="save">

                <h:outputText value="Need more "/>

                <s:link view="/contact.xhtml" value="Click here" style="font-weight: bold;"/>           

               </h:panelGroup>

               <a4j:commandButton id="cbutton"

                   value="Continue"

                     action="next"/>

        </h:panelGrid> 

     </a4j:form>

</ui:define>

Only boolean value aroung here is valueFixed. I tried to make it work by

<a4j:commandButton id="cbutton"

                    value="Continue"

                    disabled="#{bean2.valueFixed}"

                    styleClass="#{(bean2.valueFixed)?'disabled':''}"

                    action="next"/>

I am sorry It seems  obvious and I am not able to figure it out.

--- I think the best way to make things work would be when they hit SAVE they are taken to the next page. My action method returns null when save is clicked. I am not to change the method.