4 Replies Latest reply on Jul 19, 2009 6:30 AM by Kevin Maliit

    problem with modalPanel in conjunction with a4j:support

    Kevin Maliit Newbie

      Hi,

      i have been using a4j:support for a lot of components in regular facelet pages / components and everything works fine. But now I m trying to use a4j capabilities within a modalpanel. After the rerender of the specified component all other inputText become empty again (no validation).

      I m having a date input component with three input text. Everyinputtext component has a <ui:insert />, so I can add a4j:support to the dateComponent. I m using the date component in a modalpanel like this:

      <uc:dateInput idPrefix="#{idPrefix}GeburtsDatum"
       label="#{msgs.geburtsdatum}"
       dateDay="#{model.geburtsDatum.day}"
       dateMonth="#{model.geburtsDatum.month}"
       dateYear="#{model.geburtsDatum.year}"
       required="true"
       rendered="true"
       formId="#{formId}"
       measurement="#{unfallmsgs.labelMeasurementDate}"
       ><a4j:support event="onblur"
       reRender="berufOutputPanel"
       ajaxSingle="true"/>
       </uc:dateInput>


      As you can see the ajaxSingle is set to true, so the component should be the only thing which sends an ajax request and I think that works. The whole modalpanel isn t submitted cause there are no validation errors. So far so good. But after the onblur and rerender occures every other textinput field (except the date) disappears. Another mentionable thing is that the focus (the field you just clicked) isn t focused anymore.

      I would be very thankful for any help.

      Regards
      Kevin

        • 1. Re: problem with modalPanel in conjunction with a4j:support
          Ilya Shaikovsky Master

          1) do you read about forms limitations while using modal panel.
          2) show full code for modal panel please.
          3) about focus - you could use focus attribute on a4j:support. Focus lost if the focused component in the area which reRendered. And it works like designed because we do not know where you need to have focus after DOM tree elements replacement.

          • 2. Re: problem with modalPanel in conjunction with a4j:support
            Kevin Maliit Newbie

            Hi thanx for your reply.

            I googled around but couldn t find no modal panel form limitations.

            Here s a code extract of my modal panel

            <rich:modalPanel id="addPanel" height="400" width="558" autosized="true" moveable="false" left="80">
             <div id="content">
             <f:facet name="header">
             <h:outputText value="#{unfallmsgs.versichertePersonAddPanelHeader}" />
             </f:facet>
             <a4j:form id="addPanelForm">
             <h:panelGrid columns="1">
             <a4j:outputPanel ajaxRendered="true">
             <uu:unfallVersichertePersonInput
             idPrefix="#{idPrefix}EditModalPanel"
             containerId="#{idPrefix}_vornamemodalpanel_container"
             model="#{unfallVersichertePersonModel.selectedPerson}"
             formId="addPanelForm"
             />
             </a4j:outputPanel>
             </h:panelGrid>
             <uc:javascriptButton
             color="red"
             idPrefix="addSaveButton"
             buttonText="#{unfallmsgs.speichern}"
             bean="#{unfallVersichertePersonModel}"
             action="addUnfallVersichertePerson"
             ajaxSingle="true"
             reRender="versichertepersontable,personhinzufuegen"
             oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('addPanel')}.hide();"
             />
             <uc:javascriptButton
             color="grey"
             idPrefix="addCancelButton"
             buttonText="#{msgs.buttonTextAbbrechen}"
             bean="#{unfallVersichertePersonModel}"
             action="resetSelectedPerson"
             ajaxSingle="true"
             reRender="versichertepersontable,personhinzufuegen"
             oncomplete="#{rich:component('addPanel')}.hide();"
             immediate="true"
             />
             <input name="rechner" type="hidden" value="UNFALL" />
             </a4j:form>
             </div>
             </rich:modalPanel>
            


            And this is the included component with the input fields inside the panel (<uu:unfallVersichertePersonInput />):

            <uc:dateInput idPrefix="#{idPrefix}GeburtsDatum"
             label="#{msgs.geburtsdatum}"
             dateDay="#{model.geburtsDatum.day}"
             dateMonth="#{model.geburtsDatum.month}"
             dateYear="#{model.geburtsDatum.year}"
             required="true"
             rendered="true"
             formId="#{formId}"
             measurement="#{unfallmsgs.labelMeasurementDate}"
             ><a4j:support event="onblur"
             reRender="berufOutputPanel"
             ajaxSingle="true"/>
             </uc:dateInput>
            
             <a4j:outputPanel id="berufOutputPanel" layout="block">
             <a4j:outputPanel rendered="#{unfallViewController.displayBeruf}">
             <uc:selectOneMenu idPrefix="#{idPrefix}Beruf"
             label="#{msgs.beruf}"
             viewItems="#{unfallViewController.selectItemsBeruf}"
             required="true"
             rendered="true"
             modelValue="#{model.beruf.nummer}"
             >
             </uc:selectOneMenu>
             </a4j:outputPanel>
             </a4j:outputPanel>
            


            Whereas the important part of the dateInputComponent looks like this:
            <h:inputText id="#{idPrefix}DateDayInput"
             value="#{dateDay}"
             styleClass="firstInputField dateTripelFieldDay#{rendered ? '' : ' readonly'}#{invalid ? ' errorForm' : ''}"
             onkeyup="autotab(this, $('#{formId}:#{idPrefix}DateMonthInputDecorator:#{idPrefix}DateMonthInput'))"
             required="#{required}"
             readonly="#{!rendered and readonly}"
             disabled="#{readonly}"
             maxlength="2">
             <f:validateLongRange minimum="1" maximum="31" />
             <ui:insert />
             </h:inputText>
            



            As you can see, everytime the user leaves an input field of the dateInput (on blur) a reRender is processed which workes just fine. But all other input fields in the modal panel (which are not included in the sample code here) are somehow rerendered too cause all the inserted values disappear when the berufOutputPanel is rerendered.

            I m really stuck on this one and I am doing circles. So if you got some advice I d really appreaciate that.

            Regards

            • 3. Re: problem with modalPanel in conjunction with a4j:support
              Nick Belaevski Master

               

              I googled around but couldn t find no modal panel form limitations.

              It's described in user guide.

              • 4. Re: problem with modalPanel in conjunction with a4j:support
                Kevin Maliit Newbie

                Seems like surrounding the input in the modal panel with a

                <a4j:region renderRegionOnly="true">
                ...
                </a4j:region>
                


                does the job. It looks a little dirty to me, but I didn t find another solution. Happy to receive a better way from you