How to execute javascript function after bean method is finished in JSF

Question

I want to call javascript function after related action is fired and related bean method is finished. I see something related in the question - Proccess onclick function after ajax call <f:ajax> , so I use onevent handler of f:ajax.

After the commandButton whose id is plnHiddenBtn is fired, "prepareTempPlan" method of bean is called. During the process of "prepareTempPlan", I can see that data is taken from DB and is contained by the variable - "specDates" successfully, when " data.status " is " complete ".

However, the object on "specDates" can't be passed from bean to client-side with the first-click of the commandButton . After first click of the commandButton, I refresh the page. When I click the button for the second time, finally I can get the object from the bean. I can check if the object from the bean is passed or not with alert message - alert(dates) in "updateCalendar" method of .js file.

How I can get the object after action of commandButton is fired and related bean method is finished?

All feedbacks appreciated!

.xhtml file;

<input jsfc="h:commandButton" id="plnHiddenBtn" class="hiddenBtn"  action="#planCalendarFacade.prepareTempPlan}">
    <f:ajax execute="mainForm" onevent="updateAddedDayPlns" render="plnName" />
</input>
<h:inputHidden id="specDates" value="#{planCalendarFacade.specDates}"/>

.js file;

function updateAddedDayPlns(data){

    var status = data.status; // Can be "begin", "complete" or "success".

    switch (status) {
        case "begin": // Before the ajax request is sent.
            alert("begin");
            break;

        case "complete": // After the ajax response is arrived.
            alert("complete");
            break;

        case "success": // After update of HTML DOM based on ajax response..
            alert("success");
            $('.addedDayPlnLst li:first').addClass('ui-selected');
            updateCalendar();  //<-THIS IS IMPORTANT->
            dayPlnInd = 0;
            break;
        }
}
function updateCalendar(){

    var dates = document.getElementById('mainForm:specDates').value;
    dates = JSON.parse(dates);
    alert(dates);
}

bean file;

public class PlanCalendarFacade {
...
private Object specDates = new String("hello");
...

public void prepareTempPlan() {

    Plan plan = null;

    // Find the plan based on specific plan-id (slctdPlnId).
    for (int i = 0; i < plans.size(); i++)
        if ( plans.get(i).getPLAN_ID() == slctdPlnId )
            plan = plans.get(i);

    if (plan == null){
        // For "add user group" operation,
        tempPlan = new Plan();
        newRecFlag = false;
    }else{
        // For "update and delete user group" operations.
        tempPlan = plan;
        newRecFlag = true;
        getSpecificDayPlansFromDB(plan.getPLAN_ID());
        getAllDatesFromDB();
    }
}

EDIT :

• I pruned some codes to read easily.

• I am waiting for your advice, I get stuch on this problem!

Answer 1

Yon need to also render your specDates field, so your client-side variable gets updated from call.

<input jsfc="h:commandButton" id="plnHiddenBtn" class="hiddenBtn"  action="#planCalendarFacade.prepareTempPlan}">
    <f:ajax execute="mainForm" onevent="updateAddedDayPlns" render="specDates" /> //Also could render multiple fields, if needed...
</input>
<h:inputHidden id="specDates" value="#{planCalendarFacade.specDates}"/>