我刚刚开始使用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 } }
谢谢您的帮助!
将所需的onevent="jsFunctionName" (无括号)添加到您的<f:ajax
onevent="jsFunctionName"
<f:ajax
你jsFunctionName应该看起来像
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偶数开始之前执行…)
h:commandButton
f:ajax
请注意,通常您将在whendata.status === 'success',页面完成渲染且DOM处于最终形状/状态时执行代码
data.status === 'success'