将 JS 动作与 JSF 同步答案

【问题标题】：Synchronizing JS actions with JSF将 JS 动作与 JSF 同步
【发布时间】：2012-07-05 03:14:22
【问题描述】：

在我的 JSF 页面中，我有一个带有 inputText、outputText 和提交按钮的隐藏表单。我正在使用一个脚本，它在某些事件上填充 inputText 并单击按钮。该按钮调用支持 bean 中的一个方法，我需要在其中执行一些操作，然后设置 outputText 的值。为此，我找到 UIOutput 组件并设置它的值。在我的 javascript 中，我需要在单击按钮后执行一些其他操作，但问题是完成该操作并用返回值填充 outputText 可能需要一些时间。因此 javascript 中的下一个操作不会读取正确的值。我想在 outputText 上添加一个更改事件，以便仅在值更新后执行我的操作，但我遇到了与 JS Events: hooking on value change event on text inputs 相同的问题。

【问题讨论】：

调用backing bean中方法的按钮是在做AJAX请求吗？
是的。它调用支持 bean 中的方法。该方法更新 outputText 的值，并使用 AJAX 请求再次渲染 outputText 以获取新值。
也许您想为 AJAX 按钮使用 oncomplete 事件，然后呢？
你确定我能做到吗？我正在使用 h:commandButton 作为我的按钮，但我认为它没有 onComplete 属性。 AJAX 请求是按钮的 f:ajax 子级。
等一下，我正在发布完整的答案

标签： javascript jsf jsf-2 onchange

【解决方案1】：

因此，如果您使用的是a4j:commandButton，您可以将oncomplete 属性用于一些在完成AJAX 请求后将执行的JS 代码。

由于您使用的是h:commandButton 和f:ajax，这样做的方法是使用f:ajax 属性onevent，并检查它是否成功：

<script>
    function doWhatever(e){
        if(e.status == 'success'){
            doYourThingHere();
        }
    }
</script>
<h:commandButton action="#{someMB.someAction}">
    <f:ajax ... onevent="doWhatever" />
</h:commandButton>

如果你使用 Richfaces，你可能想看看a4j:ajax 组件，见this question。

更新： 删除了错误的 else 假设请求没有成功。请参阅the answer to this question 以查看 status 属性的其他含义。

【讨论】：

else 中的警报消息并不完全正确。另见stackoverflow.com/questions/8570592/…
@BalusC 你说得对，我要解决这个问题！感谢您指出！
@user579674 不客气，很高兴为您提供帮助！请注意更新，我已经删除了警报的 else 条件，因为我错误地假设请求没有成功。
警报在 else 中并不完全正确，因为它是随机调用的（我认为是这样），但事实上我仍在使用 else 来呈现进度条，通知用户那里是一项持续的行动，需要一些时间，而且它似乎按预期工作。
@user579674 请查看上面链接的答案 BalusC（我也在更新中链接了它）。状态也可以是“开始”（表示在发送请求之前）和“完成”（表示在收到响应之后，但在更新 DOM 之前——重新渲染）