Question

我需要在HTML DOM load事件期间使用ajax执行JSF托管bean操作方法，类似于jQuery的$(document).ready(function() { $.ajax(...) })。我只能在这个项目中使用JSF生成的JavaScript。有没有办法在原生JSF中做到这一点？我可以使用哪个事件或者我可以使用哪个JSF ajax函数？

我正在使用JSF 2.0，Facelets和PrimeFaces。

Answer 1

有几种方式。

使用“隐藏形式”技巧（实际上，“hack”给出了更好的措辞）。
```
<h:form id="form" style="display:none;">
    <h:commandButton id="button" action="#{bean.action}">
        <f:ajax render=":results" />
    </h:commandButton>
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
您可以在JS中调用它，如下所示：
```
document.getElementById("form:button").onclick();
```
请注意onclick()时触发click()而不是<h:commandButton>的重要性。 onclick()立即调用onclick函数，而click()仅触发元素上的“click”事件，IE中不支持该事件。如果您使用<h:commandLink>，则可以安全地使用click()。

要在load事件期间调用它，请考虑将其放入<h:outputScript target="body">。 target="body"自动将<script>放在<body>的末尾，因此不需要$(document).ready()包装。
```
<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>
```
由于您已经在使用PrimeFaces，只需使用其<p:remoteCommand>。
```
<h:form>
    <p:remoteCommand name="commandName" action="#{bean.action}" update=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
您可以在JS中调用它，如下所示：
```
commandName();
```
然而，这不使用JSF本机jsf.ajax.request()，而是使用PrimeFaces本机jQuery（你知道，PrimeFaces是jQuery / UI之上的JSF组件库）。

要在load事件期间调用它，请设置autoRun="true"。
```
<p:remoteCommand ... autoRun="true" />
```
创建一个自定义UIComponent，扩展UICommand并生成必要的JSF原生jsf.ajax.request()调用。然后，您将重新发明<p:remoteCommand>以使用本机JSF ajax而不是jQuery。 JSF实用程序库OmniFaces有一个<o:commandScript>组件，它就是这样做的。另请参阅showcase和source code。
```
<h:form>
    <o:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>
```
您可以在JS中调用它，如下所示：
```
commandName();
```
要在load事件期间调用它，请设置autorun="true"。
```
<o:commandScript ... autorun="true" />
```
升级到JSF 2.3并使用原生<h:commandScript>组件。它自2.3.0-m06起可用。语法与上面的<o:commandScript>完全相同。只需将o:替换为h:。

如何使用本机JavaScript在HTML DOM事件上调用JSF托管bean？

1 个答案: