Làm cách nào để kích hoạt làm mới thành phần từ javascript trong các vị trí chính?

Question

Có thể cập nhật thành phần PrimeFaces từ javascript để nó có thể làm mới không?

Tôi đang thực hiện cuộc gọi lưu ajax bằng cách sử dụng nút này trong hộp thoại. Tôi đã đính kèm javascript tùy chỉnh của mình vào sự kiện chưa hoàn tất.

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

.. lưu nút lưu, tôi thêm thông báo vào đây để hiển thị cho khách hàng sử dụng thành phần growl.

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

} 

Vấn đề của tôi là, làm cách nào để sắp xếp giao diện người dùng như vậy, tôi nên ẩn hộp thoại trước khi thành phần growl có thể hiển thị meesage?

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

Điều đang xảy ra là thành phần gầm gừ được hiển thị cùng với hộp thoại cùng một lúc.

Cảm ơn.

Answer 1

bạn luôn có thể làm điều gì đó như thế này (loại bỏ các id ShowMessage từ tiết kiệm nút cập nhật thuộc tính của bạn)

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

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

EDIT Nhưng dù sao trong mã hiện tại của bạn, không phải là thoại được đóng cửa ở đồng thời grwol đang được cập nhật?

Answer 2

Tại sao bạn không thể đặt p: Hộp thoại bên trong của < h: panelGroup>. như

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

giá trị boolean phải được đặt trong phương thức lưu của bạn. trên thiết lập này là sai trong phương pháp lưu của bạn nó sẽ không hiển thị trong khi cập nhật nó. Vì vậy, thông điệp gầm gừ sẽ hiển thị. Nhưng trước khi gọi phương thức này, giá trị boolean này được đặt là true.

Answer 3

Bạn có thể sử dụng PrimeFaces '<p:remoteCommand> cho việc này.

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

mà là để được gọi như

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

---

Trong trường hợp này đặc biệt có tuy nhiên một cách đơn giản hơn. Đặt thuộc tính autoUpdate của <p:growl> thành true.

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

Nó sẽ tự động tự cập nhật theo mọi yêu cầu ajax. Nếu thành phần của bạn thực sự không hỗ trợ nó, thì bạn luôn có thể bọc nó trong một <p:outputPanel> cũng hỗ trợ thuộc tính đó.

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

Answer 4

Lời khuyên của tôi:

1. Sử dụng <p:remoteCommand> với một thuộc tính actionListener.Thuộc tính này gọi một phương pháp đậu sao lưu có chứa FacesContext.addMessage mã, theo cách này: <p:remoteCommand actionListener="myBean.testMethod()" />
2. Tiếp theo, trong handleSaveNewMember kịch bản của bạn, gọi thuộc tính remoteCommandname sau addMemberDlg.hide(); theo cách này: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()"/>. Sau đó, function handleSaveNewMember(xhr, status, args) { addMemberDlg.hide(); testScript(); }
3. Add update thuộc tính để remoteCommand chỉ thành phần tiếng gầm gừ: <p:remoteCommand name="testScript" actionListener="myBean.testMethod()" update="showmessage" />
4. commandButton của bạn là OK.

Điều này phù hợp với tôi.

Chúc mừng.

Answer 5

Bạn có thể sử dụng phần tử PrimeFaces được gọi là p: remotecommand. Phần tử này sẽ thực hiện một hành động (ví dụ để gọi một phương thức bean) và thực thi một cập nhật sau hành động đó.

Có ví dụ trong bài đăng này http://devdublog.blogspot.com/2015/04/best-way-for-calling-method-of.html.