Error using outputPanel with autoupdate=true in primefaces

Question

I have a custom component where I use the Carousel. When I click on an item from Carousel I update my managebean and need the screen to be updated. I use the outputpanel with autoupdate=true, but without success, it even updates the page, but the Carousel stops scrolling sideways. The error printed in 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>

Calling for:

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

Answer 1

I solved the problem using two points before id inside the update no attribute composite I wanted to update, it was like this:

Call from the Committee:

<p:outputPanel id="fProdcutsTel">
    <div class="form-group">
        <div class="titulo-list">TELEFONIA</div>
        <components:carouselSimulador
            productList="#{selectComboController.productList}"
            carouselWidgetVar="carouselTelefonia"
            selectedProduct="#{selectComboController.selectedProduct}"
            elementUpdate=":fProdcutsBan, :fProdcutsTel" />
    </div>
</p:outputPanel>

Composition:

<p:commandLink update=":fProdcutsTel"> 
    <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> 
            <h:outputText value="#{product.value}" style="margin-top: 10px;display:block;color: red;" >
                <f:convertNumber maxFractionDigits="2" integerOnly="false" locale="pt-br" currencySymbol="R$"  />
            </h:outputText>             
        </div>
    </div>
</p:commandLink>

source:https://stackoverflow.com/questions/18489057/jsf2-updating-composite-elements-using-ajax