使用 JQuery 提交捕获 JSF 操作答案

【问题标题】：catch JSF Action with JQuery Submit使用 JQuery 提交捕获 JSF 操作
【发布时间】：2013-06-11 11:27:41
【问题描述】：

我需要用 JQuery 提交函数捕获 JSF 动作事件，我有下一个代码：

JSF 代码

 <h:form id="seleccionPlanForm">
    <h:commandLink id="p1" title="seleccion 1" action="#{contrataBackingBean.selectPlanAction}">
      <f:param name="idPlan" value="1"/>
    </h:commandLink>
 </h:form>

JQuery 代码

$("form").submit(function() { 
   alert("Hello World");
});

提前感谢您的帮助

【问题讨论】：

你所说的“catch”到底是什么意思？您希望在执行操作之前执行一些 Javascript 代码吗？或者您想实际控制是否发出请求？
我需要创建一个通用函数来捕获所有使用 JQuery JSF 提交我的应用程序的表单

标签： jquery jquery-ui jsf jsf-2

【解决方案1】：

1) 强制点击你的按钮 jsf，你可以用 style="display:none" 隐藏你的按钮

JQuery 示例

  $('#input').change(
    function(){
       $('#clientIDOFActionButton').click();
    }
 );

重要提示：您必须检索 UIComponent 的 clientID，而不是 Server UIComponentID。

2) 使用richfaces，使用jsFunction 组件并使用js/JQuery 调用以开始执行jsFunction 组件

JSF 代码

                  <a4j:actionparam name="param_name" assignTo="#{bean.someProperty2}"/>

       </a4j:jsFunction>

Java 脚本绑定

 <body onload="callScript()">

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_jsFunction.html

在这里你可以看到，action 和 actionListener 属性如何与 jsFunction 组件一起使用：

http://livedemo.exadel.com/richfaces-demo/richfaces/jsFunction.jsf?tab=info&cid=292171

你可以分享更多代码吗？

【讨论】：

您可以使用纯 JavaScript 甚至使用 jQuery 来完成此操作。此外，由于 OP 使用 JSF 2（如相关标签中所述），您可以推荐使用 RichFaces 4 或 PrimeFaces 3 来完成任务，但要认识到这些库只会在幕后为您处理 JavaScript/jQuery 繁琐的代码。