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

添加所需的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次

在偶数开始h:commandButton之前执行onclick f:ajax...)

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

另外看看BalusC在这里的回答......