title: Pass variable from bean to primefaces page
body: <p>Another Primefaces Newbie here.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>As you can see I tried passing the "selectedProject" using the RequestContext but could not make it work.
  My scenario code:</p>
  
  <p>Bean:</p>
  
  <pre><code>@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()");
  }
  </code></pre>
  
  <p>JSF Page:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
    &lt;ui:define name="content"&gt;
      &lt;f:metadata&gt;
          &lt;f:viewParam name="projectId" value="#    {ganttBean.selectedProjectId}"/&gt;
          &lt;f:event type="preRenderView" listener="#{ganttBean.init()}"/&gt;
      &lt;/f:metadata&gt;
      &lt;h1 class="title ui-widget-header ui-corner-all"&gt;
          Project Gantt View
      &lt;/h1&gt;
      &lt;h:outputScript library="jsGantt" name="jquery.1.8.js"/&gt;
      &lt;h:outputScript library="jsGantt" name="jquery-ui.min.js"/&gt;
      &lt;h:outputStylesheet library="jsGantt" name="jsgantt.css"/&gt;
      &lt;h:outputScript library="jsGantt" name="jsgantt.js" target="head"/&gt;
  
  
      &lt;div style="position:relative" class="gantt" id="GanttChartDIV"&gt;
          The gantt chart container
  
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
       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();
  
      &lt;/script&gt;
  
      &lt;h:form id="test"&gt;
          &lt;h:inputHidden id="hiddenInput"  
                         value="hidden"/&gt;
  
          &lt;p:dialog id="editTaskDialog" widgetVar="editTaskDialog"   header="Edit Task"&gt;
  
      &lt;/p:dialog&gt;
      &lt;/h:form&gt;
  &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>