Ajax обновление поля с его идентификатором не работает с отображаемым атрибутом на Primefaces

#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.