一尘不染

JSF和Jquery AJAX-如何使它们一起工作?

ajax

我刚刚开始使用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
    }
}

谢谢您的帮助!


阅读 177

收藏
2020-07-26

共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:commandButtonf:ajax偶数开始之前执行…)

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

2020-07-26