Question

I have created a custom facelets component and I need to set some value to the component everytime it loads based on the value it gets from the bean. I used window.onload function in the component and it works correctly when there is only one of this component in the page. But when I use to or more of this component in my page, only the first component gets its value set. I need a nice way to overcome this problem.

My xhtml is like this

<ui:composition>

    <f:subview id="#{id}">
        <div id="script" style="display: none;">
            <script type="text/javascript">
    //<![CDATA[ 

        window.onload = function() {

           //this function manipulates the value from the bean 

            };           


        function processNepCal(){
                     //this function is for processing the changed values
        }
        // ]]>
    </script>
        </div>
        <rich:calendar datePattern="yyyy-MM-d" id="gregCal"
            rendered="#{backingBean.dataSetParam.userSession.nepDate }"
            value="#{value}" inputClass="#{empty styleClass ? '' : styleClass}" />
        <h:panelGroup
            rendered="#{!backingBean.dataSetParam.userSession.nepDate}">

            <h:panelGrid columns="3">
                <rich:comboBox id="nepCalYear" styleClass="datecls"
                    defaultLabel="year" onchange="processNepCal()" width="53px"
                    readonly="true" directInputSuggestions="true">
                    <f:selectItem itemLabel="2067" itemValue="2067" />
                    <f:selectItem itemLabel="2068" itemValue="2068" />
                    <f:selectItem itemLabel="2069" itemValue="2069" />
                    <f:selectItem itemLabel="2070" itemValue="2070" />
                </rich:comboBox>
                <rich:comboBox id="nepCalMonth" styleClass="datecls"
                    onchange="processNepCal()" width="65px" readonly="true"
                    defaultLabel="month" directInputSuggestions="true">
                    <f:selectItem itemLabel="Baisakh" itemValue="Baisakh" />
                    <f:selectItem itemLabel="Jestha" itemValue="Jestha" />
                    <f:selectItem itemLabel="Ashad" itemValue="Ashad" />
                    <f:selectItem itemLabel="Shrawan" itemValue="Shrawan" />
                    <f:selectItem itemLabel="Bhadra" itemValue="Bhadra" />
                    <f:selectItem itemLabel="Ahswin" itemValue="Ahswin" />
                    <f:selectItem itemLabel="Kartik" itemValue="Kartik" />
                    <f:selectItem itemLabel="Mangsir" itemValue="Mangsir" />
                    <f:selectItem itemLabel="Paush" itemValue="Paush" />
                    <f:selectItem itemLabel="Magh" itemValue="Magh" />
                    <f:selectItem itemLabel="Falgun" itemValue="Falgun" />
                    <f:selectItem itemLabel="Chaitra" itemValue="Chaitra" />
                </rich:comboBox>

                <rich:comboBox id="nepCalDay" styleClass="datecls"
                    onchange="processNepCal()" width="43px" readonly="true"
                    defaultLabel="day" directInputSuggestions="true">
                    <f:selectItem itemLabel="01" itemValue="01" />
                    <f:selectItem itemLabel="02" itemValue="02" />
                    <f:selectItem itemLabel="03" itemValue="03" />
                    <f:selectItem itemLabel="04" itemValue="04" />
                    <f:selectItem itemLabel="05" itemValue="05" />
                    <f:selectItem itemLabel="06" itemValue="06" />
                    <f:selectItem itemLabel="07" itemValue="07" />
                    <f:selectItem itemLabel="08" itemValue="08" />
                    <f:selectItem itemLabel="09" itemValue="09" />
                    <f:selectItem itemLabel="10" itemValue="10" />
                    <f:selectItem itemLabel="11" itemValue="11" />
                    <f:selectItem itemLabel="12" itemValue="12" />
                    <f:selectItem itemLabel="13" itemValue="13" />
                    <f:selectItem itemLabel="14" itemValue="14" />
                    <f:selectItem itemLabel="15" itemValue="15" />
                    <f:selectItem itemLabel="16" itemValue="16" />
                    <f:selectItem itemLabel="17" itemValue="17" />
                    <f:selectItem itemLabel="18" itemValue="18" />
                    <f:selectItem itemLabel="19" itemValue="19" />
                    <f:selectItem itemLabel="20" itemValue="20" />
                    <f:selectItem itemLabel="21" itemValue="21" />
                    <f:selectItem itemLabel="22" itemValue="22" />
                    <f:selectItem itemLabel="23" itemValue="23" />
                    <f:selectItem itemLabel="24" itemValue="24" />
                    <f:selectItem itemLabel="25" itemValue="25" />
                    <f:selectItem itemLabel="26" itemValue="26" />
                    <f:selectItem itemLabel="27" itemValue="27" />
                    <f:selectItem itemLabel="28" itemValue="28" />
                    <f:selectItem itemLabel="29" itemValue="29" />
                    <f:selectItem itemLabel="30" itemValue="30" />
                    <f:selectItem itemLabel="31" itemValue="31" />
                    <f:selectItem itemLabel="32" itemValue="32" />

                </rich:comboBox>
            </h:panelGrid>

            <h:inputText id="nepCalVal" value="#{value}"
                styleClass="#{empty styleClass ? '': styleClass}"
                style="display:none;">
                <f:converter converterId="NepaliDateConverter"></f:converter>
            </h:inputText>
        </h:panelGroup>
    </f:subview>
</ui:composition>

Answer 1

First of all, why don’t you just use the component’s value attribute for this?

<x:someComponent value="#{bean.value}" />

Do if necessary the manipulation just straight in the bean or with help of a fullworthy Converter.

---

As to your concrete problem, everytime you declare a window.onload = function() {} the previously declared one will be overridden. The window can has only one onload function. You basically need to put them all in the same onload function.

Better is to use element.addEventListener instead. Here’s a crossbrowsercompatible snippet:

function addEvent(element, event, func) {
    if (element.addEventListener) {
        element.addEventListener(event, func, false); // Real browsers.
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent("on" + event, func); // MSIE<=8.
    } else {
        return false; // Really ancient browsers.
    }
}

So that you can use

addEvent(window, "load", function() {
    // Do here your thing.
});