Primefaces 7 <p：slider> UI出现问题，并带有<p：ajax>

问题描述

上下文：

我们正在将项目从Axon Ivy 6.3迁移到Axon Ivy8。在Axon Ivy 6.3中，我们使用Primefaces 6；在Axon Ivy 8中，我们使用Primefaces 7。

我们在暂存服务器上运行了带有Axon Ivy 6.3的项目，在那里没有出现故障问题。但是，在运行Axon Ivy项目版本8的开发服务器上，会发生此问题。

所以我想这与Primefaces的版本有关。

以下是我们正在使用的一些代码，希望可以提供足够的信息。

我们有自定义的numberSlider组件，其中包含一个输入字段和一个<p:slider>。

    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui">
    <cc:interface>
        <cc:attribute name="value" required="true"/>
        <cc:attribute name="componentId" required="true" type="java.lang.String"/>
        <cc:attribute name="minValue" default="0"/>
        <cc:attribute name="maxValue" default="100"/>
        <cc:attribute name="step" default="1"/>
        <cc:attribute name="label" type="java.lang.String"/>
        <cc:attribute name="inputStyleClass" type="java.lang.String"/>
        <cc:attribute name="widgetvar" type="java.lang.String"/>
        
        <cc:editableValueHolder name="input" targets="#{cc.attrs.componentId}Input" />
        
        <cc:clientBehavior name="slideEnd" targets="#{cc.attrs.componentId}Slider" event="slideEnd" />
        <cc:clientBehavior name="inputChange" targets="#{cc.attrs.componentId}Input" event="change" />
    </cc:interface>
    <cc:implementation>
        <h:outputScript name="numberslider.js?v=#{cachedVersion}" library="js" target="head"/>
        <h:outputStylesheet library="css" name="componentnumber.slider.min.css?v=#{cachedVersion}"/>
        <p:outputLabel value="#{cc.attrs.label}" for="#{cc.attrs.componentId}Input" styleClass="c-blue label"/>
        <p:inputNumber id="#{cc.attrs.componentId}Input" value="#{cc.attrs.value}"
            styleClass="input #{cc.attrs.inputStyleClass}" decimalPlaces="0" thousandSeparator="'" minValue="0" maxValue="2000000">
        </p:inputNumber>

        <p:message for="#{cc.attrs.componentId}Input" id="#{cc.attrs.componentId}InputMessage"/>

        <div class="spacing-small"></div>

        <div class="range">
            <p:outputPanel styleClass="slider__tooltipBlock">
                <i class="arrow-up"></i>
                <p:outputLabel styleClass="slider__tooltipLabel" id="#{cc.attrs.componentId}SliderTooltipLabel" value="#{cc.attrs.value}">
                    <f:convertNumber type="number" locale="de_CH"/>
                </p:outputLabel>
            </p:outputPanel>
            <p:slider id="#{cc.attrs.componentId}Slider" widgetvar="#{cc.attrs.widgetvar}" styleClass="slider__line"
                for="#{cc.attrs.componentId}Input"
                step="#{cc.attrs.step}" maxValue="#{cc.attrs.maxValue}" minValue="#{cc.attrs.minValue}"
                display="#{cc.attrs.componentId}SliderTooltipLabel">
            </p:slider>
            <script type="text/javascript">
                $(document).ready(function(){
                    MF.component.numberSlider.initSliderToolTip('#{cc.attrs.widgetvar}');
                })
            </script>
        </div>
    </cc:implementation>
</ui:composition>

这是我们使用该组件的方式：

