how to add event handler into surf template ?

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

zengqingyi12

        <div class="yui-gd">
            <div class="yui-u first"><label for="${args.htmlid}-addContent">${msg("label.HowToAddContent")}:</label></div>
            <div class="yui-u">  
              <select id="addContent" name="addContent" onchange="dropdown(this)">
                  <option value="1" selected="selected">${msg("label.generateFromDescription")}</option>
                  <option value="2">${msg("label.uploadFile")}</option>
               </select>   
              </div>   
 
         </div>
<script type="text/javascript">//<![CDATA[
       function dropdown(sel){
              //if(document.getElementById("addContent").value == "1")
            if(sel.value == "0"){
               document.getElementById('desc').style.display = 'block'
         }
            else {
            document.getElementById('desc').style.display = 'none'
         }
      }       
//]]></script>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I write it because i want to add event handler into select box, it works well in firefox, but in IE it always throw null exception.
Even through i used attachEvent , it still can not work in IE.
If i use document.getElementById("addContent") in <script></script> above, it will always throw null exception!
But all these things work well in Firefox!

Can someone tell me why ?
Thanks in advance !

mikeh

That's more of a generic JavaScript issue rather than having much relation to Surf, but anyway…

An isolated (static HTML) test works fine:

<html>
<head><title>select</title></head>
<body>

<select id="addContent" name="addContent" onchange="dropdown(this)">
   <option value="1" selected="selected">label.generateFromDescription</option>
   <option value="2">label.uploadFile</option>
</select>   
<div id="desc">This is the desc div</div>
<script type="text/javascript">//<![CDATA[
function dropdown(sel)
{
   if (sel.value == "1")
   {
      document.getElementById('desc').style.display = 'block';
   }
   else
   {
      document.getElementById('desc').style.display = 'none';
   }
}       
//]]></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note that MSIE may not have liked your lack of semicolons on the end of the lines. Also, I'm assuming you've got a div with an ID of "desc" somewhere on the page?

Generally, it's a bad idea to code element ids on the page like you've got. Look at the label's "for" attribute (and any other Share element with an id) and you'll see it's prefixed with "${args.htmlid}". This ensures multiple instances of the component on a page won't have clashing ids. It's also much better to attach events to elements via YUI, but I'll ignore that for now.

<select id="${args.htmlid}-addContent" name="addContent" onchange="dropdown(this)">
   <option value="1" selected="selected">${msg("label.generateFromDescription")}</option>
   <option value="2">${msg("label.uploadFile")}</option>
</select>   
<div id="${args.htmlid}-addContent-desc">This is the desc div</div>
<script type="text/javascript">//<![CDATA[
function dropdown(sel)
{
   var descDiv = YAHOO.util.Dom.get('${args.htmlid}-addContent-desc');
   descDiv.style.display = sel.value == "1" ? "block" : "none";
}       
//]]></script>‍‍‍‍‍‍‍‍‍‍‍‍

Hope that helps,
Mike