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中。但是现在我需要添加一些功能。-用户单击时，应禁用按钮和文本区域，以避免交互，直到操作完成为止。然后将出现一个加载程序-
当JSF完成它的工作时，应该启用textarea和按钮，并且加载程序应该消失…并且焦点重新回到textarea。

在Jquery中，我只会做这样的事情：

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

谢谢您的帮助！

Answer 1

将所需的onevent="jsFunctionName" （无括号）添加到您的<f:ajax

你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次此功能

的onclick h:commandButton在f:ajax偶数开始之前执行…）

请注意，通常您将在whendata.status === 'success'，页面完成渲染且DOM处于最终形状/状态时执行代码