2013-02-27 110 views
1

我正在研究Spring3/JSF2/Primefaces3.5應用程序。Primefaces組件不能正確呈現

我面臨的問題是某些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> 

這裏是P的生成代碼的示例:自動完成:

錯誤渲染:

<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函數出現在正確的呈現中,我們無法看到錯誤的情況。

這是一個錯誤或錯誤我做了。 注意:我使用頁面組織的p:layout和f:驗證來驗證輸入元素。

+0

你能顯示xhtml頁面嗎?尤其是'DOCTYPE'的定義。 – partlov 2013-02-27 13:07:05

+0

感謝您的關注我更新了我的文章 – faissal 2013-02-28 11:18:10

+0

我仍然看不到'DOCTYPE'的定義。在頂級頁面的某處找到它,因爲這是某個模板的一部分。如果不存在,則放入'<!DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 「>」作爲頂級「xhtml」文件的第一行。 – partlov 2013-02-28 11:31:11

回答

3

終於解決!

真的很難找出我的項目出了什麼問題,因爲它是隨機發生的並影響很多頁面。

的問題是,我使用的是「P:面板」使用的src屬性更新的「用戶界面:包括」像這樣:

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

菜單元素只是設置「mainContentPage」的價值與內容文件的名稱(例如addClient.xhtml,addStore.xhtml)通過ajax更新顯示和更新「mainPanel」。

每個.xhtml內容文件都有自己的形式和組件。

我正在犯的錯誤是,不同文件中的所有表單都有相同的ID。

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

我認爲給每一個表單賦予不同的名字並不重要,因爲面板更新了新的內容。不幸的是,系統會將表單名稱保存在某處,並且組件的呈現會受到影響。

我改變了我的.xhtml文件中的所有表單的ID,並且一切正常。

BIG給大家的建議:在JSF PROJET中爲每個表格使用不同的ID

+0

感謝您的建議,我遵循這一點,但問題不解決與IE 11,所有工作正常與鉻和火狐 – 2015-04-15 19:56:23

+0

您可能有很多問題與IE瀏覽器。就我個人而言,我的應用程序僅適用於Chrome和Firefox。我放棄了適應IE。 – faissal 2015-04-27 08:54:17