Компоненты прайвстей не отображаются должным образом

Question

Я работаю над приложением Spring3/JSF2/Primefaces3.5.

Проблема, с которой я сталкиваюсь, заключается в том, что некоторые компоненты Primefaces (p: autocomplete, p: calendar и p: selectOneMenu) не отображаются должным образом в браузере. Проблема возникает случайно на многих страницах. Если я перезагрузите страницу (например, с помощью клавиши F5), проблема будет исправлена, и компонент будет обработан так, как должен.

.xhtml файл:

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:c="http://java.sun.com/jstl/core" 
    xmlns:p="http://primefaces.org/ui"> 

    <h:form id="mainForm"> 

    .... 


    <f:validateBean> 
     <table class="listing form" cellpadding="0" cellspacing="0"> 
       ... 
       (some p:inputText elements) 
       ... 

      <tr class="bg"> 
       <td class="first"><strong>Marque :</strong></td> 
       <td class="last"> 
        <p:autoComplete 
         label="Marque" 
         value="#{montureBean.marque}" 
         completeMethod="#{montureBean.autocompleteMarque}" 
         var="item" 
         itemLabel="#{item.intitule}" 
         itemValue="#{item}" 
         converter="#{montureBean.marqueConverter}" 
         dropdown="true"/> 

        <p:commandLink onclick="dlgMarque.show()" immediate="true"> 
         <img src="/images-main/add-icon.gif" border="0" alt="Ajouter Marque" class="img-action"/> 
        </p:commandLink> 
       </td> 
      </tr>          
      <tr class="bg"> 
       <td class="first"><strong>Matière :</strong></td> 
       <td class="last"> 
        <p:autoComplete 
         label="Matière" 
         value="#{montureBean.matiere}" 
         completeMethod="#{montureBean.autocompleteMatiere}" 
         var="item" 
         itemLabel="#{item.intitule}" 
         itemValue="#{item}" 
         converter="#{montureBean.matiereConverter}" 
         dropdown="true"/> 

        <p:commandLink onclick="dlgMatiere.show()" immediate="true"> 
         <img src="/images-main/add-icon.gif" border="0" alt="Ajouter Matière" class="img-action"/> 
        </p:commandLink> 
       </td> 
      </tr>          

     </table> 
    </f:validateBean> 

    </h:form> 
</ui:composition> 

Ниже приведен пример сгенерированного кода для р: автозаполнения:

Неправильный перевод:

<span aria-multiline="false" aria-disabled="false" role="textbox" id="mainForm:j_id_q_1i" class="ui-autocomplete"> 
     <input id="mainForm:j_id_q_1i_input" name="mainForm:j_id_q_1i_input" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-left" autocomplete="off" value="" type="text"> 
     <input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" autocomplete="off" value="0" type="hidden"> 
     <button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button"> 
      <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span> 
      <span class="ui-button-text">&nbsp;</span> 
     </button> 
     <div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div> 
    </span> 

Правильный рендеринг:

 <span id="mainForm:j_id_q_1i" class="ui-autocomplete"> 
      <input id="mainForm:j_id_q_1i_input" name="mainForm:j_id_q_1i_input" type="text" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-left" autocomplete="off" value="" /> 
      <input id="mainForm:j_id_q_1i_hinput" name="mainForm:j_id_q_1i_hinput" type="hidden" autocomplete="off" value="0" /> 
      <button class="ui-button ui-widget ui-state-default ui-corner-right ui-button-icon-only" type="button"> 
       <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span> 
       <span class="ui-button-text">&nbsp;</span> 
      </button> 
      <div id="mainForm:j_id_q_1i_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div> 
     </span> 
     <script id="mainForm:j_id_q_1i_s" type="text/javascript"><!-- 
      $(function(){PrimeFaces.cw('AutoComplete','widget_mainForm_j_id_q_1i',{id:'mainForm:j_id_q_1i'});}); 
     //--></script> 

Я заметил, что:

• многие атрибуты присваиваются первого интервала, а не на входе,
• двух входных элементов не закрыты в неправильном оказании > вместо />
• есть функция javascript, которая отображается в правильном рендеринге, который мы не можем видеть в неправильном случае.

Это ошибка или что-то не так. NB: Я использую p: layout для организации страницы и f: валидация для проверки входных элементов.

Answer 1

И наконец РЕШЕН!

Было очень сложно выяснить, что не так с моим проектом, так как это происходит случайным образом и затрагивает многие страницы.

Проблема заключается в том, что я использую «р: панель» обновляется с помощью атрибута ГКЗ «УИ: включить», как это:

<p:panel id="mainPanel"> 
    <ui:include src="#{menuBean.mainContentPage}.xhtml" /> 
</p:panel> 

Элемент меню просто устанавливает значение «mainContentPage» с именем файла содержимого (например, addClient.xhtml, addStore.xhtml), чтобы показать и обновить «mainPanel» через обновление ajax.

Каждый файл содержимого .xhtml имеет свою форму и компоненты.

Ошибка, которую я делал, заключается в том, что все формы в разных файлах имеют одинаковый идентификатор.

<h:form id="mainForm"> 
      ….commandlinks and components…. 
    </h:form> 

Я думал, что это было не очень важно, чтобы дать другое имя каждой формы, так как панель обновляется с новым содержанием. К сожалению, система сохраняет имя формы где-то, а рендеринг компонентов скомпрометирован.

Я изменил идентификатор всех форм в моих .xhtml-файлах, и все работает нормально.

БОЛЬШОЙ совет для всех: ИСПОЛЬЗУЙТЕ РАЗЛИЧНЫЙ ИДЕНТИФИКАЦИЮ ДЛЯ КАЖДОЙ ФОРМЫ В ВАШЕМ ПРОЕКТЕ JSF.