ajax call in jsf 2.0 (myfaces), the onevent Javascript function in the ajax tag gets called before the rendering is complete

Question

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

This looks like an oncomplete javascript method for your ajax request. Sadly, this method is not in the JSF specification (more info about it here). Alternatively, you could use PrimeFaces or RichFaces, these frameworks handle this oncomplete method for ajax requests. — Luiggi Mendoza
If this oncomplete method simply handles the attribute status that the event listener gets passed, I don't think this will help me. Even the "success" status seems to be coming back before the ajax and jsf is finished rendering. I'll look into the prime faces and richfaces avenues though..... — james

BalusC BalusC · Accepted Answer · 2012-07-05T19:29:02

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

ajax call in jsf 2.0 (myfaces), the onevent Javascript function in the ajax tag gets called before the rendering is complete

1 Answers