JavaScript JSF hide/show input based on a selection

[GTR]

Hi,

Ich habe folgendes Problem:

Ich möchte bestimmte Teile einer Seite ausblenden bzw einblenden je nachdem was ein User auf der Seite auswählt.
z.b. muss ja jemand kein Kennzeichen eingeben wenn er als Fortbewegungsmittel Fahrrad angibt.

Gelöst ist das mit ajax und dem event change. Die Tabelle wird dann neugerendert und zeigt die entsprechenden rows an oder eben nicht.
Das funktioniert auch soweit nur werden beim update der Tabelle alle anderen input Felder zurückgesetzt.
Der Reset button funktioniert dementsprechend auch nicht.

Bei jsp konnte ich das mit html und javascript gut lösen jetzt bei der Umstellung auf jsf bin ich etwas ratlos.

....... 
<p:ajax update="table1" event="change"/>
......
 <p:row id="xxxxxxxxxRow" rendered="#{xxxxxxxxxxxController.xxxxxx}">

 <h:form id="editForm">
                .......         
                
                <p:panelGrid class="main mainWidth" id="table1">                    
                    <f:facet name="header" class="dunkelgrau">
                        <p:column class="dunkelgrau" colspan="2">
                            <h:outputText value="XXXXXXXXXXXXXXX "/>
                            <h:outputLink value="#" onclick="javascript:OpenHelp('../help/xxxxx.htm');">
                                <h:graphicImage library="images" name="i.gif"/>
                            </h:outputLink>
                        </p:column>
                    </f:facet>
                    <p:row>
                        <p:column class="hellgrau">
                            <p:outputLabel for="xx" value="XXXXXXXXXXXXXXX"/>            
                        </p:column>
                        <p:column class="hellgrau">
                            <h:inputText id="xx" value="#{xxxxxController.xxxxx.xx}" size="40" maxlength="39"/> 
                        </p:column>
                    </p:row>
                    ........
                    <p:row>
                        <p:column class="hellgrau">
                            <p:outputLabel for="xc" value="XXXXXXXXXXXXX"/>            
                        </p:column>
                        <p:column class="hellgrau">
                            <h:selectOneMenu id="xc"  value="#{xxxxxxxxxxxxxxxxxController.xxxxxxxxxxxxxxx.xxxx}">
                                <f:selectItems value="#{xxxxxxxxController.xyx}"/>
                                <p:ajax update="table1" event="change"/>
                            </h:selectOneMenu>                  
                        </p:column>
                    </p:row>
                    <p:row id="xxxxxxxxxRow" rendered="#{xxxxxxxxxxxController.xxxxxx}">
                        <p:column class="hellgrau">
                            <p:outputLabel for="xy" value="XXXXXXXXXXXXXXXXX"/>            
                        </p:column>
                        <p:column class="hellgrau">
                            <h:inputText id="xy" value="#{xxxxxxxxxxxxController.xxxxxxx.xy}" size="40" maxlength="15"/> 
                        </p:column>
                    </p:row>
                </p:panelGrid>
                <br/>
                <h:button id="btBack" value="&lt;&lt;Back" outcome="xxxxxxxxxx"/>
                <h:commandButton id="btReset" value="Reset" type="reset"/>
                <h:commandButton id="btSet" value="Set" type="submit" action="#{xxxxxxxxxxxxxxxxController.submit}"/>
            </h:form>

Ergänzung (21. Oktober 2015)

ich kann mir die Frage inzwischen teilweise selber beantworten.

<p:ajax update="table1" event="change" process="table1"/>

das löst das Problem der verlorenen values.
Die Tabelle wird neugerendert aber vorher werden die values verarbeitet inklusive validation und im Bean gespeichert.

Bedeutet aber auch ein Rücksetzen des Forms ist nicht mehr möglich. Ein Zugriff auf die alten Werte ist auch nicht mehr möglich es sei denn man liest die Werte von der Datenbank neu ein.


Eventuell gibt es doch bessere Möglichkeiten Teile ein oder auszublenden ohne Werte gleich zu verarbeiten?