#ajax #primefaces
#ajax #primefaces
Вопрос:
У меня небольшая проблема с ajax
rendered
атрибутом and при update
запуске на a selectOneMenu
.
Ниже приведен код для selectOneMenu
:
<div class="row">
<div class="span10 margin-bottom-10">
<div class="control-group">
<label class="hcg-control-label span5">Τύπος Παραγώμενου Εγγράφου</label>
<div class="controls span7">
<p:selectOneMenu id="ProducedDocumentType" value="#{certificateTypeRegisterView.cAType.producedDocument}" style="width:100%">
<p:ajax event="change" update=":cATypeForm:UploadFileWidget" immediate="true" process="@this"/>
<f:selectItems value="#{enumsBean.producedDocumentTypes}" var="myVar" itemValue="#{myVar}" itemLabel="#{myVar.label}" />
</p:selectOneMenu>
</div>
</div>
</div>
</div>
И у меня есть inputText
поле, за которым следует fileUpload
:
<h:panelGroup id="UploadFileWidget" rendered="#{certificateTypeRegisterView.cAType.producedDocument ne 'withoutDocument'}" >
<div class="row">
<div class="span10 margin-bottom-10">
<div class="control-group">
<label class="hcg-control-label span5">Πρότυπο Εγγράφου</label>
<div class="controls span7">
<div class="hcg-input-group">
<p:inputText id="TemplateFile" styleClass="hcg-full-width" required="true" value="#{certificateTypeRegisterView.cAType.template.fileName}" readonly="true" requiredMessage="Δεν έχετε επιλέξει πρότυπο εγγράφου!"/>
<span class="hcg-input-group-btn">
<p:commandButton id="TemplateFileDownload" styleClass="btn btn-default" icon="fa fa-download" actionListener="#{certificateTypeRegisterView.downloadTemplateFile}" disabled="#{certificateTypeRegisterView.cAType.template.fileName == null}" />
<p:commandButton styleClass="btn btn-default" id="TemplateFileDelete" icon="fa fa-times" actionListener="#{certificateTypeRegisterView.deleteTemplateFile}" disabled="#{certificateTypeRegisterView.cAType.template.fileName == null}" />
</span>
</div>
<p:fileUpload id="uploadFile" value="#{certificateTypeRegisterView.uploadedTemplateFile}" fileUploadListener="#{certificateTypeRegisterView.handleTemplateFileUpload}"
label="Επιλέξτε" uploadLabel="Ανέβασμα" cancelLabel="Ακύρωση" update=":cATypeForm:TemplateFile,:cATypeForm:TemplateFileDownload,:cATypeForm:TemplateFileDelete" styleClass="hcg-upload" />
</div>
</div>
</div>
</div>
</h:panelGroup>
Требование состоит в том, чтобы все panelGroup
отображалось только тогда, когда пользователь выбирает одно из первых двух значений выпадающего списка. Мне удается заставить его работать только тогда, когда update
атрибут выглядит следующим образом: update="@form"
, но я не хочу его использовать, потому что, когда это происходит, детали в других полях той же формы обновляются, и пользователю приходится переписывать с самого начала. Я хочу обновить только panelGroup, поэтому я попробовал использовать его с его идентификатором (как показано в коде выше), но ничего не происходит.
Я был бы очень признателен, если бы вы могли сказать мне, что я делаю неправильно. Заранее благодарю вас.
Ответ №1:
Решил проблему, выполнив следующее. Я изменил обновление на:
<p:ajax event="change" update=":cATypeForm:UploadFileWidget"/>
Затем я обернул все <div class="row">
<h:panelGroup>
с помощью a <ui:fragment>
, и окончательный код выглядит следующим образом:
<h:panelGroup id="UploadFileWidget">
<ui:fragment rendered="#{certificateTypeRegisterView.cAType.producedDocument ne 'withoutDocument'}">
<div class="row">
<div class="span10 margin-bottom-10">
<div class="control-group">
<label class="hcg-control-label span5">Πρότυπο Εγγράφου</label>
<div class="controls span7">
<div class="hcg-input-group">
<p:inputText id="TemplateFile" styleClass="hcg-full-width" required="true" value="#{certificateTypeRegisterView.cAType.template.fileName}" readonly="true" requiredMessage="Δεν έχετε επιλέξει πρότυπο εγγράφου!"/>
<span class="hcg-input-group-btn">
<p:commandButton id="TemplateFileDownload" styleClass="btn btn-default" icon="fa fa-download" actionListener="#{certificateTypeRegisterView.downloadTemplateFile}" disabled="#{certificateTypeRegisterView.cAType.template.fileName == null}" />
<p:commandButton styleClass="btn btn-default" id="TemplateFileDelete" icon="fa fa-times" actionListener="#{certificateTypeRegisterView.deleteTemplateFile}" disabled="#{certificateTypeRegisterView.cAType.template.fileName == null}" />
</span>
</div>
<p:fileUpload id="uploadFile" value="#{certificateTypeRegisterView.uploadedTemplateFile}" fileUploadListener="#{certificateTypeRegisterView.handleTemplateFileUpload}"
label="Επιλέξτε" uploadLabel="Ανέβασμα" cancelLabel="Ακύρωση" update=":cATypeForm:TemplateFile,:cATypeForm:TemplateFileDownload,:cATypeForm:TemplateFileDelete" styleClass="hcg-upload" />
</div>
</div>
</div>
</div>
</ui:fragment>
</h:panelGroup>
Комментарии:
1. Вам не нужно было переходить на
f:ajax
вашp:ajax
, все было в порядке, ваше правильное решение заключалось в том, чтобы обернуть внешний компонент и обновить его, чтобы отображаемый флаг внутри него был повторно отображен. JSF не будет обновлять поле с отображением =»false», потому что его даже нет в дереве JSF. Обернув его во внешний компонент, который виденupdate=""
, теперь работает. Поэтому я бы поставил васp:ajax
обратно.. Это распространенная ошибка, которую люди допускают при использовании JSF иrendered
field.