从 javascript 中的托管 bean 获取返回值

Question

在我的应用程序中，我调用了一个 Javascript 事件，该事件调用了一个名为 checkPageLayoutsAreSelected 的 p:remoteCommand，如下所示：

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

这是 p:remoteCommand :

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

此 p:remoteCommand 将调用 beanFormDashboard 托管 bean 中的方法，该方法将 return 一个布尔值：

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

所以我想从 Javascript 代码中的托管 bean 中通过 checkPageLayoutsAreSelected() 获取 returned 值。

像这样：

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

我该怎么做？

Answer 1

checkPageLayoutsAreSelected 没有 return 价值甚至承诺，但你可以 Ajaxicaly return 价值。

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

并且在方法checkPageLayoutsAreSelected()中使用PF提供的RequestContext将结果发送回客户端：

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) 您将获得 returned 值：

$('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 render/update 成为您元素的组件包装器，然后使用基本 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

我添加了一条提醒，告诉您数据 = 已被修改。

重要，你可能需要在 oncomplete 阶段完成它——因为它绝对确定 dom 渲染已经完成，如果 JS 成功，DOM 可能仍然具有旧值运行足够快了。

希望对您有所帮助。

从 javascript 中的托管 bean 获取返回值

Get the returned value from managed bean in javascript

javascript

jsf

primefaces

jsf-2

jsf-2.2