javascript jsf ajax调用：最后执行javascript函数

jsf ajax call: executing javascript function in the end

提问by neeraj narang

I'm working with JSF 2.0 and here's my form:

我正在使用 JSF 2.0，这是我的表单：

<h:form id="fff" onsubmit="reloadMap();">
    <h:selectOneMenu value="#{rentCarPoolBean.state}">
        <f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" />
        <f:ajax event="change" render="cities stateSelected" onevent="showAlert"/>
    </h:selectOneMenu>
    <h:selectOneMenu  id="cities" value="#{rentCarPoolBean.city}">
        <f:selectItems value="#{rentCarPoolBean.cityList}"/>
        </h:selectOneMenu>
    <h:outputText value="#{rentCarPoolBean.state}" id="stateSelected" />
</h:form>

And the javascript function:

和 javascript 函数：

<script type="text/javascript">
    function showAlert(data){
         if (data.status == "complete")
             alert(document.getElementById("stateSelected"));   
    }
</script>

What the above code does is on selecting a state from the first dropdown, it makes the ajax call and renders the 'cities' dropdown and the 'stateSelected' outputText.

Also, it calls the showAlert() javascript function.

What I want to do is call the javascript function after all the data is returned and both the dropdown and the outputText have been rendered.

But currently the javascript function is called before the elements are rendered and the alert displays null. How do we make the javascript function execute in the end?

上面的代码所做的是从第一个下拉列表中选择一个状态，它进行 ajax 调用并呈现“城市”下拉列表和“stateSelected”输出文本。

此外，它调用 showAlert() javascript 函数。

我想要做的是在返回所有数据并且下拉列表和 outputText 都已呈现后调用 javascript 函数。

但目前 javascript 函数在呈现元素和显示警报之前调用null。我们如何让javascript函数最终执行？

回答by BalusC

You need to hook on a status of successinstead. This will run after the HTML DOM tree has been updated. The status of completeruns directly after the ajax response has been returned. This is admittedly a misleading status name, but you should try to interpret it in context of "HTTP request" like as the beginstatus.

您需要挂钩success而不是状态。这将在 HTML DOM 树更新后运行。completeajax 响应返回后直接运行的状态。这无疑是一个误导性的状态名称，但您应该尝试在“HTTP 请求”的上下文中将其解释为begin状态。

Another problem is that the document.getElementById()selects items by the HTML element ID, not by JSF component ID. You need to give it exactly the ID as JSF has generated to the HTML. You can figure the right HTML element ID by viewing the page source in webbrowser.

另一个问题是document.getElementById()通过 HTML 元素 ID 而不是 JSF 组件 ID 来选择项目。您需要将 JSF 为 HTML 生成的 ID 准确地提供给它。您可以通过在 webbrowser 中查看页面源来计算正确的 HTML 元素 ID。

All with all, your new function should look like this:

总之，你的新函数应该是这样的：

function showAlert(data){
     if (data.status == "success")
         alert(document.getElementById("fff:stateSelected"));  
}

回答by Vsevolod Golovanov

Here:

这里：

alert(document.getElementById("stateSelected"));

you're specifying only JSF component id, but you need to give a full clientId. Here's a linkexplaining this.

您只指定了 JSF 组件 ID，但您需要提供完整的 clientId。这是一个解释这一点的链接。