Question

我在其中一个项目中使用了primefaces一切都很酷，直到今天发生了一个奇怪的问题，如果我使用<p:ajax update="id_component"/>更新某些primefaces组件，组件会丢失它并变为非活动状态（不可点击）

经过长时间的测试后，我发现任何使用 JQuery 的组件在突然发生 Ajax请求之后变为非活动状态！。

这是一个代码示例：

<div class="row" >
                                            <div class="col-lg-3">
                                                <h:outputLabel value="Campagne : "/> 
                                            </div>
                                            <div class="col-lg-3">
                                                <h:selectOneMenu id="ycamp" value="#{homeSupGBean.idCamp1}">
                                                    <f:selectItem itemLabel="Choisir " itemValue="0"/>
                                                    <f:selectItems value="#{homeSupGBean.campagnesInOrga}" var="camp" itemLabel="#{camp.name}" itemValue="#{camp.id}"/>
                                                    <p:ajax  update="year ycamp"/>                                                                                          
                                                </h:selectOneMenu>
                                            </div>
                                            <div class="col-lg-3">
                                                <h:outputLabel value="Années : "/> 
                                            </div>
                                            <div class="col-lg-3">
                                                <p:selectOneMenu id="year" value="#{homeSupGBean.year}">
                                                    <f:selectItem itemLabel="Choisir " itemValue="0"/>
                                                    <f:selectItems var="year" value="#{homeSupGBean.years}" itemLabel="#{year}" itemValue="#{year}"/>
                                                    <p:ajax listener="#{homeSupGBean.getProgOfCampInYear()}" oncomplete="chartProgOfCampInYear()" update="values"/>
                                                </p:selectOneMenu>
                                            </div>
                                        </div>

图片[OnLoad]：

图片[Ajax更新后]：

已编辑： 我按照@BalusC的建议使用F12来查看在ajax更新之前和之后从primefaces组件生成的HTML代码。

之前：

<div id="formm:year" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
        <input aria-disabled="false" aria-describedby="formm:year_0" aria-activedescendant="formm:year_0" aria-owns="formm:year_items" aria-autocomplete="list" id="formm:year_focus" name="formm:year_focus" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" type="text"></div><div class="ui-helper-hidden-accessible">
        <select id="formm:year_input" name="formm:year_input" tabindex="-1" onchange="PrimeFaces.ab({s:&quot;formm:year&quot;,e:&quot;valueChange&quot;,p:&quot;formm:year&quot;,u:&quot;formm:values&quot;,onco:function(xhr,status,args){chartProgOfCampInYear();}});">
            <option value="0" selected="selected">Choisir </option><option value="2016">2016</option>
            <option value="2015">2015</option>
            <option value="2014">2014</option>
        </select>
    </div>
    <label id="formm:year_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">Choisir </label>
    <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
</div>

在Ajax Upadate之后：

<div id="formm:year" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
    <div class="ui-helper-hidden-accessible">
    <input id="formm:year_focus" name="formm:year_focus" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" type="text">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select id="formm:year_input" name="formm:year_input" tabindex="-1" onchange="PrimeFaces.ab({s:&quot;formm:year&quot;,e:&quot;valueChange&quot;,p:&quot;formm:year&quot;,u:&quot;formm:values&quot;,onco:function(xhr,status,args){chartProgOfCampInYear();}});">
            <option value="0" selected="selected">Choisir </option>
            <option value="2016">2016</option>
            <option value="2015">2015</option>
            <option value="2014">2014</option>
        </select>
    </div>
    <label id="formm:year_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
    <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
        <span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
    </div>
    <div id="formm:year_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
        <div class="ui-selectonemenu-items-wrapper" style="height:auto">
            <ul id="formm:year_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox">
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Choisir " tabindex="-1" role="option">Choisir </li>
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="2016" tabindex="-1" role="option">2016</li>
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="2015" tabindex="-1" role="option">2015</li>
                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="2014" tabindex="-1" role="option">2014</li>
            </ul>
        </div>
    </div>
</div>

JS控制台：当我第一次加载页面时，图像中出现错误[触发ajax更新时没有任何变化]。

我希望你能理解这里发生的事情因为我没有，谢谢你的时间。

Primefaces / JQuery：ajax更新后组件处于非活动状态

0 个答案: