11 Replies Latest reply on Nov 21, 2007 6:09 AM by Ilya Shaikovsky

    using oncomplete versus onbeforedomupdate

    Joe Greene Novice

      I want to click a menu item on a rich:menuItem component, perform a bean action using the "action" attribute, assign an a4j:actionparam value to a bean variable, then rerender a portion of the page which will load markup for a rich:modalPanel, and finally show the rich:modalPanel component. Does either "oncomplete" or "onbeforedomupdate" happen after the ajax rerender operation so I can call the "show" function?

        • 1. Re: using oncomplete versus onbeforedomupdate
          Dmitry Demyankov Novice

          Use "oncomplete" to show modalPanel.

          • 2. Re: using oncomplete versus onbeforedomupdate
            Joe Greene Novice

            Dmitry -
            Thanks for the response. I am actually using "oncomplete", and the modal does not display. Maybe I've got something else wrong. Here's the markup I'm using to try to do this:

            <a4j:commandLink value="My Profile"
            oncomplete="Richfaces.showModalPanel('userProfilePanel',{top:50, left:200});blur();"
            styleClass="headerText"
            style="padding: 0 4px 0 4px; text-decoration: none;"
            title="Edit my profile" rendered="#{identity.loggedIn}"
            action="#{profileManager.initUser}"
            reRender="welcomePanel" >
            
             <a4j:actionparam name="modalName"
            value="userProfile"
            assignTo="#{modalManager.modalName}" />
            
            </a4j:commandLink>
            


            Then, further down the page, I use this markup:

            <a4j:outputPanel id="welcomePanel">
             <f:subview id="userProfilePage" rendered="#{modalManager.modalName=='userProfile'}">
             <%@include file="admin/userProfile.jsp" %>
             </f:subview>
            </a4j:outputPanel>
            
            


            Is there a problem using a different bean for the "assignTo" attribute than the one used for the parent component's "action" attribute? Thanks.
            - Joe

            • 3. Re: using oncomplete versus onbeforedomupdate
              Dmitry Demyankov Novice

              Are you sure modalPanel is not inside form and modalName value is properly set?

              • 4. Re: using oncomplete versus onbeforedomupdate
                Joe Greene Novice

                Dmitry -
                Yes, I am sure the modal panel is not inside a form - I have a form inside the modal panel, and I'm aware of the nested form problem. Also, I can debug into my "modalManager" bean, or do a System.out.println, and I see that the modal name is set to its proper value just prior to entering the "initUser" method in the "profileManager" bean. So all looks OK to me at this point. There must be something else - I just can't see it.
                - Joe

                • 5. Re: using oncomplete versus onbeforedomupdate
                  Dmitry Demyankov Novice

                  Can you post code that is included with <%@include>?

                  • 6. Re: using oncomplete versus onbeforedomupdate
                    Joe Greene Novice

                    Dmitry -
                    Here is the markup in the included file. Notice that I have a few sub-includes in here, but there are no form tags or anything in them. Also, please understand that the jsp markup has worked under different circumstances. I used to include the markup for all the rich:modalPanel pages in the primary page, and everything worked fine, but as the number of modals grew, I wanted to provide a little more efficiency by seeing how it would work to load each one via ajax only when needed. So I created the "modalManager" bean, and added the "modalName" property, and am trying to use the a4j:actionparam approach. Thanks again for your help.

                    <rich:modalPanel id="userProfilePanel" resizeable="false"
                     width="580" minHeight="460" zindex="2000">
                    
                     <f:facet name="header">
                     <a4j:outputPanel ajaxRendered="true">
                     <h:outputText value="User Profile (#{user.fullName})" />
                     </a4j:outputPanel>
                     </f:facet>
                    
                     <f:facet name="controls">
                     <h:graphicImage value="/static/img/close.png" style="cursor:pointer"
                     onclick="Richfaces.hideModalPanel('userProfilePanel')" >
                     </h:graphicImage>
                     </f:facet>
                    
                     <h:form id="userProfileForm">
                    
                     <a4j:outputPanel id="userProfileLinksPanel" style="font: normal 12pt arial; ">
                     <a4j:commandLink value="User Information" reRender="infoPanel,userProfileMessages" style="margin-right: 20px;">
                     <a4j:actionparam name="profilePanelName" value="profile" assignTo="#{profileManager.panelName}" />
                     </a4j:commandLink>
                     <a4j:commandLink value="Change Password" reRender="infoPanel,userProfileMessages">
                     <a4j:actionparam name="profilePanelName" value="changePassword" assignTo="#{profileManager.panelName}" />
                     </a4j:commandLink>
                     </a4j:outputPanel>
                    
                     <rich:spacer height="2" />
                    
                    
                     <a4j:outputPanel id="infoPanel">
                    
                    
                     <a4j:outputPanel layout="block" rendered="#{profileManager.panelName == 'profile'}">
                    
                    
                     <rich:tabPanel switchType="client" width="100%" height="280">
                    
                     <rich:tab label="Name & Contact">
                     <f:subview id="userInfoPage">
                     <%@include file="userInfo.jsp" %>
                     </f:subview>
                     </rich:tab>
                    
                     <rich:tab label="Account Settings">
                     <f:subview id="accountInfoPage">
                     <%@include file="accountInfo.jsp" %>
                     </f:subview>
                     </rich:tab>
                    
                     <rich:tab label="My Preferences">
                     <f:subview id="userPreferencesPage">
                     <%@include file="userPreferences.jsp" %>
                     </f:subview>
                     </rich:tab>
                    
                     </rich:tabPanel>
                    
                     <rich:separator height="2" lineType="solid" style="padding: 8px;"></rich:separator>
                     <div class="actionButtons" style="text-align: right;">
                     <a4j:commandButton action="#{profileManager.cancel}"
                     value="Cancel"
                     onclick="Richfaces.hideModalPanel('userProfilePanel')"
                     style="margin-right: 20px;" />
                     <a4j:commandButton action="#{profileManager.savePersonalAndAccountInfo}"
                     value="Save Personal & Account Information"
                     reRender="userProfileMessages,loginWelcome" />
                     </div>
                    
                     </a4j:outputPanel>
                    
                     <f:subview id="passwordChangePage" rendered="#{profileManager.panelName == 'changePassword'}">
                     <%@include file="passwordChange.jsp" %>
                     </f:subview>
                    
                    
                    
                     </a4j:outputPanel>
                    
                    
                     </h:form>
                    </rich:modalPanel>
                    
                    


                    • 7. Re: using oncomplete versus onbeforedomupdate
                      Dmitry Demyankov Novice

                      If everything worked with these includes than I don't really see what's wrong in here..

                      Just a guess - maybe modalManager bean is only request scope and after ajax request is finished it's value is reset.. can you use, for example, h:outputText to output modalManager.modalName value?

                      Can you see the code of the modalPanel in your page after reRendering?

                      • 8. Re: using oncomplete versus onbeforedomupdate
                        Joe Greene Novice

                        Dmitry -
                        The modalManager bean is SESSION scope, and no, I don't see the markup after rerendering. But since this is an ajax rerendering, I don't think I should be able to see it, should I? Also, I tried simply to use the following markup in the panel to rerender:

                        <a4j:outputPanel id="welcomePanel">
                         <h:outputText value="Modal Name: #{modalManager.modalName}" />
                        </a4j:outputPanel>
                        


                        The text "Modal Name:" shows up in the View Source, but does not appear on the screen. If you look at one of my earlier posts in this thread, I don't have this a4j:outputPanel inside a form because it is a placeholder for rich:modalPanel components, because each rich:modalPanel has its own set of form tags. If I want to rerender the contents of this panel, does it need to be inside form tags? When it worked earlier, I didn't have an a4j:outputPanel, I just had a list of f:subview tags because I was loading all rich:modalPanel components on the client.


                        • 9. Re: using oncomplete versus onbeforedomupdate
                          Dmitry Demyankov Novice

                          Try to add layout="none" to outputPanel or check whether h:outputText is shown with h:panelGrid instead of a4j:outputPanel.

                          • 10. Re: using oncomplete versus onbeforedomupdate
                            Joe Greene Novice

                            Dmitry -
                            I tried both of your latest suggestions, and still could not get the rich:modalPanel to appear when the link was clicked. I simplified the page code to the following:

                             <h:form id="welcomeForm">
                             <a4j:commandLink value="My Profile"
                             oncomplete="Richfaces.showModalPanel('userProfilePanel',{top:50, left:200});blur();"
                             styleClass="headerText"
                             style="padding: 0 4px 0 4px; text-decoration: none; color: blue;"
                             title="Edit my profile"
                             rendered="#{identity.loggedIn}"
                             action="#{profileManager.initUser}"
                             reRender="welcomePanel" >
                            
                             <a4j:actionparam name="modalName" value="userProfile" assignTo="#{modalManager.modalName}" />
                            
                             </a4j:commandLink>
                             </h:form>
                            
                             <a4j:outputPanel id="welcomePanel" layout="block" style="border: 1px solid red;">
                             <h:outputText value="Modal Name: #{modalManager.modalName}" />
                            
                             <rich:modalPanel id="userProfilePanel" resizeable="false"
                             width="580" minHeight="460"
                             rendered="#{modalManager.modalName == 'userProfile'}">
                            
                             <f:facet name="header">
                             <a4j:outputPanel ajaxRendered="true">
                             <h:outputText value="User Profile (#{user.fullName})" />
                             </a4j:outputPanel>
                             </f:facet>
                            
                             <f:facet name="controls">
                             <h:graphicImage value="/static/img/close.png" style="cursor:pointer"
                             onclick="Richfaces.hideModalPanel('userProfilePanel')" >
                             </h:graphicImage>
                             </f:facet>
                            
                             <h:form id="userProfileForm">
                             <f:verbatim>This is a test</f:verbatim>
                             </h:form>
                             </rich:modalPanel>
                            
                             </a4j:outputPanel>
                            
                            


                            This is all the markup between the body tags. With layout="block" like above, the h:outputText updates via ajax just fine when the link is clicked, but the rich:modalPanel still does not appear. If I change the layout attribute to "none", even the h:outputText does not update anymore.

                            With the code as shown, it looks like the "oncomplete" is being called before the rerender happens, and so the rich:modalPanel component is not in the DOM tree when I try to "show" it. It seems like its all coming down to the fact that I need to be able to call a javascript function after rerender.
                            Is there a way to do this synchronously, without resorting to creating a javascript time delay hack? I even tried setting the rich:modalPanel's style attribute to make it visible so that when it loaded it would already be visible and not rely on the "oncomplete" function, which isn't working.

                            thanks again for your help, Dmitry.

                            - Joe

                            • 11. Re: using oncomplete versus onbeforedomupdate
                              Ilya Shaikovsky Master

                              could you please check this on latest 3.2.0 snapshot. There some framework fixes for event handlers applied.