JSF和jQuery AJAX - 我怎样才能让他们一起工作？ [英] JSF and Jquery AJAX - How can I make them work together?

问题描述

我刚开始在JSF，看起来真棒，但我似乎无法弄清楚这最后一道屏障。

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

我已经习惯了传统的jQuery的AJAX功能，这是完美的在我的书。但我希望能找到一种方式来获得它在协调工作与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.

下面是一个场景来解释我的情况。

Here is a scenario to explain my situation.

我有我的网站上，用户可以相互发送消息的消息页面。所以在我的XHTML网页我有东西看起来是这样的：

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:

<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>

伟大工程。用户可以发布自己的消息，并加载它在谈话中格以上。但现在我需要添加一些功能。       - 当用户点击，按钮和文本区域应该禁用，以避免相互影响，直到操作完成。而装载机应该出现       - 当JSF完成它的东西时，textarea和按钮应该得到启用，装载机应消失......而焦点又回到了textarea的

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.

在jQuery的，我只想做这样的事情：

In Jquery I would simply do something like this:

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

感谢您的帮助！

Thanks for the help!

推荐答案

添加所需的的OnEvent =jsFunctionName（无支架）的 ＆LT; F：AJAX

add the onevent="jsFunctionName" (no brackets) needed to your <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次

so you should enter this function 3 times

的 h时的onclick：的commandButton 之前的执行F：AJAX 甚至开始了......）

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

注意，通常将执行你的code的时候 data.status ===成功，它当你的页面进行渲染和你的DOM是在其最终形状/状态

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

也看看BalusC答案在这里... ...

这篇关于JSF和jQuery AJAX - 我怎样才能让他们一起工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！