JSF和JQuery AJAX - 我如何让它们一起工作？

Question

我刚刚开始在JSF中，看起来很棒，但我似乎无法弄清楚这最后的障碍。

我习惯了传统的Jquery AJAX功能，这在我的书中是完美的。但我希望能找到一种方法让它与JSF和谐一致。

这是一个场景来解释我的情况。

我在我的网站上有一个消息传递页面，用户可以在其中发送消息。所以在我的xhtml页面中，我看起来像这样：

<h:form> 
<h:inputTextarea id="newMessageContent" value="#{conversationBean.newMessage}"/> 
<h:commandButton value="#{siteLang.messages_send}" action="#{conversationBean.sendMessage}"> 
    <f:ajax render=":conversationMessages" execute="newMessageContent"/> 
</h:commandButton> 
</h:form> 

工程很好。用户可以发布他们的消息，并将其加载到上面的对话div中。但现在我需要添加一些功能。 - 用户单击时，应该禁用按钮和textarea以避免交互，直到操作完成。并且应该出现一个加载器 - 当JSF完成它的东西时，textarea和按钮应该被启用并且加载器应该消失...并且焦点返回到textarea。

jQuery中，我只想做这样的事情：

$.ajax{ 
    beforeSend: function(){ 
     // Disable textarea and button, show loader 
    }, 
    complete: function() { 
     // Do the inverse of above 
    } 
} 

感谢您的帮助！

Answer 1

添加需要您<f:ajax

和你jsFunctionName的onevent="jsFunctionName"（无支架）应该像

function openDeleteDevicesDialog(data) { 
    console.log(data.status); //while ,data.status can be 1)"begin" 2)"complete" 3)"success" 
    if (data.status === 'begin') {...} 
    if (data.status === 'complete') {...} 
    if (data.status === 'success') {...} 
} 

所以你应该进入该功能的3倍

的h:commandButton的onclick被在f:ajax甚至开始之前执行...）

注意，通常你会在何时data.status === 'success'执行代码，其当你的页面完成渲染，你的DOM是其最终形状/状态

also take a look at BalusC answer over here...

Answer 2

这是你在找什么？ How can I execute Javascript before a JSF <h:commandLink> action is performed?（您必须更改链接到按钮）

如果您看到此按钮在您的网站上随处可见，您还可以创建自定义标签。