<div class="column medium-6">
    <com:numberSlider id="amount" componentId="amount" value="#{tranche.amount}"
        label="#{ivy.cms.co('/xx/xxx/xxx/xx/component/product/tranches/amount')}"
        minValue="0" maxValue="2000000" step="50000" widgetvar="amountSlider#{varStatus.index}">
        <p:ajax event="inputChange" listener="#{logic.onInputChange(varStatus.index)}"
            partialSubmit="true"
            update="@([id$='productvariant']) @([id$='flexibilityPanel']) @([id$='houSEOverlayDataVariant']) @([id$='houSEOverlayData'])"
            process="@([id$='productvariant'])"
            oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();"/>
        <p:ajax event="slideEnd" listener="#{logic.onInputChange(varStatus.index)}"
            partialSubmit="true"
            update="@([id$='productvariant']) @([id$='flexibilityPanel']) @([id$='houSEOverlayDataVariant']) @([id$='houSEOverlayData'])"
            process="@([id$='productvariant'])"
            oncomplete="updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse()"/>
    </com:numberSlider>
</div>

行为

当我们在暂存器上拖放滑块，然后释放鼠标时，UI会平滑更新。 当我们将滑块拖放到dev上，然后释放鼠标时，UI会有一个小故障，滑块消失，然后迅速重新出现。发生故障时，尚未首先应用某些CSS，然后再次出现滑块时，然后正确应用了CSS。

我希望两个版本的UI都会以相同的方式更改。

我已经检查了两个版本的HTML代码，但我不知道它们为什么不同。

Primefaces 6呈现了html：

<div class="column medium-6">
   <label id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_li" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" class="ui-inputNum ui-widget input "><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_input" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all pe-inputNumber" role="textBox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput_hinput" type="hidden" autocomplete="off" value="1050000"></span>
   <div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_l2:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
   <div class="spacing-small"></div>
   <div class="range">
      <div id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSlider" class="slider__line ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
         <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 52.5%;">
            <div id="j_id_h4:j_id_h7:j_id_l2:0:amount:j_id_lm" class="ui-outputpanel ui-widget slider__tooltipBlock">
               <i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_l2:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'050'000</label>
            </div>
         </span>
      </div>
      <script type="text/javascript">
         $(document).ready(function(){
             MF.component.numberSlider.initSliderToolTip('amountWidgetvar');
         })
      </script>
   </div>
</div>

Primefaces 7呈现了html

<div class="column medium-6">
   <label id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" class="ui-outputlabel ui-widget c-blue label" for="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input">Höhe</label><span id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" class="ui-inputnumber ui-widget input "><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_input" type="text" value="1100000" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" aria-labelledby="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l3" onchange="PrimeFaces.ab({s:&quot;j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput&quot;,e:&quot;change&quot;,f:&quot;mainForm&quot;,p:&quot;@([id$='productvariant'])&quot;,u:&quot;@([id$='productvariant']) @([id$='flexibilityPanel']) @([id$='houSEOverlayDataVariant']) @([id$='houSEOverlayData'])&quot;,ps:true,onco:function(xhr,status,args){updateProductPageElementsHeight(); bindEventListenerForRangeSlider(); bindEventListenerForToogleHouse();;}});" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" role="textBox" aria-disabled="false" aria-readonly="false"><input id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" name="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput_hinput" type="hidden" autocomplete="off" data-p-label="Höhe" data-p-con="javax.faces.Integer" data-p-hl="inputnumber" value="1100000"></span>
   <div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInputMessage" aria-live="polite" data-display="both" data-target="j_id_h4:j_id_h7:j_id_kn:0:amount:amountInput" data-redisplay="true" class="ui-message"></div>
   <div class="spacing-small"></div>
   <div class="range">
      <div id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSlider" class="slider__line ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
         <span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 55%;">
            <div id="j_id_h4:j_id_h7:j_id_kn:0:amount:j_id_l7" class="ui-outputpanel ui-widget slider__tooltipBlock">
               <i class="arrow-up"></i><label id="j_id_h4:j_id_h7:j_id_kn:0:amount:amountSliderTooltipLabel" class="ui-outputlabel ui-widget slider__tooltipLabel">1'100'000</label>
            </div>
         </span>
      </diva>
      <script type="text/javascript">
         $(document).ready(function(){
             MF.component.numberSlider.initSliderToolTip('amountSlider0');
         })
      </script>
   </div>
</div>

Pimefaces 6呈现了没有onchange部分的html。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）