从bean传递变量到primefaces页面

另一个Primefaces新手在这里。从bean传递变量到primefaces页面

我想将数据从一个bean传递给XHTML页面以便在javascript中使用。让我明确指出，primefaces XHTML页面没有组件，因此不需要像“＃{bean.property}”这样的常规绑定。

有没有办法在加载页面时将一个bean变量传递给一个页面，然后将它用作javascript中的参数。

正如你所看到的，我尝试使用RequestContext传递“selectedProject”，但无法使其工作。我的场景代码：

豆：

@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页面：

<?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>

来源

2015-03-13 Elton

ajax请求怎么办？ http://api.prototypejs.org/ajax/Ajax/Request/ – 2015-03-13 10:54:22

HI Jordi，你能更清楚地表达你的意思吗？如何在页面加载时发送ajax请求，而无需实际按下按钮或对某些输入组件执行操作。 – Elton 2015-03-13 11:10:17

如果你想在页面加载时将它添加到'window.onload = function（）'中，如果你想在点击一个按钮的时候这样做，只需将它添加到一个函数中并在按下按钮时调用它。 ajax调用点是你可以有一个请求到服务器，而无需重新加载视图来更新某个部分或在动作完成时得到结果， – 2015-03-13 11:14:18

-2

嗯....让我们想到一些关于它是如何工作的。

Javascript运行在客户端，纯粹是前端。 JSF在服务器端运行，并将它的组件呈现给HTML，，因此它有利于读取服务器端属性，bean，然后呈现客户端的属性。

因此，需要在服务器端和前端之间架设一个JSF已经完成的工作。

你声称你的页面没有组件，所以普通的绑定不能满足你的需求，但是......一个看不见的组件呢？

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>

我不知道你想多少次以及何时调用该函数，但您可能需要使用Ajax再次渲染不可见的组件，然后再次调用JS函数。

而且，我敢肯定有其他简单的选择，它仅仅是一个办法做到这一点

来源

2015-03-13 12:26:23 Pellizon

啊！这是一个很好的答案。我试过了，它似乎工作。谢谢。现在我只需要找出解析我发送的对象的方法。但那是另一个讨论。 – Elton 2015-03-13 13:17:37

如果你仍然需要解析对象（它是一个字符串？），请在评论中使用我的两个建议之一。两者自动产生对象 – Kukeltje 2015-03-13 13:20:12

不，它不是一个字符串。这是一个对象，是的，你的例子产生了一个对象。现在的问题是，我的JavaScript方法不知道这个对象，我必须找到解压缩它的方法。也许是JSON的一些东西。我想这也需要重新审视我传递给javascript方法的内容。 – Elton 2015-03-13 13:24:33

您可以简单地使用EL in javascript：

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

上你的bean的getData()被调用时该页面已创建。

来源

2015-03-13 13:25:08 Kukeltje

嗨Kukeltje，在JavaScript中使用EL不适合我;我刚刚尝试了上面的示例。我会检查链接，看看是否有东西导致它不工作。谢谢！ – Elton 2015-03-13 13:35:11

从bean传递变量到primefaces页面

回答

相关问题