[英]JSF/PrimeFaces: Issue in pages with a layout
I have a problem with my JSF page which uses PrimeFaces components. 我的JSF页面有问题,它使用PrimeFaces组件。 As it may get long and boring quickly, I try to be as brief as possible.
由于它可能会变得漫长而无聊,我尽量做到尽可能简短。 Consider this managed bean:
考虑这个托管bean:
@Named(value = "testBean")
@RequestScoped
public class TestBean implements Serializable {
private String test;
public String update() {
test = "Updated.";
return "test";
}
// Getters and Setters...
}
Here's the body of test.xhtml
, with irrelevant content and styles removed: 这是
test.xhtml
的主体, test.xhtml
了不相关的内容和样式:
<h:body>
<p:layout id="layout" fullPage="true">
<p:layoutUnit position="north">
<!-- Does not matter -->
</p:layoutUnit>
<p:layoutUnit id="input" position="west">
<p:panel header="">
<p:tabView>
<p:tab title="">
<!-- INPUTS and SUBMIT BUTTON -->
</p:tab>
</p:tabView>
</p:panel>
</p:layoutUnit>
<p:layoutUnit id="output" position="center">
<h:form>
<p:panel id="display" header="Information">
<h:outputText value="#{testBean.test}" />
</p:panel>
<p:separator />
<p:commandButton value="Update !" action="#{testBean.update()}" ajax="false" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south">
<!-- Does not matter -->
</p:layoutUnit>
</p:layout>
</h:body>
And everything works fine. 一切正常。 I've got two problems though:
我有两个问题:
I should move the commandButton
to another layoutUnit
(input) and I can't place the <h:form>
element in a reasonable position. 我应该将
commandButton
移动到另一个layoutUnit
(输入),我不能将<h:form>
元素放在合理的位置。 I tried moving it beside <p:layout>
so it encloses all layout units but it broke (the updated page no longer has the "Updated." string). 我尝试将它移到
<p:layout>
旁边,所以它包含了所有布局单元,但它已经坏了(更新的页面不再有“Updated。”字符串)。
I want to perform the update via ajax with the button on another layoutUnit. 我想通过ajax使用另一个layoutUnit上的按钮执行更新。 When I remove the
ajax="false"
attribute from the commandButton
and set an attribute of prependId="false"
for the global form element, the output text does not get updated. 当我从
commandButton
删除ajax="false"
属性并为全局表单元素设置prependId="false"
属性时,输出文本不会更新。
Thanks in advance for your help 在此先感谢您的帮助
I should move the commandButton to another layoutUnit (input) and I can't place the
<h:form>
element in a reasonable position.我应该将commandButton移动到另一个layoutUnit(输入),我不能将
<h:form>
元素放在合理的位置。 I tried moving it beside<p:layout>
so it encloses all layout units but it broke (the updated page no longer has the "Updated." string).我尝试将它移到
<p:layout>
旁边,所以它包含了所有布局单元,但它已经坏了(更新的页面不再有“Updated。”字符串)。
I'm not sure if I understand your concrete problem. 我不确定我是否理解你的具体问题。 Just do something like this?
做这样的事情?
<p:layoutUnit id="input" position="west">
<p:panel header="">
<p:tabView>
<p:tab title="">
<!-- INPUTS and SUBMIT BUTTON -->
</p:tab>
</p:tabView>
<h:form>
<p:commandButton value="Update !" action="#{testBean.update}" ajax="false" />
</h:form>
</p:panel>
</p:layoutUnit>
<p:layoutUnit id="output" position="center">
<p:panel id="display" header="Information">
<h:outputText value="#{testBean.test}" />
</p:panel>
<p:separator />
</p:layoutUnit>
I want to perform the update via ajax with the button on another layoutUnit.
我想通过ajax使用另一个layoutUnit上的按钮执行更新。 When I remove the ajax="false" attribute from the commandButton and set an attribute of prependId="false" for the global form element, the output text does not get updated.
当我从commandButton中删除ajax =“false”属性并为全局表单元素设置prependId =“false”属性时,输出文本不会更新。
The update
ID has to be the relative or absolute client ID. update
ID必须是相对或绝对客户端ID。 As to how to figure the right client ID, check this answer: How to find out client ID of component for ajax update/render? 至于如何计算正确的客户端ID,请检查以下答案: 如何查找ajax update / render组件的客户端ID? Cannot find component with expression "foo" referenced from "bar"
找不到带有“bar”引用的表达式“foo”的组件
The PrimeFaces layout component isn't a NamingContainer
, so its ID won't be prepended, and once you take the <h:form>
out the center layout, then the <p:panel id="display">
is reachable from the command button by :display
. PrimeFaces布局组件不是
NamingContainer
,因此它的ID不会被添加,并且一旦你从中心布局中取出<h:form>
,那么<p:panel id="display">
就可以从命令按钮:display
。 Thus, this should do: 因此,这应该做:
<p:layoutUnit id="input" position="west">
<p:panel header="">
<p:tabView>
<p:tab title="">
<!-- INPUTS and SUBMIT BUTTON -->
</p:tab>
</p:tabView>
<h:form>
<p:commandButton value="Update !" action="#{testBean.update}" update=":display" />
</h:form>
</p:panel>
</p:layoutUnit>
<p:layoutUnit id="output" position="center">
<p:panel id="display" header="Information">
<h:outputText value="#{testBean.test}" />
</p:panel>
<p:separator />
</p:layoutUnit>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.