rich:popuppanel a4j:command actionListener not working on first click

[thinksteep]

Hi Community,

We are using JSF2 and Richfaces 4.1.2.

We have popuppanel with a4j:command button. actionListener associated with this command button is not being invoked on first click. Here is the code I am using. Any input would be really appreciated.

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">

    <f:subview id="mSubView">

        <div class="divHeaderArea" id="divHeaderArea">
            <div class="divHeaderLogo">
            </div>
         </div>

        <h:form id="mainForm">
            <a4j:outputPanel id='headerLinks' layout="block">
                <ul id="sddm">
                    <li>
                    <a4j:commandLink id="accountLinkId"
                                     value="Account"
                                     actionListener="#{MyBean.loadDetails}"
                                     oncomplete="#{rich:component('uAccountMId')}.show();"
                                     render="uAccountMId">
                    </a4j:commandLink>
                    </li>
                </ul>
            </a4j:outputPanel>
        </h:form>

        <rich:popupPanel id="uAccountMId"
                         style="border:5px solid #5e81ac; background-color:#dce3ed;">

            <f:facet name="header">
                <h:outputText value="User Account"/>
            </f:facet>

                <h:panelGrid columns="3" cellpadding="0" cellspacing="0" styleClass="tblDetails">
                    <h:panelGroup>
                        <h:outputText value="FirstName"/>

                    </h:panelGroup>
                    <h:inputText id="sFirstNameId"
                                 value="#{MyBean.firstName}"
                                />
                    <h:panelGroup>
                        <h:message for="settingsModalUserDetailsFirstNameId" styleClass="error"/>
                    </h:panelGroup>

                    <!-- USER LAST NAME -->
                    <h:panelGroup>
                        <h:outputText value="LastName"/>

                    </h:panelGroup>
                    <h:inputText id="sLastNameId"
                                 value="#{MyBean.lastName}"/>
                    <h:panelGroup>

                        <h:message for="settingsUserDetailsLastNameId" styleClass="error"/>
                    </h:panelGroup>
                </h:panelGrid>


                <a4j:commandButton id="saveButton"
                                   value="Save"
                                   actionListener="#{MyBean.save}"
                                   oncomplete="#{rich:component('uAccountMId')}.hide()"
                                   styleClass="buttonStyle"
                                   />

            </rich:popupPanel>

    </f:subview>
</ui:composition>


[bleathem]

Your popup panel is not in a form.  Use the domElementAttachment attribute as described in the component reference:

http://docs.jboss.org/richfaces/latest_4_2_X/Component_Reference/en-US/html/chap-Component_Reference-Panels.html#sect-Component_Reference-richpopupPanel-Showing_and_hiding_the_pop-up

[thinksteep]

Hi Brain,

Thank you for the answer. Should I set it to parent (or) form?  As well as if possible can you please type in, how actionListener and domElementAttachement work together for my understanding?

Thank you,

[bleathem]

If you want to use parent, you'll have to nest the popup in your form.

Without setting this attribute, the popup and its child elements are not in a form.  JSF components have to be in a form in order to participate in an ajax request.

[thinksteep]

Hi Brain,

Thank you for the description. If I wrap the content in richpoppanel inside a form, then I don't  this attribute. Am I correct?

Thank you,

[bleathem]

No, you'll still need it. From the linked doc above:

The <rich:popupPanel> component is usually rendered in front of any other objects on the page. This is achieved by attaching the component to the <body> element of the page, and setting a very high "z-index" (the stack order of the object). This approach is taken because relatively-positioned elements could still overlap the pop-up panel if they exist at higher levels of the DOM hierarchy, even if their z-index is less than the <rich:popupPanel> component.

If the <rich:popupPanel> is to participate in submitting child components/behaviors, then a form element must be nested within the <rich:popupPanel>. Alternatively, if no overlapping elements exist, the <rich:popupPanel> component can be reattached to its original DOM element by setting domElementAttachment to either parent or form.

[thinksteep]

Hi Brain,

Thanks for the information. I tried with both page and form options, no luck. Here is updated code. Attached generated HTML. Any inputs would be really appreciated. I have been struggling since two days.  Thanks for your time and help.

first.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  

      xmlns:h="http://java.sun.com/jsf/html"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:a4j="http://richfaces.org/a4j"

      xmlns:rich="http://richfaces.org/rich"

      xmlns:f="http://java.sun.com/jsf/core"

      >

    <f:view>

        <h:head>

        </h:head>

        <h:body>

            <ui:include id="mainBodyIndludeId" src="/newfolder/second.xhtml"/>

         </h:body>

    </f:view>

</html>

