[英]How to execute javascript function after bean method is finished in JSF
I want to call javascript function after related action is fired and related bean method is finished. 我想在相关动作被触发并且相关bean方法完成之后调用javascript函数。 I see something related in the question - Proccess onclick function after ajax call <f:ajax> , so I use onevent handler of f:ajax.
我在问题中看到了一些相关内容- 在ajax调用<f:ajax>之后 ,过程onclick函数 ,因此我使用了f:ajax的onevent处理函数。
After the commandButton whose id is plnHiddenBtn is fired, "prepareTempPlan" method of bean is called. 触发id为plnHiddenBtn的commandButton后,将调用bean的“ prepareTempPlan”方法。 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 ".
在“ prepareTempPlan”的过程中,我可以看到,当“ data.status ”为“ complete ”时,数据成功地从DB中获取并成功包含在变量“ specDates”中。
However, the object on "specDates" can't be passed from bean to client-side with the first-click of the commandButton . 但是, “ specDates”上的对象无法通过commandButton的第一次单击从bean传递到客户端 。 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.
当我第二次单击按钮时,终于可以从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.
我可以通过.js文件的“ updateCalendar”方法中的警报消息-alert(dates)来检查是否通过了Bean中的对象。
How I can get the object after action of commandButton is fired and related bean method is finished? 触发commandButton的动作并完成相关的bean方法后,如何获取对象?
All feedbacks appreciated! 感谢所有反馈!
.xhtml file; .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 file; .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 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! 我正在等待您的建议,我在这个问题上感到困惑!
Yon need to also render
your specDates
field, so your client-side variable gets updated from call. Yon还需要
render
您的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}"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.