JSF:动态加载页面命令按钮不起作用
我有一个包含 PrimeFaces 手风琴面板的页面,每个面板中都有一个 PrimeFaces 数据表。例如,数据表下方是一个按钮“添加研究”,当单击此按钮时,我想使用
。单击按钮时,我想动态更改
中;
中的 src 值,以便将我的页面加载到
中。现在的问题如下:
我的托管 bean 设置为 @RequestScoped
,当我单击按钮时,没有任何内容被渲染。 如果我将托管 bean 设置为 @SessionScoped,则在第二次单击按钮后将填充
,第一次单击不会执行任何操作。
使用的技术:JSF2.0、PrimeFaces、Facelets
以下是一些代码片段:
主页
<h:panelGroup id="content" layout="block">
<ui:include src="#{studyBean.includePage}"/>
</h:panelGroup>
<div id="dashboard">
<h:form id="form" prependId="false">
<h:outputText value="Welkom #{loginBean.username}"/>
<p:accordionPanel autoHeight="true" effect="bounceslide">
<p:tab title="My studies">
<p:dataTable var="study" value="#{studyBean.studiesByUser}" id="studyTable"
emptyMessage="No studies found for given user" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowSelectListener="#{studyBean.onRowSelect}"
selectionMode="single">
<p:column headerText="StartDate" sortBy="#{study.startDate}"
filterBy="#{study.startDate}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="EndDate" sortBy="#{study.endDate}"
filterBy="#{study.endDate}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="School" sortBy="#{study.school}" filterBy="#{study.school}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.school}"/>
</p:column>
<p:column headerText="Specialization" sortBy="#{study.specialization}"
filterBy="#{study.specialization}}" filterMatchMode="contains"
style="width: 100px;">
<h:outputText value="#{study.specialization}"/>
</p:column>
<p:column headerText="Remarks" sortBy="#{study.remarks}"
filterBy="#{study.remarks}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.remarks}"/>
</p:column>
</p:dataTable>
<h:commandButton id="btnAddStudy" title="Add Study" value="Add Study">
<f:ajax render=":content" execute="form" listener="# {studyBean.navigate}"/>
<f:param name="action" value="add"/>
</h:commandButton>
</p:tab>
</p:accordionPanel>
</h:form>
正如您所看到的是我的表单之外的
。
这是包含的页面(作为示例)
<h:body>
<ui:composition template="../template/template.xhtml">
<ui:define name="body">
<f:view contentType="text/html">
<ui:composition>
<h:form id="studyForm" prependId="false">
<p:messages />
<h:message for="startDate"/>
<h:message for="endDate"/>
<h:message for="school"/>
<h:message for="diploma1"/>
<h:message for="diploma2"/>
<h:message for="diploma3"/>
<h:message for="specialization1"/>
<h:message for="specialization2"/>
<h:message for="specialization3"/>
<h:message for="remarks1"/>
<h:message for="remarks2"/>
<h:message for="remarks3"/>
<h:outputText class="label" value="Start date: "/>
<h:inputText id="startDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="End date: "/>
<h:inputText id="endDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="school: "/>
<h:inputText id="school" styleClass="inputtext validate[required, maxSize[5]]"
value="#{studyBean.school}"/>
<h:outputText class="label" value="Specialization: "/>
<h:inputText id="specialization1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[0]}"/>
<h:inputText id="specialization2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[1]}"/>
<h:inputText id="specialization3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[2]}"/>
<h:outputText class="label" value="Diploma: "/>
<h:inputText id="diploma1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[0]}"/>
<h:inputText id="diploma2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[1]}"/>
<h:inputText id="diploma3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[2]}"/>
<h:outputText class="label" value="remarks: "/>
<h:inputText id="remarks1" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[0]}"/>
<h:inputText id="remarks2" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[1]}"/>
<h:inputText id="remarks3" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[2]}"/>
<h:commandButton action="cancel" value="cancel" immediate="true"/>
<p:commandButton id="btnAddStudyDetail" value="add study" actionListener="#{studyBean.addStudy}"
update="studyTable" oncomplete="clearAddStudy()"/>
</h:form>
</ui:composition>
</f:view>
</ui:define>
</ui:composition>
</h:body>
Managed Bean @RequestScoped
@ManagedBean
@RequestScoped
public class StudyBean {
public String navigate() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
action = (((HttpServletRequest) facesContext.getExternalContext().getRequest()).getParameter("action"));
if (action.equals("add")) {
//vull de velden
includePage = "studyDetail.xhtml";
}
facesContext = FacesContext.getCurrentInstance();
UIViewRoot root = facesContext.getViewRoot();
UIComponent form = root.findComponent("form");
dataTable = form.findComponent("studyTable");
System.out.println(dataTable);
System.out.println(root);
} catch (Exception e) {
facesContext.addMessage("form", new FacesMessage("You must select a study."));
}
return null;
}
}
提前致谢。
更新 现在我可以在
中动态加载页面,但现在还有另一个问题,当页面加载时,我想单击已加载页面中的按钮它所绑定的对象不会执行。所以我没有进入我的支持 bean,我已经尝试将我的 bean 的范围放入 @ViewScoped
但没有成功。
请帮助我,因为我正变得绝望。
I have a page that contains a PrimeFaces accordion panel, in each panel is a PrimeFaces datatable. Below the datatable is a button "Add study" for example and when this button is click I want to dynamically load a page into a <h:panelGroup>
using a <ui:include>
. When the button is being click I want to dynamically change the src value from the <ui:include>
so that my page is loaded in the <h:panelGroup>
. Now the problem is the following:
My managed bean is set to @RequestScoped
and when I click on my button nothing is being rendered.
If I set my managed bean to @SessionScoped
the <h:panelGroup>
is filled after the second click on the button, the first click doesn't do anything.
Used technologies : JSF2.0, PrimeFaces, Facelets
Here are some code snippets :
Main Page
<h:panelGroup id="content" layout="block">
<ui:include src="#{studyBean.includePage}"/>
</h:panelGroup>
<div id="dashboard">
<h:form id="form" prependId="false">
<h:outputText value="Welkom #{loginBean.username}"/>
<p:accordionPanel autoHeight="true" effect="bounceslide">
<p:tab title="My studies">
<p:dataTable var="study" value="#{studyBean.studiesByUser}" id="studyTable"
emptyMessage="No studies found for given user" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" rowSelectListener="#{studyBean.onRowSelect}"
selectionMode="single">
<p:column headerText="StartDate" sortBy="#{study.startDate}"
filterBy="#{study.startDate}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="EndDate" sortBy="#{study.endDate}"
filterBy="#{study.endDate}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" type="date" timeZone="CET"/>
</h:outputText>
</p:column>
<p:column headerText="School" sortBy="#{study.school}" filterBy="#{study.school}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.school}"/>
</p:column>
<p:column headerText="Specialization" sortBy="#{study.specialization}"
filterBy="#{study.specialization}}" filterMatchMode="contains"
style="width: 100px;">
<h:outputText value="#{study.specialization}"/>
</p:column>
<p:column headerText="Remarks" sortBy="#{study.remarks}"
filterBy="#{study.remarks}}"
filterMatchMode="contains" style="width: 100px;">
<h:outputText value="#{study.remarks}"/>
</p:column>
</p:dataTable>
<h:commandButton id="btnAddStudy" title="Add Study" value="Add Study">
<f:ajax render=":content" execute="form" listener="# {studyBean.navigate}"/>
<f:param name="action" value="add"/>
</h:commandButton>
</p:tab>
</p:accordionPanel>
</h:form>
So as you can see is my <h:panelGroup>
outside my form.
This is the included page (as example)
<h:body>
<ui:composition template="../template/template.xhtml">
<ui:define name="body">
<f:view contentType="text/html">
<ui:composition>
<h:form id="studyForm" prependId="false">
<p:messages />
<h:message for="startDate"/>
<h:message for="endDate"/>
<h:message for="school"/>
<h:message for="diploma1"/>
<h:message for="diploma2"/>
<h:message for="diploma3"/>
<h:message for="specialization1"/>
<h:message for="specialization2"/>
<h:message for="specialization3"/>
<h:message for="remarks1"/>
<h:message for="remarks2"/>
<h:message for="remarks3"/>
<h:outputText class="label" value="Start date: "/>
<h:inputText id="startDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.startDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="End date: "/>
<h:inputText id="endDate" styleClass="inputtext validate[required,custom[date]]"
value="#{studyBean.endDate}">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="CET"/>
</h:inputText>
<h:outputText class="label" value="school: "/>
<h:inputText id="school" styleClass="inputtext validate[required, maxSize[5]]"
value="#{studyBean.school}"/>
<h:outputText class="label" value="Specialization: "/>
<h:inputText id="specialization1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[0]}"/>
<h:inputText id="specialization2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[1]}"/>
<h:inputText id="specialization3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.specialization[2]}"/>
<h:outputText class="label" value="Diploma: "/>
<h:inputText id="diploma1" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[0]}"/>
<h:inputText id="diploma2" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[1]}"/>
<h:inputText id="diploma3" styleClass="inputtext validate[maxSize[50]]"
value="#{studyBean.diploma[2]}"/>
<h:outputText class="label" value="remarks: "/>
<h:inputText id="remarks1" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[0]}"/>
<h:inputText id="remarks2" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[1]}"/>
<h:inputText id="remarks3" styleClass="inputtext validate[maxSize[200]]"
value="#{studyBean.remarks[2]}"/>
<h:commandButton action="cancel" value="cancel" immediate="true"/>
<p:commandButton id="btnAddStudyDetail" value="add study" actionListener="#{studyBean.addStudy}"
update="studyTable" oncomplete="clearAddStudy()"/>
</h:form>
</ui:composition>
</f:view>
</ui:define>
</ui:composition>
</h:body>
Managed Bean @RequestScoped
@ManagedBean
@RequestScoped
public class StudyBean {
public String navigate() {
FacesContext facesContext = FacesContext.getCurrentInstance();
try {
action = (((HttpServletRequest) facesContext.getExternalContext().getRequest()).getParameter("action"));
if (action.equals("add")) {
//vull de velden
includePage = "studyDetail.xhtml";
}
facesContext = FacesContext.getCurrentInstance();
UIViewRoot root = facesContext.getViewRoot();
UIComponent form = root.findComponent("form");
dataTable = form.findComponent("studyTable");
System.out.println(dataTable);
System.out.println(root);
} catch (Exception e) {
facesContext.addMessage("form", new FacesMessage("You must select a study."));
}
return null;
}
}
Thanks in advance.
UPDATE
Now I am able to dynamically load the page in my <ui:include>
but I have another problem now, when the page is loaded and I want to click on my button in the loaded page the action to which it is bound doesn't execute. So I don't get into my backing bean, I already tried to put the scope of my bean to @ViewScoped
but no success.
Please help me as I am getting desperate.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论