3

テキスト入力からリストボックス フィールドに動的に値を追加する必要があります。基本的に、カスタムの複数行テキスト コンポーネントを作成しています。以下は標準の で動作します<h:selectOneListbox>が、同等の PrimeFaces を使用すると<p:selectOneListbox>、何も起こらないようです。アプリケーションですべての PrimeFaces 入力を使用しており、外観の一貫性を維持したいと考えています。

<!--This works:-->

<h:form id="mainForm">
<p:inputText id="txtInput" /><p:commandButton value="Add" id="addTxt" 
onclick="addText()"/>
<h:selectOneListbox id="selectTxt"/>
<script type="text/javascript">
function addText(){
    var txtInput = $('#mainForm\\:txtInput').val();
    var opts = $('#mainForm\\:selectTxt').prop('options');
    opts[opts.length] = new Option(txtInput,txtInput,true,true);
        }
</script>
</h:form>

<!--This doesn't work:-->
<h:form id="mainForm">
<p:inputText id="txtInput" /><p:commandButton value="Add" id="addTxt"     
onclick="addText()"/>
<p:selectOneListbox id="selectTxt"/>
<script type="text/javascript">
    function addText(){
        var txtInput = $('#mainForm\\:txtInput').val();
        var opts = $('#mainForm\\:selectTxt_input').prop('options');
        opts[opts.length] = new Option(txtInput,txtInput,true,true);
        }
    </script>
    </h:form>

助けてくれてありがとう。

4

1 に答える 1

2

は、オプションを表示する代わりにを<p:selectOneListbox>使用します (単純な理由で、異なるルック アンド フィールを与える自由度が非常に高くなります)。それがまさに、新しい要素を作成して追加することができない理由です。ブラウザーでページを右クリックして[ソースを表示] を実行すると、よりよく理解できるようになります (もちろん、基本的な HTML に既に精通している場合)。<ul><li><select><option>Option

<h:selectOneListbox>この方法で新しいオプションを追加すると、実際に で機能するように見えますが、これは純粋に視覚的なものであり、クライアント側であることに注意してください。JSF は送信時にクライアント側で作成されたアイテムを受け入れませんが、送信Validation Error: Value not validされた値がサーバー側で定義されたアイテムの一部ではないという単純な理由で をスローします<f:selectItems>。

値を操作するには、JavaScript ではなく JSF を使用する必要があり<f:selectItems>ます。この方法でも同様に<p:selectOneListbox>機能します。

純粋な JSF を使用してそれを行う具体的なキックオフの例を次に示します。

<h:form>
    <p:inputText value="#{bean.text}" />
    <p:commandButton value="Add" action="#{bean.add}" update="listbox" />
    <p:selectOneListbox id="listbox">
        <f:selectItems value="#{bean.items}" />
    </p:selectOneListbox>
</h:form>

と：

@ManagedBean
@ViewScoped
public class Bean {

    private String text; // +getter+setter
    private List<String> items; // +getter

    @PostConstruct
    public void init() {
        items = new ArrayList<String>();
    }

    public void add() {
        items.add(text);
    }

    // ...
}

それで全部です。

以下も参照してください。

于 2012-09-19T12:28:16.757 に答える