web-dev-qa-db-ja.com

primefacesのjavascriptからコンポーネントの更新をトリガーする方法は？

PrimeFacesコンポーネントをJavaScriptから更新して、強制的に更新することは可能ですか？

ダイアログでこのボタンを使用して、ajax保存呼び出しを行っています。 oncompleteイベントにカスタムjavascriptを添付しました。

<p:growl life="1500" id="showmessage"/>
<p:dialog id="addMemberDialog" widgetVar="addMemberDlg">
    <!-- More Code -->
    <p:commandButton value="Save"
        actionListener="#{memberManagedBean.save}"
        oncomplete="handleSaveNewMember(xhr, status, args)"
        update=":memberListForm:membersTable createupdateform "
        process="@form" />
</p:dialog>

..保存ボタン中に、growlコンポーネントを使用してクライアントに表示するメッセージをここに追加しています。

public void save(ActionEvent event) {
    FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO,
            "Successfuly Add user", "Successfuly Add user");
    FacesContext.getCurrentInstance().addMessage(null, message);

}

私の問題は、うなり声コンポーネントがメッセージを表示する前に最初にダイアログを非表示にする必要があるように、UIをどのように順序付けることができますか？

function handleSaveNewMember(xhr, status, args) {
    addMemberDlg.hide();
    //update the growl after the dialog was hidden?
}

何が起こっているのかといえば、うなり声コンポーネントがダイアログの横に同時に表示されています。

ありがとう。

jsfjsf-2primefaces
25
Mark Estrada

これにはPrimeFacesの <p:remoteCommand> を使用できます。

<p:remoteCommand name="updateGrowl" update="showmessage" />

として呼び出される

<p:commandButton ... oncomplete="addMemberDlg.hide(); updateGrowl();" />

ただし、この特定のケースでは、より簡単な方法があります。 <p:growl>のautoUpdate属性をtrueに設定します。

<p:growl autoUpdate="true" life="1500" id="showmessage"/>

すべてのajaxリクエストで自動更新されます。コンポーネントが実際にそれをサポートしていなかった場合、その属性をサポートする<p:outputPanel>で常にラップすることができます。

<p:outputPanel autoUpdate="true">
    ...
</p:outputPanel>
49
BalusC

いつでもこのようなことができます（保存ボタンの更新属性からshowmessage IDを削除します）

<h:commandButton style="display:none" id="myBtn" >
    <f:ajax render=":showmessage"/>
</h:commandButton>

function handleSaveNewMember(xhr, status, args) {
    ...
    jQuery("#myBtn").click();
}

[〜＃〜] edit [〜＃〜]しかし、あなたの現在のコードでは、とにかくgrwolの更新と同時にダイアログが閉じられていませんか？

5
Daniel

私のアドバイス：

  1. actionListener属性で_<p:remoteCommand>_を使用します。この属性は、次のように_FacesContext.addMessage_コードを含むバッキングBeanメソッドを呼び出します。<p:remoteCommand actionListener="myBean.testMethod()" />
  2. 次に、handleSaveNewMemberスクリプトで、addMemberDlg.hide();の後にremoteCommandname属性を呼び出します（<p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>）。次に、function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }
  3. update属性をremoteCommandポインティンググロールコンポーネントに追加：<p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />
  4. commandButtonは問題ありません。

これは私のために働いた。

ご挨拶。

3
rodcruzh

<h：panelGroup>内にp：Dialogを配置できないのはなぜですか。のような

< h:panelGroup id="addUser" rendered = "boolean value " >
    < p:dialog id="addMemberDialog" widgetVar="addMemberDlg" >
        <!-- More Code -->
        < p:commandButton value="Save" actionListener="#{memberManagedBean.createOrUpdate}"
                oncomplete="handleSaveNewMember(xhr, status, args)"
                update=":memberListForm:membersTable createupdateform :showmessage :addUser"
                process="@form" />
    < /p:dialog >
< /h:panelGroup>

saveメソッドで設定する必要のあるブール値。 saveメソッドでこれをfalseに設定すると、更新中に表示されません。そのため、うなり声メッセージだけが表示されます。ただし、このsaveメソッドを呼び出す前に、このブール値はtrueに設定されます。

0
Thirumurthy

P：remotecommandというPrimeFaces要素を使用できます。この要素は、アクションを実行して（たとえば、Beanメソッドを呼び出す）、そのアクションの後に更新を実行します。

この投稿には例があります http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html 。

0
Gaalvarez