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开始之前执行f:ajax的onclick ...）

请注意，通常您会在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?（您必须更改指向该按钮的链接）

如果您在网站上看到此按钮被使用，您还可以创建自定义标记。

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

2 个答案: