Javascript 将变量从bean传递到primefaces页面_Javascript_Jsf_Primefaces_Requestcontext

Javascript 将变量从bean传递到primefaces页面

javascript jsf primefaces

Javascript 将变量从bean传递到primefaces页面,javascript,jsf,primefaces,requestcontext,Javascript,Jsf,Primefaces,Requestcontext,这里还有一个新手我想将数据从bean传递到XHTML页面，以便在javascript中使用。让我澄清一下，primefaces XHTML页面没有组件，因此我不需要像“#{bean.property}”这样的普通绑定是否有一种方法可以在加载页面时将bean变量传递给页面，然后在javascript中将其用作参数如您所见，我尝试使用RequestContext传递“selectedProject”，但无法使其工作。我的场景代码：豆子： JSF页面： <?xml version='1

这里还有一个新手

我想将数据从bean传递到XHTML页面，以便在javascript中使用。让我澄清一下，primefaces XHTML页面没有组件，因此我不需要像“#{bean.property}”这样的普通绑定

是否有一种方法可以在加载页面时将bean变量传递给页面，然后在javascript中将其用作参数

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

豆子：

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>


项目甘特图视图
甘特图容器
var ggg=函数（datafrombean）{
..使用datafrombean执行某些操作。。。。
};
//绘制甘特图。
var g=new JSGantt.GanttChart（'g'，document.getElementById（'GanttChartDIV'），'day'）；
//添加任务。
g、 AddTaskItem（新的JSGantt.TaskItem（3，‘定义图表API’、‘2/10/2008’、‘25/10/2008’、‘000ff2’、’）http://help.com，0，'布莱恩'，0，1，0，1）；
g、 AddTaskItem（新JSGantt.TaskItem（12，'图表对象'，'2/10/2008'，'25/10/2008'，'ff00ff'，'http://www.yahoo.com",0,"Shlomy",100,0,3,1),；
//画图表
g、 Draw（）；
g、 DrawDependencies（）；

好吧。。。。让我们思考一下它是如何工作的

Javascript在客户端运行，纯前端。 JSF在服务器端运行，并将其组件呈现为HTML，因此，读取服务器端属性、bean，然后在客户端呈现属性，这是一种优势

因此，需要在服务器端和前端之间架起一座桥梁，JSF已经做到了这一点

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

JSF：

JS:


函数（）{
var datafrombean=document.getElementById（'formTest:idComp1'）。值
};

我不确定要调用该函数多少次，何时调用，但可能需要使用ajax再次渲染不可见组件，然后再次调用JS函数

此外，我确信还有其他简单的选项，这只是一种方法，您可以简单地使用：


函数（）{
var datafrombean=#{bean.data}；
};

创建页面时，将调用bean上的

getData（）

那么ajax请求呢？？嗨，乔迪，你能解释一下你的意思吗？当页面加载时，我如何发送ajax请求而不实际按下按钮或操作某些输入组件。如果要在页面加载时发送ajax请求，请将其添加到

window.onload=function（）

，如果要在单击按钮时发送ajax请求，请将其添加到函数中，并在按下按钮时调用它。。。ajax调用的要点是，您可以向服务器发出请求，而无需重新加载视图来更新某些部分或在操作完成时获得结果，谢谢Jordi。这在纯JavaScript的情况下可以很好地工作。但我一直在寻找primefaces/Ajax上下文的特定内容。您对请求上下文的“尝试”不起作用，因为f:事件中的侦听器不是Ajax调用，因此在请求上下文上设置回调参数不能用于oncomplete事件或其他事件。使用下面的答案或尝试使用

Ah！这是一个很好的答案。我试过了，似乎很管用。非常感谢。现在我只需要找出一种解析我发送的对象的方法。但这是另一个讨论。如果您仍然需要解析对象（它是字符串吗？），请在注释中使用我的两个建议之一。这两种方法都会自动生成objectsNo，它不是字符串。它是一个对象，是的，您的示例生成了一个对象。现在的问题是，我的javascript方法不知道这个对象，我必须找到一种方法来解压它。也许是JSON的东西。我想它还需要重新记录我传递给javascript方法的内容。事实上，我甚至认为你的问题是我答案中链接的重复；我刚才试过你上面的例子。我会查看链接，看看是否有什么原因导致它无法工作。谢谢
<?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>

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

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

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