2009-11-30 19 views
6

Ich habe ein Auswahlmenu, wo eine Änderung in der Auswahl den Benutzer zur entsprechenden Seite navigieren sollte.Wie lade ich eine JSF-Seite von einem ValueChangeEvent neu?

Also, wie simuliere ich die Action-Behandlung einer Befehlsschaltfläche mit einem SelectOneMenu-Steuerelement (oder gibt es eine elegantere Möglichkeiten, dies zu erreichen)?

Antwort

13

Sie können nicht eine Einstellung von Javascript dafür gehen. Grundsätzlich muss das Javascript die Anfrage an den Server senden. In einem HTML-Element <select> (das von der JSF h:selectOneMenu generiert wurde) können Sie das Attribut onchange dafür am besten verwenden. JS, das Sie an dieses Ereignis anhängen, wird immer dann aufgerufen, wenn der Benutzer den Wert des Elements ändert.

<h:selectOneMenu onchange="this.form.submit();"> 

oder wenn Sie schriftlich faul sind, diese Stenografie ist auch richtig:

<h:selectOneMenu onchange="submit()"> 

Dies wird die Form in Kombination mit dem firstnext HTML input type="submit" Elemente innerhalb der gleichen Form einzureichen (das gewesen ist generiert von der JSF h:commandButton).

<h:form> 
    <h:selectOneMenu value="#{bean.page}" onchange="submit()" required="true"> 
     <f:selectItem itemLabel="Select page.." /> 
     <f:selectItems value="#{bean.pages}" /> 
    </h:selectOneMenu> 
    <h:commandButton value="submit" action="#{bean.submit}" /> 
    <h:commandButton value="other" action="#{bean.other}" /> <!-- won't be submitted --> 
</h:form> 

Sie müssen Logik in der Aktionsmethode schreiben, die die Navigationsaktion verursacht, wie in faces-config.xml definiertem stattgefunden werden. Beispiel:

public String submit() { 
    return this.page; 
} 

Wenn Sie nicht wollen ein commandButton verwenden, dann können Sie auch weiter gehen mit den valueChangeListener missbrauchen:

<h:form> 
    <h:selectOneMenu value="#{bean.page}" onchange="submit()" 
     valueChangeListener="#{bean.change}" required="true"> 
     <f:selectItem itemLabel="Select page.." /> 
     <f:selectItems value="#{bean.pages}" /> 
    </h:selectOneMenu> 
</h:form> 

In der Bohne haben Sie dann:

public void change(ValueChangeEvent event) { 
    String page = (String) event.getNewValue(); // Must however be the exact page URL. E.g. "contact.jsf". 
    FacesContext.getCurrentInstance().getExternalContext().redirect(page); 
} 

Alternativ, wenn Sie bereits die gewünschten URLs als f:selectItem Werte haben, dann können Sie auch weiter gehen h nur nur JS und keine Bean Aktionen:

<h:selectOneMenu value="#{bean.page}" 
    onchange="window.location = this.options[this.selectedIndex].value"> 
    <f:selectItem itemLabel="Select page.." /> 
    <f:selectItem itemLabel="home" itemValue="home.jsf" /> 
    <f:selectItem itemLabel="faq" itemValue="faq.jsf" /> 
    <f:selectItem itemLabel="contact" itemValue="contact.jsf" /> 
</h:selectOneMenu> 
4
<h:selectOneMenu onchange="document.getElementById('myform').submit();" ...> 
Verwandte Themen