javascript jsf 2.0（myfaces）中的ajax调用，ajax标签中的onevent Javascript函数在渲染完成之前被调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11350769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ajax call in jsf 2.0 (myfaces), the onevent Javascript function in the ajax tag gets called before the rendering is complete
提问by james
This is my first time asking a question on a forum, since usually my questions have already been asked and answered. I haven't found an answer to this problem that works for me, so here goes:
这是我第一次在论坛上提问，因为通常我的问题已经被问过并得到了回答。我还没有找到对我有用的这个问题的答案，所以这里是：
I'm making an Ajax call in JSF 2.0 like this:
我正在像这样在 JSF 2.0 中进行 Ajax 调用：
< f :ajax listener="#{myReferenceController.clearRequiredReferenceNumber}"
onevent="resetFocus" execute="@form"
render=":resultsForm:ResultsDisplay" />
Everything in the listener works perfectly, and the data is then rendered as expected in the data table that I have in my .xhtml page. The problem is that the Javascript that I call in the oneventseems to be getting called before the rendering is complete, and therefore the process of resetting the focus to a column in my datatabledoesn't work, since the datatableis removed and then re-added to the DOM when the Ajax is finished re-rendering.
侦听器中的所有内容都可以完美运行，然后数据在我的 .xhtml 页面中的数据表中按预期呈现。问题是我调用的 Javascriptonevent似乎在渲染完成之前就被调用了，因此将焦点重置到我的列中的过程datatable不起作用，因为它datatable被删除然后重新添加到Ajax 完成重新渲染时的 DOM。
I'm looking in my Javascript for the status of "success", in hopes that at this point, the rendering would have completed. Alas, this is not the case, and my getElementById(actually dojo.byId) is not finding the element in the datatable. I know my Javascript function works under normal circumstances, since I'm calling this same function in a situation where there is not an Ajax call, and everything works perfectly there.
我正在我的 Javascript 中寻找“成功”的状态，希望此时渲染已经完成。唉，事实并非如此，我的getElementById（实际上dojo.byId）没有在数据表中找到该元素。我知道我的 Javascript 函数在正常情况下可以工作，因为我在没有 Ajax 调用的情况下调用了相同的函数，并且一切正常。
If I could just avoid rendering the cell in the table that I'm trying to set focus to, that would be great, but my listener is making changes to this cell in the ajax call. I'm at my wits end, so any ideas on this would be very appreciated.
如果我可以避免渲染我试图设置焦点的表格中的单元格，那就太好了，但是我的听众正在 ajax 调用中对这个单元格进行更改。我不知所措，所以对此的任何想法将不胜感激。
-- in response to Balusc (heard good things about you, btw)
- 回应 Balusc（顺便说一句，听说了你的好消息）
Hmm, I was actually on the right track I think, but still seem to be having troubles. I am checking for "success" and still even in success, am not able to set the focus here. Here's my Javascript function that is checking for "success": This function works in another situation, where it's not attached to an Ajax event.
嗯，我认为我实际上是在正确的轨道上，但似乎仍然遇到了麻烦。我正在检查“成功”，即使仍然成功，我也无法在这里设置焦点。这是我的 Javascript 函数，它正在检查“成功”：此函数在另一种情况下工作，它没有附加到 Ajax 事件。
function resetFocus(data) {
var theRow = dojo.byId("resultsForm:selectedRow").value;
if (data.status == "success") {
dojo.query('[widgetId]',dojo.byId('theResultsDataTable'))
.forEach(function(node) {
var widget = dijit.byNode(node);
var theId = widget.attr("id")
if (theId.indexOf(':' + theRow + ':') != -1) {
if (theId.indexOf('theOrppoNum') != -1) {
widget.focus();
widget.attr("isFocused",true);
}
}
});
}
}
回答by BalusC
The function attached to the oneventattribute will actually be invoked threetimes. One time before the ajax request is been sent, one time after the ajax response is been arrived and one time when the HTML DOM is successfully updated. You should be checking the statusproperty of the given data argument for that.
附加到onevent属性上的函数实际上会被调用3次。一次是在ajax请求发送之前，一次是在ajax响应到达之后，一次是在HTML DOM更新成功时。您应该status为此检查给定数据参数的属性。
function onEventFunction(data) {
var status = data.status; // Can be "begin", "complete" or "success".
switch (status) {
case "begin": // Before the ajax request is sent.
// ...
break;
case "complete": // After the ajax response is arrived.
// ...
break;
case "success": // After update of HTML DOM based on ajax response..
// ...
break;
}
}
In your particular case, you thus just need to add a check if the status is success.
在您的特定情况下，您只需要检查状态是否为success.
function resetFocus(data) {
if (data.status == "success") {
// Do your job here.
}
}
