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, Jun 08 '18 at 17:04
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. — Arka Mallick, Jun 09 '18 at 09:44
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 http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Overview, 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, Jun 09 '18 at 11:28
Ice faces had widgetvar previously, now they have this new changes. I guess they wanna move on :p — Arka Mallick, Jun 09 '18 at 11:38
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, Jun 09 '18 at 13:00

score 1 · Accepted Answer · answered Jun 08 '18 at 13:38

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.

answered Jun 08 '18 at 13:38

Arka Mallick

1,206
3
15
28

1

No, bad design. See https://stackoverflow.com/questions/7415230/uiform-with-prependid-false-breaks-fajax-render – Kukeltje Jun 08 '18 at 17:02
Thank you for the link. I saw the concept before and I have kept a note of it. However, this documentation link even suggests that one might have to prepend_id = false. So I am bit confused and need to spent more time in this research. So as of now keeping this component out of design. – Arka Mallick Jun 09 '18 at 09:51
1

Assigning an explicit id to the form and use that as a prefix in `ice.ace.instance(':myDialog').show();` would (should) have solved it to without the need for having `prependId="false"` – Kukeltje Jun 09 '18 at 11:27
Ok i ma gonna try this out. – Arka Mallick Jun 09 '18 at 11:37

ace:dialog component sample not working

1 Answers1