How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

转载 2015年11月20日 23:04:50

I need to execute a JSF managed bean action method using ajax during HTML DOM load event, similar to jQuery's $(document).ready(function() { $.ajax(...) }). I can only use the JavaScript generated by JSF in this project. Is there a way to do it in native JSF? Which event can I use or which JSF ajax function can I use?

I'm using JSF 2.0, Facelets and PrimeFaces.


Several ways.

  1. Use the "hidden form" trick (actually, "hack" is given the ugliness a better wording).

    <h:outputScript target="body">
        document.getElementById("form:button").onclick();
    </h:outputScript>
    <h:form id="form" style="display:none;">
        <h:commandButton id="button" action="#{bean.onload}">
            <f:ajax render=":results" />
        </h:commandButton>
    </h:form>
    <h:panelGroup id="results">
        ...
    </h:panelGroup>

    Note that <h:outputScript target="body"> automatically puts the <script> in end of <body>, thus a $(document).ready() or window.onload wrapper is unnecessary. Also note the importance of triggering onclick() instead of click() in case of <h:commandButton>. The onclick() immediately invokes the onclick function while the click() only triggers the "click" event on the element, which is not supported in IE.

  2. As you're already using PrimeFaces, just use its <p:remoteCommand> with autoRun="true".

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

This however doesn't use JSF native jsf.ajax.request(), instead it uses PrimeFaces native jQuery (you know, PrimeFaces is a JSF component library on top of jQuery/UI).

3. Create a custom UIComponent which extends UICommand and generates the necessary JSF native jsf.ajax.request() call. You're then in essence reinventing the <p:remoteCommand> to use native JSF ajax instead of jQuery. The JSF utility library OmniFaces has a <o:commandScript> component which does exactly that. See also the showcase and the source code.

  1. <h:outputScript target="body">
        onload();
    </h:outputScript>
    <h:form>
        <o:commandScript name="onload" action="#{bean.onload}" render=":results" />
    </h:form>
    <h:panelGroup id="results">
        ...
    </h:panelGroup>
一点注解:<prime:remoteCommand> is intended to call back end bean methods from Javascript. Combine it with the update property to update the screen. Another property, autoRun, allows you to use<prime:remoteCommand> without Javascript code. autoRun="true" makes sure the back end method is called automatically after the form is displayed. Insert the remoteCommand immediately before the closing </form> tag:
 <prime:remoteCommand autoRun="true" action="#{myBean.init}"
                         update="content" name="longRunningInit"/>
</form>

Be careful to define the update property correctly. The updated region of the screen shouldn’t include the remoteCommand. You don’t want to get an infinite loop.

You can call an arbitrary method of the bean. If you call <prime:remoteCommand> from Javascript, you can even pass parameters to the bean’s method. Of course, usingautoRun="true" doesn’t allow us to pass parameters, so a simple parameterless method will do.


JSF的ManagedBean与Spring Bean的比较与集成

在JavaEE应用的开发中,常常有人选择了JSF作为视图层框架,但是却基于传统思维抛弃了JavaEE的CDI,而选用了Spring DI。 这不仅造成了框架的错配,而且集成JSF与Spring容易造成...
  • taiyangdao
  • taiyangdao
  • 2016年03月21日 12:13
  • 1328

JSF 关于JSF 添加 ajax 支持(a4j:support event="onchange" reRender=""),导致绑定值为空

当我们在Jsf页面用了以下代码时: ...
  • u011952560
  • u011952560
  • 2013年09月06日 14:18
  • 1122

JSF2 ManagedBean使用注意事项

1、ManagedBean命名       建议ManagedBean命名规则采用*MB.java,让大家一看就知道MB结尾的class都是Managed Bean。当然,有特定code guide ...
  • chuangxin
  • chuangxin
  • 2011年06月09日 09:01
  • 8016

spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法

最近遇到一个问题:在生产中有两个模块,一个模块负责定时任务,并负责存库,另一个模块则负责读取数据库,并展示,由于是两个不同的模块,所以每个模块中都有一部分entity是公用的,导致整个系统的代码重复率...
  • liuchuanhong1
  • liuchuanhong1
  • 2017年07月02日 12:03
  • 5207

Spring Data JPA配置出现Not a managed type错误

最近在学习Spring框架,配置数据库连接的时候出现这个错误。Caused by: java.lang.IllegalArgumentException: Not a managed type: cl...
  • lusyoe
  • lusyoe
  • 2016年10月05日 17:40
  • 5698

spring data jpa 出现Not a managed type

这几天看自己买的那本spring boot的书,学些spring boot,spring boot零配置还是挺好用的,当看到spring data jpa时,我想自己写一下,spring data j...
  • lilovfly
  • lilovfly
  • 2016年11月24日 14:36
  • 8981

JavaScript -- event handler

事件处理器(event handler)机制:当事件发生时,事件处理器将连接到需要执行的事件处理代码。 window对象具有load事件和unload事件,当页面加载完毕时触发load事件,页面卸载...
  • ryuali2010
  • ryuali2010
  • 2012年09月11日 10:51
  • 2746

Caused by: java.lang.IllegalArgumentException: Not an managed type: class

spring和jpa继承时,出现 Caused by: java.lang.IllegalArgumentException: Not an managed type: class xxx 检...
  • shijiedemuguang
  • shijiedemuguang
  • 2017年02月28日 17:51
  • 404

Apple Demo

转自:http://blog.csdn.net/u011347534/article/details/50170581 Mirror of Apple's iOS samples This...
  • dongtinghong
  • dongtinghong
  • 2016年04月29日 00:40
  • 907

Html a href="#" 与 a href="javascript:void(0)" 的区别

# 包含了一个位置信息,默认的锚点是#top,也就是网页的上端. javascript:void(0); 表示执行一个空函数,仅仅表示一个死链接. here 点击链接后不会回到网页顶部 her...
  • maxracer
  • maxracer
  • 2012年01月10日 10:11
  • 1229
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
举报原因:
原因补充:

(最多只允许输入30个字)