This content has been marked as final.
Show 4 replies
-
1. Re: modalPanel usage pattern
sergeysmirnov Mar 17, 2007 11:40 AM (in response to demetrio812)yes, the second approach is much better than the first one.
-
2. Re: modalPanel usage pattern
shadowcreeper Jul 30, 2008 8:06 PM (in response to demetrio812)i tried this approach but had problems:
my modalPanel contains 2 <rich:calendar>s and an <h:inputText>. it is inside its own form and region:<a4j:form id="modalPanelForm"> <a4j:region id="modalPanelRegion"> <rich:modalPanel id="modalPanel" autosized="true" moveable="true" zindex="1000"> <f:facet name="header">header stuff</f:facet> <a4j:outputPanel id="modalPanelEditor" layout="block"> label, h:inputText, save a4j:commandButton are here 2 rich:calendars are here (from and to date selectors) calendars go something like this: <rich:calendar id="toDateSelector" value="#{modelBean.toDate}" popup="false" datePattern="MMM d, yyyy" showApplyButton="false" enableManualInput="false" showInput="false" todayControlMode="scroll" required="false"/> </a4j:outputPanel> </rich:modalPanel> <script type="text/javascript"> function updateCalendarsAndShowModalPanel () { #{rich:component( 'fromDateSelector' ) )}.showSelectedDate(); #{rich:component( 'toDateSelector' ) )}.showSelectedDate(); #{rich:component( 'modalPanel' )}.show(); } </script> </a4j:region> </a4j:form>
in a different place i have this:<a4j:form id="buttonForm"> <a4j:region renderRegionOnly="false"> <a4j:commandButton image="/images/plus.gif" actionListener="#{controllerBean.updateData}" oncomplete="updateCalendarsAndShowModalPanel();" status="mainStatusPanel" reRender="modalPanel"/> </a4j:region> </a4j:form>
in case it matters: i am using JBoss 4.0.5 with Facelets 1.1.14, MyFaces 1.2.3, Tomahawk 1.1.6 and RichFaces 3.2.0.SR1.
the controller backing bean's updateData(ActionEvent ignored) method simply decides which date range is being edited and updates the model bean which when the calendars are reRendered should be displayed in the modal panel.
when i take out the reRender="modalPanel", the modalPanel displays but the calendars obviously do not get their selectedDates updated from the backing bean. if i reRender the modalPanel or either of the calendars, then the oncomplete script's #{rich:component( 'calendar or modalPanel id' )} which translates to document.getElementById('id').component returns undefined (checked through firebug) thus throwing an error and never displaying the modalPanel. if i take the ".component" off the end of the translated output, i get the div which is the calendar or modalPanel container.
if i put a setTimeout( 'updateCalendarsAndShowModalPanel ();', 500 ) into the oncomplete, it does not get 'undefined' from #{rich:component('id')} and works as expected (except that the status has a half second where it does not show). but this is not clean.
can somebody please explain this to me?
when does oncomplete get run? after reRender finishes or parallel to its execution?
must these pieces be in some sort of order inside form/region/etc. with some specific args (such as the a4j:region's renderRegionOnly="false") ???
thanks. -
3. Re: modalPanel usage pattern
daniel.soneira Jul 31, 2008 6:51 AM (in response to demetrio812)You got the nesting of the form / modalPanel wrong. It should be like this:
<rich:modalPanel> <a4j:form> ... </a4j:form> </rich:modalPanel>
I would also nest the region INSIDE the modalPanel. -
4. Re: modalPanel usage pattern
shadowcreeper Jul 31, 2008 2:08 PM (in response to demetrio812)OK, that has been fixed:
<rich:modalPanel id="modalPanel" autosized="true" moveable="true" zindex="1000"> <f:facet name="header">header stuff</f:facet> <a4j:form id="modalPanelForm"> <a4j:region id="modalPanelRegion"> <a4j:outputPanel id="modalPanelEditor" layout="block"> label, h:inputText, save a4j:commandButton are here 2 rich:calendars are here (from and to date selectors) calendars go something like this: <rich:calendar id="toDateSelector" value="#{modelBean.toDate}" popup="false" datePattern="MMM d, yyyy" showApplyButton="false" enableManualInput="false" showInput="false" todayControlMode="scroll" required="false"/> </a4j:outputPanel> </a4j:region> </a4j:form> </rich:modalPanel> <script type="text/javascript"> function updateCalendarsAndShowModalPanel () { #{rich:component( 'fromDateSelector' ) )}.showSelectedDate(); #{rich:component( 'toDateSelector' ) )}.showSelectedDate(); #{rich:component( 'modalPanel' )}.show(); } </script>
But the problem still exists, requiring the setTimeout for the call to updateCalendarsAndShowModalPanel().