Question

如何制作一个从javascript更新<h:dataTable>的ajax请求？我目前正在使用@Postconstruct加载初始数据，但这显着延迟了初始页面加载。

我正在考虑使用onload HTML标记的<body>事件来触发请求并更新数据表。

Answer 1

在理论中，以下内容应该这样做。

<h:body>
    <f:ajax event="load" listener="#{bean.onload}" />
</h:body>

与

public void onload(AjaxBehaviourEvent event) {
    // ...
}

但是，出于某种原因不支持此功能。我曾经发布了一个issue report。

以下作品，但它本质上是一个黑客。

<h:head>
    <title>JSF 2.0 onload hack</title>
    <script>
        window.onload = function() {
            document.getElementById('hidden:link').onclick();
        }
    </script>
</h:head>
<h:body>
    <h:form id="hidden" style="display:none">
        <h:commandLink id="link">
            <f:ajax event="click" listener="#{bean.onload}" />
        </h:commandLink>
    </h:form>
</h:body>

如果您碰巧使用PrimeFaces，那么您可以将<p:remoteCommand>与autoRun set to true一起使用。

<h:body>
    <h:form>
        <p:remoteCommand name="onload" action="#{bean.onload}" autoRun="true" />
    </h:form>
</h:body>

或者，如果您使用的是OmniFaces，则可以使用其<o:commandScript>

<h:body>
    <h:form>
        <o:commandScript name="onload" action="#{bean.onload}" />
        <h:outputScript target="body">onload()</h:outputScript>
    </h:form>
</h:body>

<h:outputScript target="body">在<script>的末尾呈现<body>。即将推出的OmniFaces 2.2将通过new autorun attribute消除这种需求。

<h:body>
    <h:form>
        <o:commandScript name="onload" action="#{bean.onload}" autorun="true" />
    </h:form>
</h:body>

Answer 2

在jsf2.0中你几乎可以在任何其他jsf标签中使用f：ajax标签，例如

<h:selectOneRadio id="myComponent" value="#{someBean.inputMethod}">
<f:selectItem itemValue="#{someBean.A}" itemLabel="A" />
<f:selectItem itemValue="#{someBean.B}" itemLabel="B" />
       <f:ajax event="click" action=#{someBean.someMethod} />
</h:selectOneRadio>

在这个例子中，someMethod在“myComponent”selectOneRadio的javasript onClick事件中被执行

不确定这是不是你想要的......

Answer 3

我通过使用元数据功能解决了该问题，因为我无法使用@PostContruct（FacesMessages入队，并且在置入postconstruct mehtod中时不显示... see最后的评论）

<f:metadata>
<f:viewAction action="#{bean.initProducts}" />
</f:metadata>

<h:body>
<ui:composition template="/templates/commonTemplate.xhtml">

    <ui:define name="body">

        <h:panelGroup>
            <h:dataTable id="table"
                value="#{bean.getProducts}" var="product"

              <!-- Table Stuff-->
            </h:dataTable>
        </h:panelGroup>


    </ui:define>
</ui:composition>

我对JSF还是很陌生，所以... 我对JSF的生命周期阶段不是很了解，但是这个解决方案对我有用。

从javascript onload事件执行托管bean方法

3 个答案: