ace:dialog component sample not working

Question

http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Server%20Initiated I am just trying to learn how to use this component. But unable to run this example. When I click the button nothing happens. Does anybody have any idea? There is no error message either.

<h:form>
        <h:panelGroup style="display:block; text-align:center;">
            <ace:pushButton id="show" value="Show Dialog"
                            type="button">
                <ace:ajax execute="@none" render="@none"
                          onStart="ice.ace.instance('#{dialog.clientId}').show(); return false;"/>
            </ace:pushButton>
        </h:panelGroup>
    </h:form>
    <ace:dialog id="dialog" binding="#{dialog}"
                header="A sample dialog overview example"
                closable="false"
                modal="true"
                draggable="false"
                showEffect="clip"
                hideEffect="fade"
                width="400">

        <h:form id="inputForm">
            <h:panelGrid columns="2" width="100%">
                <h:outputLabel id="firstNameLabel" for="firstNameInputField" value="First Name:"/>
                <ace:textEntry id="firstNameInputField"
                               value="#{dialogBean.firstName}" />

                <h:outputLabel id="lastNameLabel" for="lastNameInputField" value="Last Name:"/>
                <ace:textEntry id="lastNameInputField"
                               value="#{dialogBean.lastName}"/>
            </h:panelGrid>

            <h:panelGrid width="100%" style="text-align: center;">
                <ace:pushButton id="submitBtn"
                                value="Click me once done with input">
                    <ace:ajax execute="@form" render="@all"
                              onSuccess="ice.ace.instance('#{dialog.clientId}').hide(); "/>
                </ace:pushButton>
            </h:panelGrid>
        </h:form>

    </ace:dialog>


    <h:form id="outputForm">
        <h:panelGrid id="outputPanel" columns="2">
            <h:outputLabel value="Entered text: " for="enteredName"/>
            <h:outputText id="enteredName" value="#{dialogBean.firstName} #{dialogBean.lastName}"/>
        </h:panelGrid>
    </h:form>

This is the client side code from the example.

Answer 1

<h:form prependId="false">
<h:commandButton id="show" value="Show Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>

            <ace:dialog id="myDialog"
                        header="A sample dialog overview example"
                        width="400">
            <h:outputText value="i will fix this"/>


</ace:dialog>
</h:form>

I was able to find the solution to the problem. One of the key problem was that I was suppose to use prependId="false" with form. so now the basic functionality works and on button click the ace:dialog appears.