Блог

Я создал пользовательский компонент facelets, и мне нужно устанавливать некоторое значение для компонента при каждой его загрузке на основе значения, которое он получает из компонента. Я использовал функцию window.onload в компоненте, и она работает корректно, когда на странице есть только один из этих компонентов. Но когда я использую один или несколько из этих компонентов на своей странице, только первому компоненту присваивается значение. Мне нужен хороший способ преодолеть эту проблему.

Мой xhtml выглядит следующим образом

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

Прежде всего, почему бы вам просто не использовать для этого value атрибут компонента?

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

При необходимости выполняйте манипуляции прямо в bean или с помощью fullworthy Converter .

Что касается вашей конкретной проблемы, каждый раз, когда вы объявляете window.onload = function() {} ранее объявленный, он будет переопределен. Окно может иметь только одну функцию onload. По сути, вам нужно поместить их все в одну функцию onload.

Вместо этого лучше использовать element.addEventListener . Вот фрагмент, совместимый с кроссбраузерным:

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

Чтобы вы могли использовать

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