Search code examples
javascriptrenderingonchange

onchange ignored in a SelectBox

To be honest, I'm not professional enough in JavaScript, but I have the feeling that my problem is very strange o.O

In fact, I have a SelectBox containing a list of templates. If I select one, the onchange event is handled well with an Ajax call and a form displayed as selected. OK

Now, if by chance a form containing a SelectBox and that it also contains an onchange, the event is ignored and nothing happens. NOK

<div class="UIDocumentFormController" id="UIDocumentFormController">    
 <div style="display: block;">
  <div class="UIFormWithoutAction  UISelectDocumentForm">
   <form class="UIForm" id="UISelectDocumentForm" action="/portal/private/acme/siteExplorer?portal:componentId=4e6208eb-b0d7-468c-bd01-6f63a38118fc&amp;portal:type=action&amp;uicomponent=UISelectDocumentForm" onsubmit="Change" method="post">
    <div><input type="hidden" name="formOp" value=""></div>
    <div class="HorizontalLayout">
     <table class="UIFormGrid">
      <tbody>
       <tr>
        <td class="FieldLabel">Sélectionner un formulaire</td>
        <td class="FieldComponent">
         <select class="selectbox" name="selectTemplate" onchange="javascript:eXo.webui.UIForm.submitEvent('4e6208eb-b0d7-468c-bd01-6f63a38118fc#UISelectDocumentForm','Change','&amp;objectId=selectTemplate')">
          <option value="exo:article">Article</option>
          <option value="exo:cssFile">CSS File</option>
          <option value="exo:event">Event</option>
          <option value="nt:file">File</option>
          <option selected="selected" value="exo:articletest">teeest</option>
         </select>
        </td>
       </tr>
  </tbody></table>
     </div>
    </form>
   </div>
  </div>
  <div style="display: block;">
   <div class="UIForm FormLayout"> 
    <form class="UIForm" id="UIDocumentForm" action="/portal/private/acme/siteExplorer?portal:componentId=4e6208eb-b0d7-468c-bd01-6f63a38118fc&amp;portal:type=action&amp;uicomponent=UIDocumentForm" method="post">
     <div><input type="hidden" name="formOp" value=""></div>
     <div class="HorizontalLayout">   
      <table class="UIFormGrid">
       <tbody>
        <tr>
         <td class="FieldLabel">Nom</td>
         <td class="FieldComponent"><input name="name" type="text" id="name"> * </td>
        </tr>
        <tr>
         <td class="FieldLabel">Select</td>
         <td class="FieldComponent">
          <select class="selectbox" name="introducerTitle" onchange="javascript:eXo.webui.UIForm.submitEvent('4e6208eb-b0d7-468c-bd01-6f63a38118fc#UIDocumentForm','Change','&amp;objectId=introducerTitle')">
           <option value="aaa">aaa</option>
           <option value="bbb">bbb</option>
          </select>
         </td>
        </tr>
       </tbody>
      </table>    
      <div class="UIAction"> 
       <table class="ActionContainer">
        <tr>
         <td>
          <div onclick="javascript:eXo.webui.UIForm.submitForm('4e6208eb-b0d7-468c-bd01-6f63a38118fc#UIDocumentForm','Save',true)" class="ActionButton LightBlueStyle">
           <div class="ButtonLeft">
            <div class="ButtonRight">
             <div class="ButtonMiddle"><a href="javascript:void(0);">Sauver comme brouillon</a></div>
            </div>
           </div>
          </div>               
         </td>
        </tr>
       </table>
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>

THE WEIRD AND ILLOGICAL THING: If I inspect the SelectBox (using FireBug or any similar tool), and I make any changes (delete one letter and rewrite) in the called function, the SelectBox becomes functional and the event called by onchange runs.

NB: the Ajax call creates forms with Java code, and I think it's a problem Rendering.

Solution

  • Resolved

    In fact, there's another javascript function that override this function submitEvent. So it will not be called. That's why, when I make a change with Firebug, it's reconsidered and then called successfully.

    Hope that helps others.