1 2 Previous Next 16 Replies Latest reply on May 4, 2007 12:31 PM by Sergey Smirnov

    problem with modalPanel from 3.0.1 snapshot

    moldovan Newbie

      Hello!

      I use a modalPanel for my Account-Blocking-Mechanism. the content of the panel is a selectOneListBox to choose the blockreason, and a commandButton, which calls the actionmethod for account-blocking.

      I implemented it sucessfull with version 3.0.0 of Richfaces.

      But with a 3.0.1 snapshot i run into problems.

      First, the short cutout from code:

      <rich:modalPanel id="blockaccount_popup" minHeight="250" minWidth="450" height="250" width="450" zindex="2000">
       <f:facet name="header">
       <h:outputText value="#{messages.accountinfo_popup_headerlabel}" />
       </f:facet>
       <f:facet name="controls">
       <t:graphicImage border="0" value="images/icon_close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('contentform:accountinfocontent:blockaccount_popup')" />
       </f:facet>
       <h:panelGrid style="text-align: left; padding: 20px;">
       <f:facet name="header">
       <h:outputText style="color: red;" value="#{messages.popup_label_reason}" />
       </f:facet>
       <h:selectOneListbox style="width: 300px;" value="#{accountManagement.accountBlockReason.selected}" size="5" >
       <f:selectItems value="#{accountManagement.accountBlockReason.list}" />
       </h:selectOneListbox>
       </h:panelGrid>
       <h:panelGrid styleClass="positioning_verticalcenter">
       <h:commandLink action="#{accountManagement.blockAccount}" value="#{messages.accountinfo_button_blockaccount_label}" />
       </h:panelGrid>
      </rich:modalPanel>
      


      The first new problem is:
      When i select a blockreason, and after that i click the button, i see, that setters in the managed-bean are not called.
      But commandButton - action is called.

      So, i tried to surround the content of the modalPanel with a form, but with the affect, that the content of the panel wasn't shown any more.

      I don't think that I'm making something wrong, because with the 3.0.0 version it runs successfull.

      Any idea, which can be the problem?

      thx, thomas!

        • 1. Re: problem with modalPanel from 3.0.1 snapshot
          Alexander Belov Novice

          New version of modalPanel must have form inside. See other posts.

          • 2. Re: problem with modalPanel from 3.0.1 snapshot
            moldovan Newbie

            You are right! I had to surround the content of the modalpanel with a form.

            But i have also posted, that, when i include a form in my modalPanel, the content (my selection, my button, ..) will disappear.

            So, why I'm getting an empty content in my modalPanel, when this content is surrounded with a form?

            • 3. Re: problem with modalPanel from 3.0.1 snapshot
              moldovan Newbie

              Any ideas, why my modalPanel is empty, when i surround the content of the modalPanel with a form?

              • 4. Re: problem with modalPanel from 3.0.1 snapshot
                Alexander Belov Novice

                Please your code of modalPanel with form inside.

                • 5. Re: problem with modalPanel from 3.0.1 snapshot
                  moldovan Newbie

                  JSP-Site from my written sample-webapp:

                  <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
                  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                  <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                  <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                  <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                  
                  <html>
                   <head>
                   <title>AJAX - WebApplication</title>
                   </head>
                   <body>
                   <f:view>
                   <h:form id="siteform">
                   <a4j:outputPanel ajaxRendered="true">
                   <h:messages showDetail="false" showSummary="true" />
                   </a4j:outputPanel>
                   <h:outputLink value="javascript:Richfaces.showModalPanel('mp',{width:450, top:200})" >
                   <h:outputText value="Popup-Box öffnen" />
                   </h:outputLink>
                   <div>
                   <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="200" width="450" zindex="2000">
                   <f:facet name="header">
                   <h:outputText value="PopupBox - Title" />
                   </f:facet>
                   <f:facet name="controls">
                   <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
                   </f:facet>
                   <h:form>
                   <h:outputText value="Bitte machen Sie ihre Eingabe: " />
                   <h:inputText value="#{modalPanelBean.inputText}" />
                   <h:panelGrid style="margin-left: auto; margin-right: auto;">
                   <h:commandLink value="Close Popup" action="#{modalPanelBean.doAction}"
                   onclick="javascript:Richfaces.hideModalPanel('mp')" />
                   </h:panelGrid>
                   </h:form>
                   </rich:modalPanel>
                   </div>
                   </h:form>
                   </f:view>
                   </body>
                  </html>
                  


                  ModalPanelBean
                  package net.wimaxxed.ajaxwebapp.webapp.bean;
                  
                  public class ModalPanelBean
                  {
                   private String inputText = null;
                  
                   public String doAction()
                   {
                   System.out.println("Eingegebener Text war _> "+inputText);
                   return null;
                   }
                  
                   public String getInputText() {
                   return inputText;
                   }
                  
                   public void setInputText(String inputText) {
                   System.out.println("Setter called _> "+inputText);
                   this.inputText = inputText;
                   }
                  }
                  


                  For information:

                  when i surround the content of the modalPanel (what i have done in my sample-application) with form, the content is not shown.
                  when i surround also the facets of the modalPanel with form, nothing will be shown.



                  • 6. Re: problem with modalPanel from 3.0.1 snapshot
                    Sergey Smirnov Master

                    do you use Ajax4jsf 1.1.1 snapshot or still 1.1.0 ?

                    • 7. Re: problem with modalPanel from 3.0.1 snapshot
                      moldovan Newbie

                       

                      "SergeySmirnov" wrote:
                      do you use Ajax4jsf 1.1.1 snapshot or still 1.1.0 ?


                      Oh, ok....I'm using still a4j version 1.1.0

                      I'm thinking, i have to switch to a snapshot version, to get it working!??

                      .
                      .
                      .
                      .
                      .

                      Ok, i tested it with a snapshot of today and it is working! I haven't known it, that i have to switch a a4j-lib.

                      Thanks for your replies!

                      • 8. Re: problem with modalPanel from 3.0.1 snapshot
                        moldovan Newbie

                        It's frustrating!

                        I'm sorry, but nevertheless it does not function.

                        At night, i made the steps (changing a4j-lib, including form) in my crm-webapp, but was wondering, why my action gets not called. I activated fire-bug and saw, that i get an jacascript-error:

                        f has no properties
                        clearFormHiddenParams_contentform_accountinfocontent_popupforminside("contentform:accountinfocontent:popupforminside")DisplayCustomerLi... (line 611)
                        oamSubmitForm("contentform:accountinfocontent:popupforminside", "contentform:accountinfocontent:popupforminside:_idJsp173", undefined, undefined)DisplayCustomerLi... (line 507)
                        onclick(click clientX=0, clientY=0)DisplayCustomerLi... (line 1)
                        [Break on this error] f.elements['contentform:accountinfocontent:popupforminside:_idcl'].value='';
                        


                        Do you you clear-functions? I think, myfaces does.

                        the function in my rendered html-site is:
                        function clearFormHiddenParams_contentform_accountinfocontent_popupforminside(currFormName)
                         {
                         var f = document.forms['contentform:accountinfocontent:popupforminside'];
                         f.elements['contentform:accountinfocontent:popupforminside:_idcl'].value='';
                         f.elements['contentform:accountinfocontent:popupforminside:_link_hidden_'].value='';
                         f.target='';
                         }
                        


                        Im getting this js-error also in my sample-webapp, but i hadn't seen it yesterday.
                        As texted before, I'm thinking this is myfaces-behaviour, but i doesn't know it for sure.


                        • 9. Re: problem with modalPanel from 3.0.1 snapshot
                          Arwen Newbie

                          Hi Moldovan,

                          I'm at the same situation...

                          I upgrade the version, the respective .jars, and nothing... :(

                          If you has news, please, post here or let me now !

                          I will do the same.

                          Thanks,
                          Carla.

                          • 10. Re: problem with modalPanel from 3.0.1 snapshot
                            Sergey Smirnov Master

                            It is a greeting from myfaces and specific browser bug:
                            document.forms collection is not updated during the DOM replacement. As soon as Myfaces uses document.forms[] instead of document.getElementById() there, the problem occurs.

                            Try to use a4j:form and a4j:htmlCommandLink as a substitute for h:form and h:commandLink. One of the motivation why those two components are in the core library was this incompatibility myfaces with Ajax.

                            • 11. Re: problem with modalPanel from 3.0.1 snapshot
                              moldovan Newbie

                              oh thanks, sergey!

                              I will try it today, and let you know, if it is working!

                              • 12. Re: problem with modalPanel from 3.0.1 snapshot
                                moldovan Newbie

                                No good news!

                                I'm getting a new js-error, when clicking the link inside my modalpanel. This is the cutout from firebug:


                                this._form has no properties
                                Query("_viewRoot", null)org.ajax4jsf.fram... (line 68)
                                SubmiteventsQueue("_viewRoot", "siteform:popupform", Object type=click, Object parameters=Object)org.ajax4jsf.fram... (line 53)
                                Submit("_viewRoot", "siteform:popupform", click clientX=0, clientY=0, Object parameters=Object)org.ajax4jsf.fram... (line 53)
                                onclick(click clientX=0, clientY=0)TestModalPanel.js... (line 1)
                                [Break on this error] elem=document.getElementById(targetID+".stop");if(elem){elem.style.display="";if...


                                Here is the jsp-site from my sample-webapp:
                                <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
                                <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                                <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                                <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
                                <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                                
                                <html>
                                 <head>
                                 <title>AJAX - WebApplication</title>
                                 </head>
                                 <body>
                                 <f:view>
                                 <a4j:form id="siteform">
                                 <a4j:outputPanel ajaxRendered="true">
                                 <h:messages showDetail="false" showSummary="true" />
                                 </a4j:outputPanel>
                                 <h:outputLink id="outputlink" value="javascript:Richfaces.showModalPanel('mypopup',{width:450, top:200})" >
                                 <h:outputText value="Popup-Box öffnen" />
                                 </h:outputLink>
                                 <div>
                                 <rich:modalPanel id="mypopup" minHeight="200" minWidth="450" height="200" width="450" zindex="2000">
                                 <f:facet name="header">
                                 <h:outputText value="PopupBox - Title" />
                                 </f:facet>
                                 <f:facet name="controls">
                                 <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mypopup')" />
                                 </f:facet>
                                 <a4j:form id="popupform">
                                 <h:outputText value="Bitte machen Sie ihre Eingabe: " />
                                 <h:inputText id="popupinputtext" value="#{modalPanelBean.inputText}" />
                                 <h:panelGrid style="margin-left: auto; margin-right: auto;">
                                 <a4j:commandLink id="popupcommandlink" value="Close Popup" action="#{modalPanelBean.doAction}" onclick="javascript:Richfaces.hideModalPanel('mypopup')" />
                                 </h:panelGrid>
                                 </a4j:form>
                                 </rich:modalPanel>
                                 </div>
                                 </a4j:form>
                                 </f:view>
                                 </body>
                                </html>
                                


                                What I'm doing wrong?

                                • 13. Re: problem with modalPanel from 3.0.1 snapshot
                                  Sergey Smirnov Master

                                  Move modal panel outside the external form. Also, there is no reason to have around the modal panel, as soon as it has a absolute position.

                                  Pay attention: I told "replace h:commandLink with a4j:htmlCommandLink" , but not "with a4j:commandLink". a4j:htmlCommandLink and a4j:commandLink are very very different component.

                                  • 14. Re: problem with modalPanel from 3.0.1 snapshot
                                    moldovan Newbie

                                    Thanks Sergey!

                                    With your modifications (shown in above code), it worked for me:

                                    <html>
                                     <head>
                                     <title>AJAX - WebApplication</title>
                                     </head>
                                     <body>
                                     <f:view>
                                     <a4j:form id="siteform">
                                     <a4j:outputPanel ajaxRendered="true">
                                     <h:messages showDetail="false" showSummary="true" />
                                     </a4j:outputPanel>
                                     <h:outputLink id="outputlink" value="javascript:Richfaces.showModalPanel('mypopup',{width:450, top:200})" >
                                     <h:outputText value="Popup-Box öffnen" />
                                     </h:outputLink>
                                     </a4j:form>
                                     <div>
                                     <rich:modalPanel id="mypopup" minHeight="200" minWidth="450" height="200" width="450" zindex="2000">
                                     <f:facet name="header">
                                     <h:outputText value="PopupBox - Title" />
                                     </f:facet>
                                     <f:facet name="controls">
                                     <h:outputText value="X" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mypopup')" />
                                     </f:facet>
                                     <a4j:form id="popupform">
                                     <h:outputText value="Bitte machen Sie ihre Eingabe: " />
                                     <h:inputText id="popupinputtext" value="#{modalPanelBean.inputText}" />
                                     <h:panelGrid style="margin-left: auto; margin-right: auto;">
                                     <a4j:htmlCommandLink id="popuphtmlcommandlink" value="Close Popup" action="#{modalPanelBean.doAction}" >
                                     <f:param name="MyTestParam" value="MeinTestParameter" />
                                     </a4j:htmlCommandLink>
                                     </h:panelGrid>
                                     </a4j:form>
                                     </rich:modalPanel>
                                     </div>
                                     </f:view>
                                     </body>
                                    </html>
                                    

                                    Don't ask me, why the modalPanel must be outside the siteform, because when i put the modalPanel inside the siteform, its stopps working, and i have no idea why.



                                    But i have a last question, maybe one of you has a solution for this requirement:
                                    I have a table, where products are displayed. In each row I'm preventing a link, where you can block the product.
                                    When clicking the link, a modalPanel should be shown, where you can select a blocking-reason (from selectbox) and click on a further commandLink to invoke the blocking action.

                                    So, when clicking the link, i had to get/store the id of the corresponding product from the row, and i had to activate the modalPanel
                                    After selecting a reason and clicking the blocking-link inside the modal panel, the action should be invoked and block the product with the id I getted/stored.

                                    Is it possible to this via a4j:commandLink in each table-row, with a4j:actionparam to assign the product id to a value in a bean, and the showModalPanel-Algorithm at oncomplete from commandLink??
                                    Can it work?

                                    Or does somebody has a better way??

                                    Thanks for your answers!

                                    1 2 Previous Next