1

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>

p:autocomplete の生成コードの例を次に示します。

間違ったレンダリング:

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

きがついた ：

  • 多くの属性は、入力ではなく最初のスパンに割り当てられます。
  • 2 つの入力要素が間違ったレンダリングで閉じられていません>代わりに/>
  • 間違ったケースでは表示されない、正しいレンダリングで表示されるJavaScript関数があります。

それはバグですか、それとも私がした何かが間違っていますか。NB : ページ構成に p:layout を使用し、入力要素の検証に f:validation を使用しています。

4

1 に答える 1

3

ついに解決！

ランダムに発生し、多くのページに影響を与えていたため、プロジェクトの何が問題なのかを見つけるのは非常に困難でした.

問題は、次のように「ui:include」の src 属性を使用して更新された「p:panel」を使用していることです。

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

menu 要素は、「mainContentPage」の値をコンテンツ ファイルの名前 (例: addClient.xhtml、addStore.xhtml ) に設定して表示し、ajax 更新を介して「mainPanel」を更新します。

すべての .xhtml コンテンツ ファイルには、独自のフォームとコンポーネントがあります。

私が犯していた間違いは、異なるファイル内のすべてのフォームが同じ ID を持っていたことです。

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

パネルは新しいコンテンツで更新されるため、すべてのフォームに異なる名前を付けることはそれほど重要ではないと思いました。残念ながら、システムはフォーム名をどこかに保持しており、コンポーネントのレンダリングが損なわれています。

.xhtml ファイル内のすべてのフォームの ID を変更したところ、すべて正常に動作しました。

すべての人への大きなアドバイス: JSF プロジェクト内のフォームごとに異なる IDを使用してください。

于 2013-03-04T15:56:26.857 に答える