编程语言
首页 > 编程语言> > 如何使用本机JavaScript在HTML DOM事件上调用JSF托管bean?

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

作者:互联网

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

我正在使用JSF 2.0,Facelets和PrimeFaces.

解决方法:

几种方式.

>使用< h:commandScript>.请注意,这仅在JSF 2.3之后可用.

<h:form>
    <h:commandScript name="commandName" action="#{bean.action}" render=":results" />
</h:form>
<h:panelGroup id="results">
    ...
</h:panelGroup>

您可以在JS中调用它,如下所示:

commandName();

要在加载事件期间调用它,请设置autorun =“true”.

<h:commandScript ... autorun="true" />

>如果您使用的是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组件库).

要在加载事件期间调用它,请设置autoRun =“true”.

<p:remoteCommand ... autoRun="true" />

>如果您使用的是OmniFaces,请使用其<o:commandScript>.用法与< h:commandScript>完全相同但随后可用于较旧的JSF 2.x版本.

在第一个例子中,简单地用o:替换h:.历史记录:< h:commandScript>完全基于< o:commandScript>.

>使用“隐藏形式”技巧(实际上,“黑客”给予丑陋更好的措辞).

<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();

注意在< h:commandButton>的情况下触发onclick()而不是click()的重要性. onclick()立即调用onclick函数,而click()仅触发元素上的“click”事件,IE中不支持该事件.如果您使用< h:commandLink>,则可以安全地使用click().

要在加载事件期间调用它,请考虑将其放在< h:outputScript target =“body”>中. target =“body”自动放入< script>在< body>的末尾,因此$(document).ready()包装器是不必要的.

<h:outputScript target="body">
    document.getElementById("form:button").onclick();
</h:outputScript>

>或者,创建一个自定义UIComponent,它扩展UICommand并生成必要的JSF本机jsf.ajax.request()调用.作为示例,您可以查看OmniFaces< o:commandScript>的source code.

标签:javascript,ajax,jsf,primefaces,facelets
来源: https://codeday.me/bug/20190911/1803487.html