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!

Have you tried rendering your inputHiddenField from your ajax call? — Josef E., Jun 19 '14 at 13:35
@JosefE.: please stop suggesting [java] tag on problems which are not specific to Java SE (i.e. problems which are not reproducible in flavor of a Java class with a `main()` method). — BalusC, Jun 19 '14 at 14:36
Check the edit history (click the "edited" link) if you wonder why something was edited. There's usually an edit comment. — BalusC, Jun 19 '14 at 14:37
I didn't know that :P Now I do! I'll keep that in mind @BalusC — Josef E., Jun 19 '14 at 14:38
@BalusC , I think the guilty is me. I'll take your advice into consideration for next questions. Sorry for the confusion. — séan35, Jun 21 '14 at 09:07

score 0 · Accepted Answer · answered Jun 19 '14 at 13:54

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}"/>

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

1 Answers1