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

I'm just starting out in JSF, looks awesome, but I can't seem to figure out this last barrier.

我刚刚开始使用JSF,看起来很棒,但我似乎无法弄清楚这最后的障碍。

I'm used to traditional Jquery AJAX function, which is perfect in my book. But I was hoping to find a way to get it to work in harmony with JSF.

我习惯了传统的Jquery AJAX功能,这在我的书中很完美。但我希望找到一种方法让它与JSF协调工作。

Here is a scenario to explain my situation.

这是一个解释我的情况的场景。

I have a messaging page on my website, where users can send each other messages. So in my xhtml page I have something that looks like this:

我的网站上有一个消息页面,用户可以在其中发送消息。所以在我的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>

Works great. Users can post their message and it loads it in the conversation div above. But now I need to add some features. - When user clicks, the button and textarea should get disabled to avoid interaction until the action is completed. And a loader should appear - When the JSF finishes it's stuff, the textarea and button should get enabled and the loader should disappear...and the focus goes back to the textarea.

效果很好。用户可以发布他们的消息并将其加载到上面的对话div中。但现在我需要添加一些功能。 - 当用户单击时,应禁用按钮和textarea以避免交互,直到操作完成。并且应该出现一个加载器 - 当JSF完成它的东西时,textarea和按钮应该被启用并且加载器应该消失...并且焦点返回到textarea。

In Jquery I would simply do something like this:

在Jquery中我会做这样的事情:

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

Thanks for the help!

谢谢您的帮助!

2 个解决方案

#1

add the onevent="jsFunctionName" (no brackets) needed to your <f:ajax

添加所需的onevent>

and your jsFunctionName should look like

并且你的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') {...}
}

so you should enter this function 3 times

所以你应该输入这个功能3次

the onclick of the h:commandButton is executed before the f:ajax even begins...)

在f:ajax甚至开始之前执行h:commandButton的onclick ...)

Note that usually you will execute your code in the when data.status === 'success' , its when your page is done rendering and your DOM is in its final shape/state

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

also take a look at BalusC answer over here...

还看看BalusC在这里的回答......

#2

is this what you are looking for? How can I execute Javascript before a JSF <h:commandLink> action is performed? (you will have to change the link to the button)

这是你想要的?如何在执行JSF 操作之前执行Javascript? (您必须更改按钮的链接)

If you see this button being used everywhere on your web site, you can also create a custom tag.

如果您在网站上的任何位置都看到此按钮,则还可以创建自定义标记。

#1