Pass variable from bean to primefaces page

Question

Another Primefaces Newbie here.

I want to pass data from a bean to XHTML page for use in javascript. Let me make it clear that the primefaces XHTML page does not have components so a normal binding like "#{bean.property}" is not in my requirement.

Is there a way to pass a bean variable to a page when the page is loaded and then to use it as a parameter in javascript.

As you can see I tried passing the "selectedProject" using the RequestContext but could not make it work. My scenario code:

Bean:

@Named(value = "ganttBean")
@SessionScoped
public class GanttBean implements Serializable {

@EJB
ProjectService projectService;
private Long selectedProjectId;
private Project selectedProject = null;

public GanttBean() {
}

public void init(){

    //get the actual project by ID.
    this.selectedProject = projectService.findById(selectedProjectId);
    //package all the tasks of the selected project in a JSON object
    jasonifyProject(selectedProject);

    RequestContext.getCurrentInstance().addCallbackParam("selectedProject",      selectedProject);
   //RequestContext.getCurrentInstance().execute("ggg()");
}

JSF Page:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../../WEB-INF/templates/master/default.xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:em="http://java.sun.com/jsf/composite/ezcomp" 
            xmlns="http://www.w3.org/1999/xhtml">
  <ui:define name="content">
    <f:metadata>
        <f:viewParam name="projectId" value="#    {ganttBean.selectedProjectId}"/>
        <f:event type="preRenderView" listener="#{ganttBean.init()}"/>
    </f:metadata>
    <h1 class="title ui-widget-header ui-corner-all">
        Project Gantt View
    </h1>
    <h:outputScript library="jsGantt" name="jquery.1.8.js"/>
    <h:outputScript library="jsGantt" name="jquery-ui.min.js"/>
    <h:outputStylesheet library="jsGantt" name="jsgantt.css"/>
    <h:outputScript library="jsGantt" name="jsgantt.js" target="head"/>


    <div style="position:relative" class="gantt" id="GanttChartDIV">
        The gantt chart container

    </div>

    <script type="text/javascript">
     var ggg = function(datafrombean){
         ....do something with datafrombean....
     };

        //ionstantiate a gantt chart.
        var g = new    JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');


        //add tasks.
        g.AddTaskItem(new JSGantt.TaskItem(3,   'Define Chart API',       '2/10/2008','25/10/2008','000ff2', 'http://help.com', 0, 'Brian',     0, 1, 0,   1));
        g.AddTaskItem(new JSGantt.TaskItem(12,  'Chart Object',         '2/10/2008', '25/10/2008', 'ff00ff', 'http://www.yahoo.com', 0, 'Shlomy',  100, 0,3, 1));

        //draw the chart
        g.Draw();       
        g.DrawDependencies();

    </script>

    <h:form id="test">
        <h:inputHidden id="hiddenInput"  
                       value="hidden"/>

        <p:dialog id="editTaskDialog" widgetVar="editTaskDialog"   header="Edit Task">

    </p:dialog>
    </h:form>
</ui:define>
</ui:composition>

what about ajax request?? http://api.prototypejs.org/ajax/Ajax/Request/ — Jordi Castilla, Mar 13 '15 at 10:54
HI Jordi, can you shed more light on what you mean by this? How can I send an ajax request when page loads without actually pressing on a button or acting on some input component. — Elton, Mar 13 '15 at 11:10
if you want to do it when page loads add it to `window.onload = function ()`, if you want to do it when a button is clicked just add it to a function and call it when button is pressed... point of ajax call is you can have a request to server without the need of reloading the view to update some part or get the result when the action completes, — Jordi Castilla, Mar 13 '15 at 11:14
Thanks Jordi. That could work nicely in a purely JavaScript situation. But I was looking for something specific to the primefaces/Ajax context. — Elton, Mar 13 '15 at 11:29
Your 'trial' with the request context does not work since the listener in the f:event is not an ajax call and so setting a callback parameter on the request context cannot be used in an oncomplete event or other. Use the answer below or try to use a ` — Kukeltje, Mar 13 '15 at 13:18

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

You can simply use EL in javascript:

<script type="text/javascript">
    function(){
        var datafrombean = #{bean.data};
    };
</script>

The getData() on your bean is called when the page is created.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 13 '15 at 13:25

Kukeltje

12,223
4
24
47

Hi Kukeltje, using EL in javascript is not working for me; I just tried your example above. I'll check out the link and see if there's something causing it not to work. Thanks! – Elton Mar 13 '15 at 13:35

score -2 · Accepted Answer · answered Mar 13 '15 at 12:26

-2

Well.... Let's think a little about how does it works.

Javascript runs at the client side, purely front-end. JSF runs at the server side and render it's components to HTML, so it has the advantage to read the server-side properties, your bean, and then render the properties in the client side.

So, a bridge between the server side and the front side is needed, which JSF already does.

You claimed that your page does not have components, so a normal binding won't satisfy your requirements, but...what about an invisible component?

JSF:

<h:form id="formTest">
     <h:inputText style="display:none" id="idComp1" value="#{ganttBean.property}"></h:inputText>
</h:form>

JS:

<script type="text/javascript">
 function(){
     var datafrombean = document.getElementById('formTest:idComp1').value 
 };
</script>

I'm not sure how many times and when you want to call that function, but you may have to use ajax to render again the invisible component and then call the JS function again.

Also, I'm sure that there is other simple options, it is just an way to do that

answered Mar 13 '15 at 12:26

Pellizon

1,365
2
12
26

1

Ah! This is a good answer. I tried it and it seems to work. Thank you. Now I just have to figure out a way of parsing the object I'm sending. But that's another discussion. – Elton Mar 13 '15 at 13:17
If you still need to parse the object (is it a string?), use one of my two suggestion in the comments. Both automagically result in objects – Kukeltje Mar 13 '15 at 13:20
No it's not a string. It's an object and yes your example results in an object. The problem now is that my javascript method does not know this object and I must find a way to unpack it. Maybe something for JSON. I guess it also requires a relook of what I'm passing to the javascript method. – Elton Mar 13 '15 at 13:24
I added another answer. In fact, I even think your question is a duplicate of the link in my answer. – Kukeltje Mar 13 '15 at 13:29

Pass variable from bean to primefaces page

2 Answers2