Boolean value not updating when using f:ajax onevent

Question

When an option is selected it triggers a method call in the controller which changes the regionController.invalidRegion value (true to false and vice versa). The problem is after it changes the first time, the value is no longer update on the client side but changes correctly server side.

I have the following js;

var renderRegionMsg = function(val){
    if(val === "true"){
        alert("true");
        document.getElementById("NavForm:regionform:notInRegion").style.visibility  = "";
    }
    else{
        alert("false");
        document.getElementById("NavForm:regionform:notInRegion").style.visibility  = "hidden";
    }
};

---

and the following jsf code:

<h:selectOneMenu id="regionSelect" >
    <f:selectItems ...... />
    <f:ajax 
      id="regionListener" 
      listener="#{geoListProducer.changeRegion}" 
      render="stripe-provState" 
      onevent="renderRegionMsg('#{regionController.invalidRegion}')" />     
</h:selectOneMenu>

---

<h:panelGroup id="notInRegion">
    <h:outputText class="red_bold"  value="#{userController.invalidRegionMsg}" />
</h:panelGroup>

Answer 1

You're not using <f:ajax onevent> the right way. The onevent attribute should refer a function reference, not contain an inline script like as you usually use on onclick and friends. The <f:ajax> will invoke the function reference three times, with an implicit data argument. One time before the ajax request is sent, one time after the ajax response is arrived, and one time after the HTML DOM is updated based on ajax response.

Here's a kickoff example of the correct usage:

function functionName(data) {
    var status = data.status; // Can be "begin", "complete" or "success".
    var source = data.source; // The parent HTML DOM element.

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

Which is to be declared as follows:

<f:ajax ... onevent="functionName" />

In your particular case , you likely need the following approach:

function renderRegionMsg(data) {
    if (data.status == "success") {
        var val = data.source.value;

        if (val === "true") {
            alert("true");
            document.getElementById("NavForm:regionform:notInRegion").style.visibility  = "";
        }
        else {
            alert("false");
            document.getElementById("NavForm:regionform:notInRegion").style.visibility  = "hidden";
        }
    }
}

with

<f:ajax ... onevent="renderRegionMsg" />