Is it possible to have a form with validation and to use rich:modalPanel for data entry too?

Question

Richfaces 3.3.3, Jsf 1.2:

I have a a4j:form that uses some simple validation, mainly required="true" to ensure the form does not get submitted without some necessary data.

I also have some complex data to add (optionally) to the form, so I thought the best way to do this is to have a a4j:commandButton that displays a rich:modalPanel where the user can create the complex data set.

The created data is also displayed in a h:selectManyListbox that is reRendered when the modalPanel is closed.

That's the plan, at least. I have the following problems:

reRender works, but only if I prevent validation via immediate="true" - which in turn seems to prevent the selected data from the modalPanel to be present in the backing Bean
if I remove the immediate tag, the data gets updated, but only if there are no validation errors

What is the best way to get this to work the way I want? Is there another, better way?

UPDATE:

The Validation that fails is in some different part of the form, not in the data entered via the modalPanel, which is displayed in the Listbox

CODE:

modalPanel:

<rich:modalPanel id="addTrimming" domElementAttachment="parent" width="150" height="130">
    <f:facet name="header">
        <h:panelGroup>
            <h:outputText value="Define Filter" />
        </h:panelGroup>
    </f:facet>
    <f:facet name="controls">
        <h:panelGroup>
            <h:graphicImage value="/images/close.gif" styleClass="hidelink" id="hidelinkAddTrimming"/>
            <rich:componentControl for="addTrimming" attachTo="hidelinkAddTrimming" operation="hide" event="onclick"/>
        </h:panelGroup>
    </f:facet>

    <h:panelGrid id="trimsettings" columns="3">
        <h:outputText value="Target:" style="font-weight:bold"/>
        <h:inputText id="target" label="XML Filename" required="true" value="#{xmlCreator.trimTarget}">
        </h:inputText>
        <h:outputText value=""/>

        <h:outputText value="Mode:"/>
        <h:selectOneMenu value="#{xmlCreator.trimMode}">
            <f:selectItem itemLabel="Quality" itemValue="quality"/> 
            <f:selectItem itemLabel="after Primer" itemValue="afterPrimer"/> 
            <f:selectItem itemLabel="fixed" itemValue="fixed"/>
            <f:selectItem itemLabel="Median length" itemValue="median"/>
            <f:selectItem itemLabel="Motif" itemValue="motif"/>
        </h:selectOneMenu>
        <h:outputText value=""/>

    </h:panelGrid>

    <h:panelGroup>
        <a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" onclick="from:submit()">
            <a4j:support event="oncomplete" ajaxSingle="true" immediate="true" reRender="trimsPanel"/>
        </a4j:commandButton>
    </h:panelGroup>
</rich:modalPanel>

relevant form part:

<h:outputText value="Trimming:"/>
<a4j:outputPanel id="trimsPanel">
    <h:selectManyListbox id="trims" value="#{xmlCreator.selectedTrimmings}">
        <f:selectItems value="#{si:toSelectTrimmingList(xmlCreator.trimmings)}"/>
    </h:selectManyListbox>
</a4j:outputPanel>
<a4j:commandButton id="addTrimButton" immediate="true" value=" + Trimming">
    <rich:componentControl for="addTrimming" attachTo="addTrimButton" operation="show" event="onclick"/>
</a4j:commandButton>

Not incorrect data in the listbox. The validation fails for some other parts, the listbox is just part of the form. — brandstaetter, Feb 14 '12 at 11:13

score 1 · Accepted Answer · answered Feb 14 '12 at 12:18

If you do it in one form than you should separate it into two: one will be your main form and another will be form inside modal panel. Thus you'll be able to submit modal panel independently of main form and your submit button in modal panel will look like this:

<a4j:commandButton value="OK" action="#{xmlCreator.createTrimming}" reRender="trimsPanel"/>

score 0 · Answer 2 · answered Feb 14 '12 at 11:21

you should use process with immediate to send modalpanel's data to bean when closing panel with a a:commandButton or a:commandLink. for this, modal panel data has to be valid as expected, so you will get valid new data and add it to h:selectManyListBox 's bean value and reRender h:selectManyListBox.

this should work. if not please post your a:form and modalPanel code full to check.

Is it possible to have a form with validation and to use rich:modalPanel for data entry too?

2 Answers2