I have a custom component where I use carousel . When I click on a carousel item I update my managebean and I need the screen to be updated. For this I use outputpanel
with autoupdate=true
, but without success, it even refreshes the page, but the carousel stops scrolling sideways. The error printed on the browser console is as follows:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
Component:
<composite:interface>
<composite:attribute name="productList" />
<composite:attribute name="carouselWidgetVar" />
<composite:attribute name="selectedProduct" />
</composite:interface>
<composite:implementation>
<style type="text/css">
.ui-carousel-header {
display: none !important;
}
.ui-carousel-button{
display:none !important;
}
.ui-widget-content {
border: 0px !important;
/* background: #ffffff; */
color: #333333;
}
</style>
<div class="form-group-col">
<div class="form-group">
<div class="buttonNavegationCarousel floatLeft" style="display: table;">
<p:commandLink onclick="PF('#{cc.attrs.carouselWidgetVar}').prev();" style="display:table-cell;vertical-align: middle;">
<p:graphicImage width="25" height="50" style="display: table-cell;"
name="images/carousel/selectPrev.png" />
</p:commandLink>
</div>
<div class="floatLeft">
<p:carousel value="#{cc.attrs.productList}" var="product"
itemStyle="text-align:center;margin-left: 5px;"
widgetVar="#{cc.attrs.carouselWidgetVar}" circular="true">
<p:commandLink>
<f:setPropertyActionListener value="#{product}"
target="#{cc.attrs.selectedProduct}" />
<div class="combo #{product.isSelected}">
<div class="headerComboCarousel">
<span style="height: 41px;display: block;border-bottom-style: solid;
border-bottom-color: #DCDCDC;border-bottom-width: 1px; padding-bottom: 5px;">
<h:outputText value="#{product.name}" />
</span>
</div>
</div>
</p:commandLink>
<p:spacer height="10px" width="5px"/>
</p:carousel>
</div>
<div class="buttonNavegationCarousel floatLeft" style="display: table;">
<p:commandLink onclick="PF('#{cc.attrs.carouselWidgetVar}').next();" style="display:table-cell;vertical-align: middle;">
<p:graphicImage width="25" height="50"
name="images/carousel/selectNext.png" />
</p:commandLink>
</div>
</div>
</div>
</composite:implementation>
</html>
Call:
<p:outputPanel id="f1" autoUpdate="true">
<div class="form-group">
<div class="titulo-list">TELEFONIA</div>
<components:carouselSimulador
productList="#{selectComboController.productList}"
carouselWidgetVar="carouselTelefonia"
selectedProduct="#{selectComboController.selectedProduct}" />
</div>
</p:outputPanel>