web-dev-qa-db-fra.com

Comment déclencher une actualisation de composant à partir de javascript dans PrimeFaces?

Est-il possible de mettre à jour un composant PrimeFaces à partir de javascript afin qu'il soit forcé de se rafraîchir?

Je fais un appel de sauvegarde ajax en utilisant ce bouton dans une boîte de dialogue. J'ai joint mon javascript personnalisé à l'événement oncomplete.

<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>

..pendant le bouton d'enregistrement, j'ajoute un message ici pour l'afficher au client en utilisant le composant grognement.

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

}

Mon problème est, comment puis-je séquencer l'interface utilisateur de telle sorte que je devrais d'abord masquer la boîte de dialogue avant que le composant de grognement puisse afficher le meesage?

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

Ce qui se passe, c'est que le composant de grognement s'affiche en même temps que la boîte de dialogue.

Merci.

jsfjsf-2primefaces
25
Mark Estrada

Vous pouvez utiliser PrimeFaces ' <p:remoteCommand> pour cela.

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

qui doit être invoqué comme

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

Dans ce cas particulier , il existe cependant un moyen plus simple. Définissez l'attribut autoUpdate de <p:growl> à true.

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

Il se mettra automatiquement à jour à chaque demande ajax. Si votre composant ne le prend pas réellement en charge, vous pouvez toujours l'envelopper dans un <p:outputPanel> qui prend également en charge cet attribut.

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

vous pouvez toujours faire quelque chose comme ça (supprimez l'ID showmessage de votre attribut de mise à jour du bouton Enregistrer)

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

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

EDIT Mais de toute façon dans votre code actuel, la boîte de dialogue n'est-elle pas fermée en même temps que le grwol mis à jour?

5
Daniel

Mon conseil:

  1. Utilisez <p:remoteCommand> Avec un attribut actionListener. Cet attribut appelle une méthode de bean de sauvegarde qui contient le code FacesContext.addMessage, De cette façon: <p:remoteCommand actionListener="myBean.testMethod()" />
  2. Ensuite, dans votre script handleSaveNewMember, appelez l'attribut remoteCommandname après addMemberDlg.hide(); de cette façon: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>. Ensuite, function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }
  3. Ajoutez l'attribut update à remoteCommand composant de grognement de pointage: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />
  4. Votre commandButton est OK.

Cela a fonctionné pour moi.

Salutations.

3
rodcruzh

Pourquoi ne pouvez-vous pas mettre p: Dialog dans <h: panelGroup>. comme

< 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>

valeur booléenne qui doit être définie dans votre méthode de sauvegarde. en définissant ceci comme faux dans votre méthode de sauvegarde, il ne s'affichera pas lors de sa mise à jour. Ainsi, seul le message de grognement s'affichera. Mais avant d'appeler cette méthode de sauvegarde, cette valeur booléenne est définie sur true.

0
Thirumurthy

Vous pouvez utiliser un élément PrimeFaces appelé p: remotecommand. Cet élément exécutera une action (pour appeler une méthode bean, par exemple) et exécutera une mise à jour après cette action.

Il y a un exemple dans cet article http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html .

0
Gaalvarez