4 Replies Latest reply on Sep 27, 2010 7:38 AM by katya

    Custom component with 2 onchange events

    katya

      Hi,

       

      I'm using my custom component that has a h:selectOneMenu in it, which has a a4j:support. The event of the a4j:support is onchange, so when I use the component I can't have another a4j:support with onchange event. The a4j:support in the component has onsubmit and oncomplete event that execute jQuery: find('select').trigger('onselect'); so when I use the component I can add a4j:support for it with onselect event and perform another action. The problem is it only works in Firefox and nothing happens in IE and Chrome when I click the combobox.

       

      Is it normal that it's not working in IE and Chrome, but works in Firefox for some reason? Is there a way to have onchange event in the component and another onchange event when I actually use it?

        • 1. Re: Custom component with 2 onchange events
          pyaschenko

          Could you provide source of the page?

          • 2. Re: Custom component with 2 onchange events
            katya

            the code in the component inputCombo is:

             

            ...

            <h:selectOneMenu id="#{id}" value="#{value}" required="#{required}"
                            styleClass="width-auto" rendered="#{rendered}" disabled="#{disabled}"
                            requiredMessage="#{msg.global_error_field_required}"
                            valueChangeListener="#{selectItems.processValueChange}" onselect="alert('onselect');">

            <h:selectOneMenu id="#{id}" value="#{value}" required="#{required}"

                 rendered="#{rendered}" disabled="#{disabled}"

                 valueChangeListener="#{selectItems.processValueChange}">

             

                 <a4j:support id="new_entry_ajax_region_#{id}" event="onchange"                 

                           action="#{selectItems.newAction}" reRender="#{flowRenderFragments}"

                           ajaxSingle="true" process="#{process}" immediate="true"

                           onsubmit="if ($('#{idParent}').childNodes[0].value != '') {callOnSelect#{idParent}(); return                     false;}"

                           oncomplete="if ($('#{idParent}').childNodes[0].value != '') {callOnSelect#{idParent}();}" />

            </h:selectOneMenu>

             

            <rich:jQuery query="find('select').trigger('onselect');" selector="##{idParent}"           name="callOnSelect#{idParent}" timing="onJScall" />

            ...

             

             

             

            and the code when I use the component is:

             

             

                <dx:inputCombo id="insurer" required="true" value="#{protocol.insurerId}"

                    selectItems="#{insurers}">

                  

                    <a4j:support action="changeInsurer" event="onselect" ajaxSingle="true"

                          reRender="#{flowRenderFragments}"

                           onsubmit="if (!#{rich:element('insurer')}.value > 0) return false;" />

             

                </dx:inputCombo>

             

            When the event is onselect it only works in Firefox, and if a change it to onchange it is not triggered because there already is onchange event in the component.

            • 3. Re: Custom component with 2 onchange events
              nbelaevski

              Hi Katya,

               

              In TLDDoc for h:selectOneMenu 'onselect' is defined as:

              Javascript code executed when text within this element is selected by the user.

              so, this is not a correct event to use.

               

              What's about a4j:support & inline event handlers - this is a known limitation. You can use another event (e.g. 'onclick' to work around that) or use a4j:jsFunction instead of a4j:support and add call to it after your handler.

              • 4. Re: Custom component with 2 onchange events
                katya

                Thanks Nick,

                 

                a4j:jsFunction worked perfect for me