從javascript中獲取托管bean的返回值

Question

在我的應用程序中，我調用一個Javascript事件，該事件調用名為checkPageLayoutsAreSelected的p:remoteCommand checkPageLayoutsAreSelected ，如下所示：

$('selector').on('click', function (e) {
  checkPageLayoutsAreSelected();
});

這是p:remoteCommand ：

<p:remoteCommand name="checkPageLayoutsAreSelected" actionListener="#{beanFormDashboard.checkPageLayoutsAreSelected}" />

這個p:remoteCommand將調用beanFormDashboard托管bean中的一個方法，該方法將返回一個布爾值：

public Boolean checkPageLayoutsAreSelected(){
    for(DashboardPage dp : dashboardPageList){
        if(dp.getModel() == 0){
            return false;
        }
    }
    return true;
}

所以我想通過Javascript代碼中托管bean的checkPageLayoutsAreSelected()獲取返回值。

像這樣的東西：

$('selector').on('click', function (e) {
  var returnedValue = checkPageLayoutsAreSelected();
});

我怎樣才能做到這一點？

Answer 1

checkPageLayoutsAreSelected不返回值甚至是promise，但是您可以返回Ajaxicaly值。

<p:remoteCommand name="checkPageLayoutsAreSelected"
     action="#{beanFormDashboard.checkPageLayoutsAreSelected()}"
     oncomplete="getLayoutAreSelectedResult(xhr, status, args);"
/>

在方法checkPageLayoutsAreSelected()您使用PF提供的checkPageLayoutsAreSelected()將結果發送回客戶端：

public void checkPageLayoutsAreSelected() {
   Boolean result=true;
   for(DashboardPage dp : dashboardPageList){
        if(dp.getModel() == 0){
            result= false;
        }
   }
   RequestContext reqCtx = RequestContext.getCurrentInstance();        
   reqCtx.addCallbackParam("returnedValue", result);
}

在Javascript回調函數getLayoutAreSelectedResult(xhr, status, args)您將獲得返回值：

$('selector').on('click', function (e) {
    checkPageLayoutsAreSelected();
    window.getLayoutAreSelectedResult= function(xhr, status, args) {
       var returnedValue = args.returnedValue;
       console.log(returnedValue);
    }
});

Answer 2

另一個答案是有效的並且給你完整的xhr訪問權限，但理論上你可以在任何時間點執行此操作，將某些內容放入requestScope並重新渲染然后從EL中取出。 我個人更喜歡在頁面上顯示元素，因為我們以后可能會將它們用於任何類型的信息，但這是另一種方法。 設置一個隱藏元素，引用您的bean數據，並將其包裝一個可以作為重新呈現目標的組件。

然后在checkPageLayoursAreSelected中，在bean上設置該對象的值，讓remoteCommand渲染/更新元素的組件包裝器，然后使用基本的JS或Jquery從dom獲取值。

工作范例：

view.xhtml

  <button type="button" id="buttonClicker" class="buttonClicker" >Click Me</button>

  <p:remoteCommand name="checkPageLayoutsAreSelected" actionListener="#{testBean.checkPageLayoutsAreSelected}" update="pageLayoutSelected" oncomplete="showVal()"/>

  <h:panelGroup id="pageLayoutSelected">
       <h:inputHidden  value="#{testBean.pageLayoutSelected}" id="checkPageLayoutValueId" />
  </h:panelGroup>

  <script>
    $('.buttonClicker').on('click', function (e) {
         checkPageLayoutsAreSelected();
    });
    function showVal() {
        alert($("[id$='checkPageLayoutValueId']").val());
    };
  </script>

TestBean.java

    private Boolean pageLayoutSelected;

    public Boolean checkPageLayoutsAreSelected(ActionEvent event) {
        if (pageLayoutSelected == null || pageLayoutSelected == Boolean.FALSE) {
            pageLayoutSelected = Boolean.TRUE;
        } else {
            pageLayoutSelected = Boolean.FALSE;
        }

    return pageLayoutSelected;
}
getters/setters

我添加了一個警告，告訴您data =已被修改。

重要的是，您需要在完成階段完成它 - 因為它絕對確定dom渲染已經完成，如果JS運行得足夠快，那么DOM可能仍然具有較舊的值。

希望這可以幫助。