Working on a project with JSF 2.0, here is the form being used:
<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>
There is also a javascript function included:
<script type="text/javascript">
function showAlert(data){
if (data.status == "complete")
alert(document.getElementById("stateSelected"));
}
</script>
The purpose of the code above is to update the 'cities' dropdown and 'stateSelected' outputText when a state is selected from the first dropdown.
It should also trigger the showAlert() function in JavaScript.
However, the current issue is that the JavaScript function gets executed before all elements are rendered, resulting in an alert displaying null.
How can we ensure the JavaScript function runs after all elements have been rendered?