second.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">

    <f:subview id="mainBodySubView">

             <rich:popupPanel id="uMPanelId"

                             autosized="true"

                             resizeable="false"

                             moveable="true" domElementAttachment="form">

                <f:facet name="header">

                    <h:outputText value="Account"/>

                </f:facet>

                <h:form id="uAFormId">

                    <a4j:outputPanel layout="block">

                        <h:panelGrid columns="3" cellpadding="0" cellspacing="0">

                            <!-- USER FIRST NAME -->

                            <h:panelGroup>

                                <h:outputText value="FirstName"/>

                                <h:outputText value="*" />

                            </h:panelGroup>

                            <h:inputText id="settingsModalUserDetailsFirstNameId"

                                         value="#{UsersBean.user.firstName}"/>

                            <h:panelGroup>

                                <h:message for="settingsModalUserDetailsFirstNameId" />

                            </h:panelGroup>

                            <!-- USER LAST NAME -->

                            <h:panelGroup>

                                <h:outputText value="LastName"/>

                                <h:outputText value="*"/>

                            </h:panelGroup>

                            <h:inputText id="settingsUserDetailsLastNameId"

                                         value="#{UsersBean.user.lastName}"

                                         />

                            <h:panelGroup>

                                <h:message for="settingsUserDetailsLastNameId" />

                            </h:panelGroup>

                        </h:panelGrid>   

                    </a4j:outputPanel>

                    <!-- BUTTONS -->

                    <a4j:outputPanel layout="block" styleClass="divPopupButtons">

                        <a4j:commandButton id="accountModalPanelSaveButton"

                                           value="SAVE"

                                           actionListener="#{UsersBean.saveLoggedUserAccount}"

                                           />

                    </a4j:outputPanel>

                </h:form>

            </rich:popupPanel>

        <h:form id="mForm">

           <a4j:outputPanel id='headerLinks' layout="block">

                <ul id="sddm">

                    <li>

                    <a4j:commandLink id="accountLinkId"

                                     value="Account"

                                     actionListener="#{UsersBean.loadLoggedUserAccount}"

                                     oncomplete="#{rich:component('uMPanelId')}.show();"

                                     render=":uMPanelId :uAFormId">

                    </a4j:commandLink>

                    </li>

                </ul>

            </a4j:outputPanel>

        </h:form>

    </f:subview>

</ui:composition>

[thinksteep]

Hi Brain,  Any pointers on this?  Thank you,

[bleathem]

Your code looks good.  Can you upload a fully-functioning, simplest-possible sample that I can build/run locally?

https://community.jboss.org/wiki/SubmittingEffectiveIssueReports

(no need to file an issue yet, but please attach a simple/runnable sample)

Brian

[thinksteep]

Hi Brain,    I couldn't upload war and source files (10MB) may be because of jars. Application is very simple 2 xhtml pages and one java bean. Could you please let me know where can I upload these files?  Thank you,

[thinksteep]

Hi Brain,

Here is source and war file. On first page you will see "Account", when you click on it one popup window comes up. Enter something there and click "SAVE". You won't see actionListener for SAVE button being called (no System.out statments will print). On second click you will see System.out statements.

Please help us on how to proceed.

Thanks for your time and help.

[khosro_question]

I do not know whether this is useful ,but maybe a workaround posted here https://issues.jboss.org/browse/RF-11355?focusedCommentId=12629789&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-12629789  by Derk Dukker is useful.

Khosro.

[thinksteep]

Hi,  Thanks for posting link. I did try Derk suggested solution before posting this thread. It didn't work. I will try again.  Thank you,

[bleathem]

i ran your code, and can confirm it it's broken as you descirbe.  I was able to get it working by using a single form, as in:

<!DOCTYPE html>

<html lang="en"

      xmlns="http://www.w3.org/1999/xhtml"

      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:h="http://java.sun.com/jsf/html"

      xmlns:ui="http://java.sun.com/jsf/facelets"

      xmlns:rich="http://richfaces.org/rich"

      xmlns:c="http://java.sun.com/jsp/jstl/core"

      xmlns:richext="http://java.sun.com/jsf/composite/richext"

      xmlns:a4j="http://richfaces.org/a4j">

<h:head>

    <title>Account page</title>

</h:head>

<h:body>

    <h:form id="mainPageLinksForm">

        <rich:popupPanel id="userAccountModalPanelId"

                         autosized="true"

                         resizeable="false"

                         moveable="true"

                         style="border:5px solid #5e81ac; background-color:#dce3ed;" domElementAttachment="form">

            <f:facet name="header">

                <h:outputText value="UserAccount"/>

            </f:facet>

            <a4j:outputPanel layout="block">

                <h:panelGrid columns="3" cellpadding="0" cellspacing="0">

                    <h:panelGroup>

                        <h:outputText value="Password"/>

                        <h:outputText value="*"/>

                    </h:panelGroup>

                    <h:inputText id="settingsModalUserDetailsFirstNameId"

                                 value="#{LoginBean.password}"/>

                    <h:panelGroup>

                        <h:outputText value="New Password"/>

                        <h:outputText value="*"/>

                    </h:panelGroup>

                    <h:inputText id="settingsUserDetailsLastNameId"

                                 value="#{LoginBean.newPassword}"/>

                </h:panelGrid>

            </a4j:outputPanel>

            <!-- BUTTONS -->

            <a4j:outputPanel layout="block" styleClass="divPopupButtons">

                <a4j:commandButton id="accountModalPanelSaveButton"

                                   value="SAVE"

                                   actionListener="#{LoginBean.saveLoggedUserAccount}"

                        />

            </a4j:outputPanel>

        </rich:popupPanel>

        <a4j:outputPanel id='headerLinks' layout="block">

            <ul id="sddm">

                <li>

                    <a4j:commandLink id="accountLinkId"

                                     value="Account"

                                     actionListener="#{LoginBean.loadLoggedUserAccount}"

                                     oncomplete="#{rich:component('userAccountModalPanelId')}.show();"

                                     render=":userAccountModalPanelId :userAccountFormId">

                    </a4j:commandLink>

                </li>

            </ul>

        </a4j:outputPanel>

    </h:form>

</h:body>

</html>

However, the way you had it *should* work, please file a jira, and include the source zip file from this thread.

Thanks for the feedback, and taking the time to create an isolated sample reproducing the error!

[holger.lierse]

I'm facing the same issue 1 year later. Was there ever a jira raised for this?