9 Replies Latest reply on Sep 24, 2008 12:15 PM by nathandennis

    Modal Panel Problem 3.3.0

    nathandennis

      It would seem that any type of ajax call within a modal panel in last nights nightly build is causing the modal panel to close undesirably.
      this was working code in both 3.2.0 and 3.2.2




      <rich:modalPanel id="textboxmp" minHeight="375" minWidth="450" top="20" style="padding:0px;">
       <f:facet name="header" style="height:20px;">
       <h:outputText value="Edit Text" />
       </f:facet>
      
       <f:facet name="controls">
       <h:form id="textgenform">
       <a:commandLink
       oncomplete="Richfaces.hideModalPanel('textboxmp');">
       <h:graphicImage value="/img/error.gif"
       style="cursor:pointer;border:0px;"
       />
      
       </a:commandLink>
       </h:form>
       </f:facet>
       <a:form id="textedit" ajaxSubmit="true">
      
      
      <div id="textBox"
       style="position: absolute;
       left: 25px;
       top: 25px;
       z-index: 1;
       visibility: visible;">
       <table width="100%"><tr><td align="center" colspan="4">
       <span style="font-size:12pt;">Etching:</span><br/>
       <h:inputText value="#{textmodAction.text}" style="padding:2px;padding-left:4px;">
       <a:support event="onkeyup" reRender="textgencontainer"
       eventsQueue="texteditQueue" ajaxSingle="true" />
       </h:inputText>
       <br/>
       </td></tr>
       <tr><td>
       Font:<br/>
       <h:selectOneMenu id="fonttype" value="#{textmodAction.fonttype}">
       <!--
       <s:selectItems value="#{textmodAction.fontnamelist}"
       var="fnlist" label="#{textmodAction.fontnamelist.toString()}" />
       -->
       <f:selectItem itemLabel="Arial" itemValue="Arial" />
       <f:selectItem itemLabel="Courier" itemValue="Courier" />
       <f:selectItem itemLabel="Dialog" itemValue="Dialog" />
       <f:selectItem itemLabel="Lucida Sans" itemValue="Lucida Sans" />
       <f:selectItem itemLabel="Lucida Bright" itemValue="Lucida Bright" />
       <f:selectItem itemLabel="Helvetica" itemValue="Helvetica" />
       <f:selectItem itemLabel="Monospaced" itemValue="Monospaced" />
       <f:selectItem itemLabel="SansSerif" itemValue="SansSerif" />
       <f:selectItem itemLabel="Serif" itemValue="Serif" />
       <f:selectItem itemLabel="TimesRoman" itemValue="TimesRoman" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
      
      
      </td><td>
       Font Color:<br/>
       <h:selectOneMenu id="fontcolor" name="fontcolor" value="#{textmodAction.fontcolor}"
       >
       <f:selectItem itemLabel="Black" itemValue="0" />
       <f:selectItem itemLabel="Light Gray" itemValue="1" />
       <f:selectItem itemLabel="Gray" itemValue="2" />
       <f:selectItem itemLabel="Dark Gray" itemValue="3" />
       <f:selectItem itemLabel="Blue" itemValue="4" />
       <f:selectItem itemLabel="Green" itemValue="5" />
       <f:selectItem itemLabel="Orange" itemValue="6" />
       <f:selectItem itemLabel="Pink" itemValue="7" />
       <f:selectItem itemLabel="Red" itemValue="8" />
       <f:selectItem itemLabel="Magenta" itemValue="9" />
       <f:selectItem itemLabel="Cyan" itemValue="10" />
       <f:selectItem itemLabel="Yellow" itemValue="11" />
       <f:selectItem itemLabel="White" itemValue="12" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
      
      </td><td>Font Size:<br/>
      <h:selectOneMenu id="fontsize" value="#{textmodAction.fontsize}">
       <f:selectItem itemLabel="36" itemValue="0" />
       <f:selectItem itemLabel="24" itemValue="1" />
       <f:selectItem itemLabel="20" itemValue="2" />
       <f:selectItem itemLabel="18" itemValue="3" />
       <f:selectItem itemLabel="16" itemValue="4" />
       <f:selectItem itemLabel="14" itemValue="5" />
       <f:selectItem itemLabel="12" itemValue="6" />
       <f:selectItem itemLabel="11" itemValue="7" />
       <f:selectItem itemLabel="10" itemValue="8" />
       <f:selectItem itemLabel="8" itemValue="9" />
      
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
      </td><td>Background Color<br/>
       <h:selectOneMenu id="backgroundcolor" value="#{textmodAction.backgroundcolor}">
       <f:selectItem itemLabel="Transparent" itemValue="" />
       <f:selectItem itemLabel="Black" itemValue="0" />
       <f:selectItem itemLabel="Light Gray" itemValue="1" />
       <f:selectItem itemLabel="Gray" itemValue="2" />
       <f:selectItem itemLabel="Dark Gray" itemValue="3" />
       <f:selectItem itemLabel="Blue" itemValue="4" />
       <f:selectItem itemLabel="Green" itemValue="5" />
       <f:selectItem itemLabel="Orange" itemValue="6" />
       <f:selectItem itemLabel="Pink" itemValue="7" />
       <f:selectItem itemLabel="Red" itemValue="8" />
       <f:selectItem itemLabel="Magenta" itemValue="9" />
       <f:selectItem itemLabel="Cyan" itemValue="10" />
       <f:selectItem itemLabel="Yellow" itemValue="11" />
       <f:selectItem itemLabel="White" itemValue="12" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
      </td>
      </tr>
      <tr><td>Vertical Padding:<br/>
       <h:selectOneMenu id="paddingtop" value="#{textmodAction.paddingtop}">
       <f:selectItem itemLabel="None" itemValue="0" />
       <f:selectItem itemLabel="3" itemValue="3" />
       <f:selectItem itemLabel="4" itemValue="4" />
       <f:selectItem itemLabel="5" itemValue="5" />
       <f:selectItem itemLabel="6" itemValue="6" />
       <f:selectItem itemLabel="7" itemValue="7" />
       <f:selectItem itemLabel="8" itemValue="8" />
       <f:selectItem itemLabel="9" itemValue="9" />
       <f:selectItem itemLabel="10" itemValue="10" />
       <f:selectItem itemLabel="11" itemValue="11" />
       <f:selectItem itemLabel="12" itemValue="12" />
       <f:selectItem itemLabel="13" itemValue="13" />
       <f:selectItem itemLabel="14" itemValue="14" />
       <f:selectItem itemLabel="15" itemValue="15" />
       <f:selectItem itemLabel="16" itemValue="16" />
       <f:selectItem itemLabel="17" itemValue="17" />
       <f:selectItem itemLabel="18" itemValue="18" />
       <f:selectItem itemLabel="19" itemValue="19" />
       <f:selectItem itemLabel="20" itemValue="20" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
       </td>
       <td>Horizontal Padding:<br/>
       <h:selectOneMenu id="paddingside" value="#{textmodAction.paddingside}">
       <f:selectItem itemLabel="None" itemValue="0" />
       <f:selectItem itemLabel="3" itemValue="3" />
       <f:selectItem itemLabel="4" itemValue="4" />
       <f:selectItem itemLabel="5" itemValue="5" />
       <f:selectItem itemLabel="6" itemValue="6" />
       <f:selectItem itemLabel="7" itemValue="7" />
       <f:selectItem itemLabel="8" itemValue="8" />
       <f:selectItem itemLabel="9" itemValue="9" />
       <f:selectItem itemLabel="10" itemValue="10" />
       <f:selectItem itemLabel="11" itemValue="11" />
       <f:selectItem itemLabel="12" itemValue="12" />
       <f:selectItem itemLabel="13" itemValue="13" />
       <f:selectItem itemLabel="14" itemValue="14" />
       <f:selectItem itemLabel="15" itemValue="15" />
       <f:selectItem itemLabel="16" itemValue="16" />
       <f:selectItem itemLabel="17" itemValue="17" />
       <f:selectItem itemLabel="18" itemValue="18" />
       <f:selectItem itemLabel="19" itemValue="19" />
       <f:selectItem itemLabel="20" itemValue="20" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
       </td>
       <td></td>
       </tr>
       <tr><td>Border Size:<br/>
       <h:selectOneMenu id="bordersize" value="#{textmodAction.bordersize}">
       <f:selectItem itemLabel="None" itemValue="0" />
       <f:selectItem itemLabel="1" itemValue="1" />
       <f:selectItem itemLabel="2" itemValue="2" />
       <f:selectItem itemLabel="3" itemValue="3" />
       <f:selectItem itemLabel="4" itemValue="4" />
       <f:selectItem itemLabel="5" itemValue="5" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
       </td><td>Border Color:<br/>
       <h:selectOneMenu id="bordercolor" value="#{textmodAction.bordercolor}">
       <f:selectItem itemLabel="Transparent" itemValue="" />
       <f:selectItem itemLabel="Black" itemValue="0" />
       <f:selectItem itemLabel="Light Gray" itemValue="1" />
       <f:selectItem itemLabel="Gray" itemValue="2" />
       <f:selectItem itemLabel="Dark Gray" itemValue="3" />
       <f:selectItem itemLabel="Blue" itemValue="4" />
       <f:selectItem itemLabel="Green" itemValue="5" />
       <f:selectItem itemLabel="Orange" itemValue="6" />
       <f:selectItem itemLabel="Pink" itemValue="7" />
       <f:selectItem itemLabel="Red" itemValue="8" />
       <f:selectItem itemLabel="Magenta" itemValue="9" />
       <f:selectItem itemLabel="Cyan" itemValue="10" />
       <f:selectItem itemLabel="Yellow" itemValue="11" />
       <f:selectItem itemLabel="White" itemValue="12" />
       <a:support event="onchange"
       eventsQueue="texteditQueue" reRender="textgencontainer" ajaxSingle="true"/>
       </h:selectOneMenu>
       </td><td></td></tr>
       </table>
      </div>
      
       <div id="savetextLayer" style="position:absolute;
       left: 25px;
       top: 300px;
       float:right;
       z-index:2;
       margin-right:15px;
       ">
       <a:commandButton id="savetextbutton"
       value="Save Layer" ajaxSingle="true"
       actionListener="#{textmodAction.saveEditedPicture}"
       reRender="editcontainer,sidebarcontainer"
       oncomplete="Richfaces.hideModalPanel('textboxmp');"
       eventsQueue="texteditQueue">
       <s:conversationId/>
       <a:actionparam name="picActionupid" value="#{picAction.upshift}" assignTo="#{picAction.upid}"/>
       </a:commandButton>
      
      
       <a:commandButton style="width:100px;" value="Cancel And Exit"
       oncomplete="Richfaces.hideModalPanel('textboxmp');">
       </a:commandButton>
       </div>
       </a:form>
       <div id="graphicBox"
       style="position: absolute;
       left: 25px;
       top: 215px;
       z-index: 1;
       visibility: visible;">
      
      
       <a:outputPanel id="textgencontainer">
       <s:graphicImage id="textphoto"
       value="#{textmodAction.outpic}"
       alt="Image" style="z-index:250;"
       rendered="#{textmodAction.outpic != null}"
       cacheable="false"/>
       </a:outputPanel>
       </div>
       </rich:modalPanel>
      


      it would appear that each ajax submit is submitting the entire form... much like using an h:commandButton or something.

      03:39:12,037 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE RESTORE_VIEW 1
      03:39:12,067 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker afterPhase
      INFO: AFTER RESTORE_VIEW 1
      03:39:12,067 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE APPLY_REQUEST_VALUES 2
      03:39:12,070 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker afterPhase
      INFO: AFTER APPLY_REQUEST_VALUES 2
      03:39:12,070 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE PROCESS_VALIDATIONS 3
      03:39:12,083 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker afterPhase
      INFO: AFTER PROCESS_VALIDATIONS 3
      03:39:12,083 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE UPDATE_MODEL_VALUES 4
      03:39:12,104 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker afterPhase
      INFO: AFTER UPDATE_MODEL_VALUES 4
      03:39:12,105 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE INVOKE_APPLICATION 5
      03:39:12,109 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker afterPhase
      INFO: AFTER INVOKE_APPLICATION 5
      03:39:12,110 ERROR [STDERR] Sep 17, 2008 3:39:12 AM org.exadel.jsf.PhaseTracker beforePhase
      INFO: BEFORE RENDER_RESPONSE 6
      





      AJAXREQUEST=_viewRoot&j_id245%3Atextedit%3Afonttype=Arial&j_id245%3Atextedit%3Afontcolor=0&j_id245%3Atextedit
      
      %3Afontsize=0&j_id245%3Atextedit%3Abackgroundcolor=&j_id245%3Atextedit%3Apaddingtop=0&j_id245%3Atextedit
      
      %3Apaddingside=0&j_id245%3Atextedit%3Abordersize=0&j_id245%3Atextedit%3Abordercolor=&j_id245%3Atextedit
      
      =j_id245%3Atextedit&autoScroll=&javax.faces.ViewState=j_id19&j_id245%3Atextedit%3Aj_id254=te&ajaxSingle
      
      =j_id245%3Atextedit%3Aj_id254&j_id245%3Atextedit%3Aj_id255=j_id245%3Atextedit%3Aj_id255&



      help if possible. i know this is to be expected by moving to the nightly builds but i needed a fix for the broken ui:repeat a4j:repeat and DnD in 3.2.2.

        • 1. Re: Modal Panel Problem 3.3.0
          ilya_shaikovsky

          could you please remove ajaxSubmit="true" from your form. You have no need in this attribute while using a4j:commands.

          • 2. Re: Modal Panel Problem 3.3.0
            nathandennis

            thanks for the response. youre right i dont... unfortunately that isnt what is causing this problem. even with it removed it still close on first ajax call. like i said before this works with 3.2.0, 3.2.1, and 3.2.2 tested with all 3 last night. i wish i could drop back to a stable release but i cant because of the bugs in calendar for IE, DnD and fileupload.

            any other ideas?

            • 3. Re: Modal Panel Problem 3.3.0
              nathandennis

              the problem is with a4j:include. if you switch to ui:include it will go back to working. strange... definitely a bug.

              • 4. Re: Modal Panel Problem 3.3.0
                ilya_shaikovsky

                ok... And you sure that MP component placed not inside reREnder zone?

                • 5. Re: Modal Panel Problem 3.3.0
                  nathandennis

                  100% sure. i was already aware of the problems associated with that. its a large page but since the include is as the end of the file you can see that there is no rerender.
                  obviously the a4j includes have been changed to ui includes.



                  <h:panelGroup id="photowizard">
                   <ui:include src="include/photoedit.xhtml" />
                   </h:panelGroup>
                   <h:panelGroup id="textwizard">
                   <ui:include src="include/textedit.xhtml" />
                   </h:panelGroup>
                  
                  
                  
                   <div id="memModFooter">
                   <ui:include src="include/epigraphfooter.xhtml" />
                   </div>
                  
                  
                  </ui:define>
                  </ui:composition>
                  
                  


                  • 6. Re: Modal Panel Problem 3.3.0
                    nathandennis

                     

                    <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                     xmlns:ui="http://java.sun.com/jsf/facelets"
                     xmlns:h="http://java.sun.com/jsf/html"
                     xmlns:f="http://java.sun.com/jsf/core"
                     xmlns:a="http://richfaces.org/a4j"
                     xmlns:rich="http://richfaces.org/rich"
                     xmlns:s="http://jboss.com/products/seam/taglib">
                    
                     <rich:modalPanel id="textboxmp" minHeight="375" minWidth="450" top="20" style="padding:0px;">
                     <f:facet name="header" style="height:20px;">
                     <h:outputText value="Edit Text" />
                     </f:facet>

                    cont... from first post

                    • 7. Re: Modal Panel Problem 3.3.0
                      ilya_shaikovsky

                      Yes.. seems include updates even if this isn't nessesarry.

                      https://jira.jboss.org/jira/browse/RF-4499

                      • 8. Re: Modal Panel Problem 3.3.0
                        nbelaevski

                        Hi,

                        That's because a4j:include now correctly handles ajaxRendered attribute. Use:

                        <a4j:include viewId="/richfaces/include/examples/wstep1.xhtml" ajaxRendered="false"/>


                        • 9. Re: Modal Panel Problem 3.3.0
                          nathandennis

                          there's a reason for everything...... might should make sure that makes it in the documentation somewhere.