CODEWITHSUNDEEP
javascriptjsfprimefacesjsf-2jsf-2.2
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2074

Get the returned value from managed bean in javascript

In my application I call a Javascript event which calls a p:remoteCommand named checkPageLayoutsAreSelected as following :

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

This is the p:remoteCommand :

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

This p:remoteCommand will call a method in the beanFormDashboard managed bean which will return a Boolean value :

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

So I want to get the returned value by the checkPageLayoutsAreSelected() from the managed bean in the Javascript code.

Something like this :

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

How can I do that?

Upvotes: 6

Views: 7935

Answers (2)

fingerpich
fingerpich

Reputation: 9330

checkPageLayoutsAreSelected doesn't return a value or even a promise but you can Ajaxicaly return value.

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

And in the method checkPageLayoutsAreSelected() you use RequestContext provided by PF to send result back to client:

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

And in the Javascript callback function getLayoutAreSelectedResult(xhr, status, args) you will have the returned value:

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

Upvotes: 7

VeenarM
VeenarM

Reputation: 1263

The other answer works and gives u full xhr access, but you could theoretically do that at any point in time, throw something into the requestScope and re-render then pull it out from EL. Personally I prefer to have the elements visible on the page as we may use them later for any kind of info but this is another way to do it. Set a hidden element with reference to your bean data, and wrap it a component that can be targeted for re-rendering.

Then in your checkPageLayoursAreSelected, set the value of that object on the bean, and have the remoteCommand render/update the component wrapper of your element, and an after effect then just use basic JS or Jquery to get the value from the dom.

Working example:

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

I've added an alert to show you that the data =has been modified.

Important, you need to likely do it in the oncomplete phase - as it's absolutely sure that the dom rendering has beenc ompleted, onsuccess the DOM may still have the older value if the JS is run quick enough.

Hope this helps.

Upvotes: 0

Related Questions