在 jQuery 中使用参数调用 JSF 托管 bean 方法 [英] Calling JSF managed bean method with arguments in jQuery

问题描述

我正在使用 JSF 构建站点.我已将 jQuery Gritter (Growl) 通知包含在我的主页.是否可以在 $.gritter.add 函数的 before_close: 中调用托管 bean 方法?

I am using JSF to build a site. I have included jQuery Gritter (Growl) notification on my home page. Is it possible to call a managed bean method inside the before_close: of $.gritter.add function?

我要使用的代码如下:

<h:body>
    <c:forEach items="#{notificationBean.growlNotificationList}" var="p">
        <script>
        /* <![CDATA[ */
        $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: 'Notification',
            // (string | mandatory) the text inside the notification
            text: 'Comment on your staus',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: true, 
            // (int | optional) the time you want it to be alive for before fading out (milliseconds)
            time: 8000,
            // (string | optional) the class name you want to apply directly to the notification for custom styling
            class_name: 'gritter-light',
            // (function | optional) function called before it closes
            before_close: function(e, manual_close){
                '#{notificationBean.set0ToGrowlToShow(p.notificationID)}'
            }
        });
        /* ]]> */
        </script>
    </c:forEach>
</h:body>

推荐答案

您当前的尝试只是将给定的 EL 表达式解释为值表达式，并在生成嵌入了 JS 代码的 HTML 输出期间立即打印其结果.这就像您在使用 一样.这确实行不通.

Your current attempt merely interprets the given EL expression as a value expression and just prints its result immediately during producing the HTML output with the JS code embedded. It's like as if you're using <h:outputText>. This is indeed not going to work.

然而，功能要求是可以理解的.标准 JSF API 没有为此提供现成的解决方案.如果您想坚持使用标准的 JSF API，最好的办法是创建一个带有隐藏命令链接的隐藏表单，您可以使用 JavaScript 触发该链接.

The functional requirement is however understood. The standard JSF API does not offer a ready-to-use solution for this. If you want to stick to standard JSF API, your best bet is to create a hidden form with a hidden command link which you trigger using JavaScript.

基本上，

<h:form id="form" style="display:none">
    <h:inputHidden id="id" value="#{notificationBean.notificationID}" />
    <h:commandLink id="command" action="#{notificationBean.set0ToGrowlToShow}">
        <f:ajax execute="@form" />
    </h:commandLink>
</h:form>

与

$("[id='form:id']").val(#{p.notificationID});    
$("[id='form:command']").click();

然而，这很笨拙.无论如何，请考虑寻找第 3 方 JSF 组件甚至实用程序库来满足需求.JSF 实用程序库 OmniFaces 具有 组件.另请参阅其展示页面.

However, this is pretty clumsy. Consider looking for a 3rd party JSF component or even utility library to achieve the requirement anyway. The JSF utility library OmniFaces has the <o:commandScript> component for this. See also its showcase page.

<h:form>
    <o:commandScript name="set0ToGrowlToShow" action="#{notificationBean.set0ToGrowlToShow}" />
</h:form>

与

set0ToGrowlToShow(#{p.notificationID});

(请注意，这是设置为HTTP请求参数，而不是操作方法参数)

JSF 组件库 PrimeFaces 具有 与 .另请参阅其展示页面.更重要的是，PrimeFaces 有一个随时可用的<p:growl> 组件，它的功能与您的 jQuery 插件基本相同！另请参阅其展示页面.你可以做的，而不是你整个 jQuery 的事情:

The JSF component library PrimeFaces has the <p:remoteCommand> for this which is much similar to <o:commandScript>. See also its showcase page. Even more, PrimeFaces has a ready-to-use <p:growl> component which does essentially the same as your jQuery plugin! See also its showcase page. Instead of your whole jQuery thing you can just do:

<p:growl globalOnly="true" autoUpdate="true" />

并通过

facesContext.addMessage(null, message);

另见:

• 如何使用原生 JavaScript 在 HTML DOM 事件上调用 JSF 托管 bean?
• 如何将 JavaScript 变量作为参数传递到 JSF 动作方法?

这篇关于在 jQuery 中使用参数调用 JSF 托管 bean 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！