5

jsfページでコンポーネント「SelectOneMenu」をテストしています。ManageBean (データベースからすべての動物を取得します) を使用して、このコンポーネントを動的に設定しています。

その「SelectOneMenu」（コンボボックス）のユーザーが選択したアイテムを表示できるかどうかを知りたいのですが、value="#{animalsManage.animalSelect}" で試していますが、ページの先頭でのみ呼び出されます。また、inputText を使用して、「SelectOneMenu」の選択された intem の値を確認しています。

私が間違っていることは何ですか？

JSF:

    <body>
    <ui:component>
        <h:form>
                    <h:outputText value="Select one Mets File" />
                    <h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
                        <f:selectItem itemLabel="Select..."  noSelectionOption="true"/>
                        <f:selectItems value="#{animalsManage.allAnimals}" />
                    </h:selectOneMenu>
                    <h:inputText id="textbox" value="#{animalsManage.animalSelected }" />
        </h:form>
    </ui:component>
</body>

管理Bean:

    @ManagedBean
    @ViewScoped
    public class AnimalsManage implements Serializable {

    @EJB
    private AnimalsFacadeREST animalsFacadeREST;
    private String animalSelected;
    private List< SelectItem> selectAnimals;

    public List<SelectItem> getAllAnimals() {
            List<Animals> al = animalsFacadeREST.findAll();
            selectAnimals = new ArrayList< SelectItem>();
            int i = 0;
            for (Animals animal: al) {
                selectAnimals.add(new SelectItem(i, animal.getName()));
                i++;
            }
            return selectAnimals;
    }

    public String getAnimalSelected() {
       return animalSelected;
    }

    public void setAnimalSelected(String animalSelected) {
        this.animalSelected = animalSelected;
    }
}
4

1 に答える 1

12

提示された問題には多くの解決策があります。ここでは、2つの基本的な考え方を紹介します。

  1. サーバー側のソリューション。<f:ajax>内にタグを付けるだけ<h:selectOneMenu>で、選択した値を更新し、ユーザーの選択を再レンダリングできます。

    <h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
    <f:selectItem itemLabel="Select..."  noSelectionOption="true"/>
    <f:selectItems value="#{animalsManage.allAnimals}" />
    <f:ajax execute="combo" render="textbox" />
</h:selectOneMenu>
<h:inputText id="textbox" value="#{animalsManage.animalSelected }" />

    listener="#{animalsManage.performCustomAjaxLogic}"必要に応じて、<f:ajax>タグを指定することで、ajaxリスナーで選択した要素を使用してカスタムロジックを実行することもできます。

  2. クライアント側のソリューション。基本的な変更イベントで、要素をid="textbox"で更新するだけです。したがって、jQueryを使用する場合、ソリューションは次のようになります。

    $('#combo').change(function() {
    $('#textbox').val($('#combo').val());
});

    クライアント側のソリューションは、入力コンポーネントのテキスト値のみをバインドすると考えられています。

于 2013-02-12T13:02:13.323 に答える