在JSF中如何在bean方法完成后执行javascript函数

Question

我希望在相关操作触发并且相关bean方法完成后调用javascript函数。我在这个问题中看到了相关内容 - Proccess onclick function after ajax call <f:ajax>，所以我使用了f:ajax的onevent处理程序。

当id为plnHiddenBtn的commandButton被触发时，将调用bean的"prepareTempPlan"方法。在"prepareTempPlan"过程中，我可以看到数据从数据库中获取，并成功地被变量"specDates"包含，当"data.status"为"complete"时。

然而，在第一次单击commandButton后，无法将"specDates"对象从bean传递到客户端。在第一次单击commandButton后，我刷新了页面。当我第二次单击按钮时，最终我可以从bean中获取对象。我可以通过在.js文件的"updateCalendar"方法中的alert消息 - alert(dates)来检查是否传递了来自bean的对象。

我如何在commandButton的操作被触发并且相关bean方法完成后获取对象？

欢迎所有反馈！

.xhtml文件；

<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文件;

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文件；

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

编辑：

• 我删减了一些代码以便于阅读。

• 我正在等待您的建议，我在这个问题上卡住了！

- séan35

---

你尝试过在ajax调用中渲染你的inputHiddenField吗？ - undefined

没问题，我会为您创建一个参考答案。 - undefined

抱歉，好的，对不起！@BalusC - undefined

我不知道那个 :P 现在我知道了！我会记住的 @BalusC - undefined

@BalusC，我觉得错的是我。我会考虑你的建议来解决下一个问题。对于造成的困惑，我表示抱歉。 - undefined

Answer 1

你还需要将你的specDates字段进行渲染，这样你的客户端变量才能从调用中得到更新。

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

- Josef E.