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.


相关文章推荐

How to override the default item save event using custom fields

In my former post I wrote about the approach to use custom field types as an alternative way for l...

How to pass new hidden value to backing bean in JSF

https://www.mkyong.com/jsf2/how-to-pass-new-hidden-value-to-backing-bean-in-jsf/ In some cases,...

How To Set Up a Firewall Using FirewallD on CentOS 7

Introduction Firewalld is a complete firewall solution available by default on CentOS 7 servers. ...

How to Monitor and Log Network Traffic on Linux Using vnStat

This article is part of our on-going performance monitoring series of articles. In this article, ...

How To Set Up a Firewall Using FirewallD on CentOS 7

From https://www.digitalocean.com/community/tutorials/how-to-set-up-a-firewall-using-firewalld-on-ce...

How to Install Ruby 2.1.1 on CentOS & RHEL 6 using RVM

Ruby is a dynamic, object-oriented programming language.We are using RVM, which stands for Ruby Vers...

iPhone - How to send image + text on facebook using sharekit

iPhone - How to send image + text on facebook using sharekit up vote0down votefavorite ...

JSF2.0中的managed bean生命周期

对JSF2的托管Bean几种托管周期的总结,比较简洁,转一份放这儿参考。类似此类问题,只有结合实际例子分析才好理解。 转自 http://blog.csdn.net/suncaishen...

JSF2.0中的managed bean生命周期

@RequestScoped(默认生命周期)为每一次request请求,new一个实体在实际应用中此周期也为form中的input进行初始化。即:他会被实例化两次1,表单form被展现时。2,表单被提...

JSF2 如何编程式的访问Managed Bean

       通常我们都是在页面里通过EL表达式实现对Managed Bean属性值的读取,Event的处理及函数的调用。然而,某些情况下,我们不得不在程序里直接访问某些Managed Bean,通常...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
举报原因:
原因补充:

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