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

Modal Panel Problem 3.3.0

nathandennis Sep 17, 2008 3:43 AM

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 Sep 17, 2008 6:45 AM (in response to nathandennis)

could you please remove ajaxSubmit="true" from your form. You have no need in this attribute while using a4j:commands.
Actions
2. Re: Modal Panel Problem 3.3.0

nathandennis Sep 17, 2008 12:51 PM (in response to 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?
Actions
3. Re: Modal Panel Problem 3.3.0

nathandennis Sep 17, 2008 12:57 PM (in response to nathandennis)

the problem is with a4j:include. if you switch to ui:include it will go back to working. strange... definitely a bug.
Actions
4. Re: Modal Panel Problem 3.3.0

ilya_shaikovsky Sep 18, 2008 7:13 AM (in response to nathandennis)

ok... And you sure that MP component placed not inside reREnder zone?
Actions
5. Re: Modal Panel Problem 3.3.0

nathandennis Sep 18, 2008 12:37 PM (in response to 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>
Actions

6. Re: Modal Panel Problem 3.3.0

nathandennis Sep 18, 2008 12:42 PM (in response to 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 Sep 19, 2008 6:15 AM (in response to nathandennis)

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

https://jira.jboss.org/jira/browse/RF-4499
Actions
8. Re: Modal Panel Problem 3.3.0

nbelaevski Sep 24, 2008 11:17 AM (in response to nathandennis)
Hi,

That's because a4j:include now correctly handles ajaxRendered attribute. Use:
<a4j:include viewId="/richfaces/include/examples/wstep1.xhtml" ajaxRendered="false"/>
Actions
9. Re: Modal Panel Problem 3.3.0

nathandennis Sep 24, 2008 12:15 PM (in response to nathandennis)

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

Go to original post