当组件被阻止通过AJAX更新PrimeFaces UI模块不能正常工作 [英] PrimeFaces block UI does not work when the component to be blocked is updated via AJAX
问题描述
我已经在显示某些组件<号码:面板>
如下:
I have displayed some components in <p:panel>
as follows.
<p:growl id="growl" />
<p:panel id="panel" header="New User" style="margin-bottom:10px;">
<p:messages id="messages" />
<h:panelGrid columns="3">
<h:outputLabel for="firstName" value="FirstName: *" />
<p:inputText id="firstName" required="true" label="FirstName">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="firstName" />
<h:outputLabel for="surname" value="Surname: *" />
<p:inputText id="surname" required="true" label="Surname"/>
<p:message for="surname" />
</h:panelGrid>
<p:commandButton id="saveBtn" value="Save" icon="ui-icon-check"
style="margin:0"
actionListener="#{testManagedBean.insert}"
update="growl panel"/>
</p:panel>
<p:blockUI block="panel" trigger="saveBtn" />
在给定的按钮是pressed,&LT;电话号码:咆哮&GT;
和&LT;电话号码:面板&gt;
需要更新它是通过更新=咆哮面板
属性&LT进行;号码:的commandButton&GT;
。 &LT;号码:面板&gt;
不阻止,在这种情况下
When the given button is pressed, <p:growl>
and <p:panel>
need to be updated which is done through the update="growl panel"
attribute of <p:commandButton>
. <p:panel>
doesn't block, in this case.
&LT;电话号码:面板&gt;
被阻塞,只有当更新=咆哮面板
更改为更新=咆哮
即当面板被更新跳过。
<p:panel>
is blocked only when update="growl panel"
is changed to update="growl"
i.e when the panel is skipped from being updated.
有没有一种方法,使&LT;电话号码:blockUI&GT;
工作? &LT;号码:面板&gt;
应更新pressing命令按钮
Is there a way to make <p:blockUI>
work? <p:panel>
should be updated on pressing the command button.
推荐答案
我已经交替选择了 PrimeFaces扩展 &LT; PE:blockUI&GT;
甚至阻止由AJAX的更新如下组件后,效果很好。
I have alternatively chosen the PrimeFaces Extensions' <pe:blockUI>
that works well even after the component to block is updated by AJAX as follows.
<!--xmlns:pe="http://primefaces.org/ui/extensions"-->
<h:outputStylesheet library="default" name="css/block-ui.css"/>
<pe:blockUI target="panel"
content="blockPanelContents"
widgetVar="blockUIWidget"/>
<h:panelGrid id="blockPanelContents" columns="2" class="block-contents">
<h:graphicImage library="default"
name="images/ajax-loader1.gif"
class="block-ui-image"/>
<h:outputText value="Sending data..." class="block-ui-text"/>
</h:panelGrid>
<p:commandButton id="saveBtn" update="growl panel"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();"
actionListener="#{testManagedBean.insert}"
icon="ui-icon-check" value="Save"/>
使用所示的CSS类&LT; H:outputStylesheet&GT;
:
.block-ui-image {
margin-right: 12px; vertical-align: middle;
}
.block-ui-text {
white-space: nowrap;
}
.block-contents {
border: none !important;
padding: 0 !important;
display:none;
}
这篇关于当组件被阻止通过AJAX更新PrimeFaces UI模块不能正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!