web-dev-qa-db-ja.com

commandButtonがページを完全に更新しないようにするにはどうすればよいですか? f:ajaxの使い方は?

フォームを送信してマネージドBeanアクションを呼び出すためのボタンがあります。

<h:form>
    ...
    <h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>

しかし、ボタンを押すと、ページ全体が更新され、URLも変更されることがあります。

ページを更新せずにアクションを呼び出す方法はありますか?

13
Valter Silva

Ajaxを利用してください。対象のコマンドボタン内に <f:ajax> をネストする必要があります。

<h:form>
    ...
    <h:commandButton ...>
        <f:ajax execute="@form" render="@none" />
    </h:commandButton>
</h:form>

特にrender="@none"(とにかくデフォルト値ですが、属性を完全に省略できます)は、送信後に何も再レンダリングしないようにJSFに指示します。ページ全体ではなく特定のコンポーネントのみを再レンダリングする場合は、その特定のコンポーネントのIDをrender属性で指定することもできます。

<h:form>
    ...
    <h:commandButton ...>
        <f:ajax execute="@form" render="result" />
    </h:commandButton>
    ...
    <h:panelGroup id="result">...</h:panelGroup>
</h:form>

すでにPrimeFacesを使用している場合は、<p:commandButton>の代わりに<h:commandButton>を使用するだけです。デフォルトではすでにajaxを使用しているため、<f:ajax>にネストする必要はありません。 processupdateの代わりに、属性名executerenderを使用することを覚えておく必要があります。

<h:form>
    ...
    <p:commandButton ... update="result" />
    ...
    <h:panelGroup id="result">...</h:panelGroup>
</h:form>

execute属性のデフォルトはすでに@formであるため、省略できます。

参照:

22
BalusC