Javascript Primefaces组件未正确渲染

我正在开发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：输入文本元素）
...
品牌：
马蒂埃：

以下是为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>

正确渲染：

    <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:validation验证输入元素。

最终解决了

这是真的很难找出什么是我的项目错误，因为它是随机发生的，影响了许多网页

问题是我使用的“p:panel”是使用src属性“ui:include”更新的，如下所示：

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

menu元素只是使用内容文件的名称（例如addClient.xhtml、addStore.xhtml）设置“mainContentPage”的值，以通过ajax更新显示和更新“mainPanel”

每个.xhtml内容文件都有自己的表单和组件

我犯的错误是，不同文件中的所有表单都具有相同的id

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

..命令链接和组件…。

我认为给每个表单起一个不同的名字并不重要，因为面板是用新内容更新的。不幸的是，系统将表单名称保留在某个位置，组件的呈现受到影响

我更改了.xhtml文件中所有表单的id，一切正常

---

给大家一个重要建议：在JSF项目中为每个表单使用不同的ID

你能显示xhtml页面吗？特别是

DOCTYPE

definition。感谢您的关注，我更新了我的帖子，但仍然没有看到

DOCTYPE

definition。在顶级页面的某个地方找到它，因为这是某个模板的一部分。如果它不存在，则将

作为顶级

xhtml

文件的第一行。我有一个index.xhtml文件，它通过ui:include调用上述xhtml文件。html以开头。下一行包含doctype，正如你所说的：谢谢你的建议，我遵循了这一点，但问题并没有用IE 11解决，所有的问题都可以用chrome和Firefox来解决。你可能在IE上有很多问题。就我个人而言，我的应用程序只适用于chrome和Firefox。我放弃了对IE的改编。