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.

What is the error? Would be VERY helpful if you posted the error — Kukeltje
There was an error about the something not inside a form. So I wrapped the ajax button inside a form and then there were no more errors. — Haramoz
There are several other things (overly) complex in your example and different from the showcase you refer too. First of all you do not show from the server side but in an onstart. Secondly you overly complex use binding to get to a client id to use that in javascript. Oh, but I see they do what you have in icefaces-showcase.icesoft.org/…, not the server initiated. Weird and overly complext. This is not needed in PrimeFaces, they have a widgetVar for this and I expected IceFaces to have that as well since they forked PrimeFaces. — Kukeltje
Ice faces had widgetvar previously, now they have this new changes. I guess they wanna move on :p — Haramoz
Well, there is one advantage. You do not need to know the full clientId upfront, if you have multiple namingcontainers and things might 'move around'. Refactoring becomes a little easier. — Kukeltje

Haramoz Haramoz · Accepted Answer · 2018-06-08T13:38:54

<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.

ace:dialog component sample not working

1 Answers