CODEWITHSUNDEEP
javarichfacesjsf-1.2
brandstaetter
brandstaetter

Reputation: 912

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

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:

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>

Upvotes: 1

Views: 801

Answers (2)

mykola
mykola

Reputation: 1808

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"/>

Upvotes: 1

halil
halil

Reputation: 1812

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.

Upvotes: 0

Related Questions