在jsf 2.0（myfaces）中的ajax调用，ajax标签中的onevent Javascript函数在渲染完成之前被调用 [英] ajax call in jsf 2.0 (myfaces), the onevent Javascript function in the ajax tag gets called before the rendering is complete

问题描述

这是我第一次在一个论坛上提出一个问题，因为通常我的问题已经被问及回答了。我没有找到适用于我的这个问题的答案，所以这里：

我在JSF 2.0中进行Ajax调用，如下所示：

 < f：ajax listener =＃{myReferenceController.clearRequiredReferenceNumber}
 onevent =resetFocusexecute =@ form
 render =：resultsForm：ResultsDisplay/> 
  

监听器中的所有内容都能完美工作，数据按照预期在数据表中呈现，在我的.xhtml页面。问题是，我在 onevent 中调用的Javascript似乎在渲染完成之前被调用，因此将焦点重置为我的 datatable 不起作用，因为 datatable 被删除，然后在Ajax完成后重新添加到DOM -rendering。

我正在查看我的Javascript的成功的状态，希望在这一点上，渲染将会完成。唉，情况并非如此，我的 getElementById （实际上 dojo.byId ）没有找到数据表。我知道我的Javascript函数在正常情况下工作，因为我在一个没有Ajax调用的情况下调用这个相同的函数，一切都在那里工作。

如果我可以避免将表单中的单元格渲染到我想要设置焦点的地方，那将是非常好的，但是我的监听器是在ajax调用中改变这个单元格。我在我的智慧结束，所以任何想法将是非常感谢。

- 回应Balusc（听到关于你的好东西，btw） p>

嗯，我实际上是在正确的轨道上，我认为，但似乎还有麻烦。我正在检查成功，甚至取得成功，我无法将重点放在这里。
这是我的Javascript功能，检查成功：此功能适用于另一种情况，它不附加到Ajax事件。

  function resetFocus（data）{
 var theRow = dojo.byId（resultsForm：selectedRow）。 
 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） ; 
} 
} 
}）; 
} 
} 
  

解决方案

附加到 onevent 属性的函数实际上将被调用三个次。在ajax请求发送前一次，在ajax响应到达之后，有一次HTML DOM成功更新。您应该检查给定数据参数的状态属性。

  function onEventFunction（data）{
 var status = data.status; //可以是开始，完成或成功。 
 
 switch（status）{
 casebegin：//在发送ajax请求之前。 
 // ... 
 break; 
 
 casecomplete：// ajax响应到达后。 
 // ... 
 break; 
 
 casesuccess：//根据ajax响应更新HTML DOM后
 // ... 
 break; 
} 
} 
  

在您的具体情况下，您只需要添加检查状态是否为成功。

  function resetFocus（data） {
 if（data.status ==success）{
 //在这里做你的工作。 
} 
} 
  

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:

< 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 onevent seems to be getting called before the rendering is complete, and therefore the process of resetting the focus to a column in my datatable doesn't work, since the datatable is removed and then re-added to the DOM when the Ajax is finished re-rendering.

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.

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.

-- in response to Balusc (heard good things about you, btw)

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.

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);
                    }
                }
            });
    }
}

解决方案

The function attached to the onevent attribute will actually be invoked three times. 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 status property of the given data argument for that.

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.

function resetFocus(data) {
    if (data.status == "success") {
        // Do your job here.
    }
}

这篇关于在jsf 2.0（myfaces）中的ajax调用，ajax标签中的onevent Javascript函数在渲染完成之前被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！