Add onChange with Javascript

[Bohica69]

I've got a drop down on a page that I'd like to add an onChange event to it programatically, but can't seem to get it to work. I'm adding the dropDown and the onChange handler to the dom dynamically

Relavent Javascript code looks like this:

createDropDown: function (dataCollection, dropDownId, cssClass, onChangeFunction)
    {
        // Remove existing list with this Id, if exists
        var listTag = $g(dropDownId);
        if (listTag) this.parentDiv.removeChild(listTag);

        // Create list
        var list;
        list = $c('select');
        list.id = dropDownId;
        list.name = dropDownId;
        
        
        if (onChangeFunction)
        {
          list.onchange = onChangeFunction;
          var onChangeHandler = new Function(list.onchange); 
          if (list.addEventListener) { 
              list.addEventListener('onchange', function() {eval(onChangeFunction)}, false); 
          } else if (list.attachEvent) { 
              list.attachEvent('onchange', onChangeHandler); 
          }  
        }
        
        if (cssClass != '')
        {
            this.setCssClass(list, cssClass);
        }
        
      
        // Add items to list
        var option;
        for(index in dataCollection) 
        {
            var item = dataCollection[index];
            option = $c('option');

            var value = item.Value;
            var max = 255;
            
            var title = item.Text;
            
            if (title.length > max)
                title = title.substring(0, max) + '...';

            option.setAttribute('value', value);
            option.innerHTML = title;
            
            list.appendChild(option);  
        }
                   
        return list;
    }

Dropdown get's created ok, but the onchange event never fires... Any ideas?

 

[Bohica69]

I figured it out. For hyperlinks you have to add an event listener, but for select boxes you have to just do a setAttribute

So this:

if (onChangeFunction)
        {
          list.onchange = onChangeFunction;
          var onChangeHandler = new Function(list.onchange); 
          if (list.addEventListener) { 
              list.addEventListener('onchange', function() {eval(onChangeFunction)}, false); 
          } else if (list.attachEvent) { 
              list.attachEvent('onchange', onChangeHandler); 
          }  
        }

became this:

if (onChangeFunction)
        {
          list.setAttribute("onChange", onChangeFunction);
         
        }

 

[XOR != OR]

Glad you got it working. If I could make a recommendation; if you are doing any serious amount of work in javascript, take a look at Jquery and jqueryUI. It's amazing what this library is capable of, and it has the added benefit of handling most of the compatibility issues you might run into between the various browsers.

 

[Bohica69]

Glad you got it working. If I could make a recommendation; if you are doing any serious amount of work in javascript, take a look at Jquery and jqueryUI. It's amazing what this library is capable of, and it has the added benefit of handling most of the compatibility issues you might run into between the various browsers.

Thanks, I've been thinking about doing just that, but am not sure how it would work with what I'm doing. Basically I'm building a widget based on the example here:
http://blogs.msdn.com/b/pajohn/archive/2008/06/18/web-widgets-with-net-part-one.aspx

The only cross browser problems I've run into are with creating a hyperlink (and event handler) and the event handler for the drop down. The first time I did the hyperlink I did the attribute thing with it, and it didn't work, so I found the add event handler code, and that did what I needed, but with the drop down, the event handler didn't work, but the attribute trick did. Consistency is a great thing isn't it?

 

[XOR != OR]

Thanks, I've been thinking about doing just that, but am not sure how it would work with what I'm doing. Basically I'm building a widget based on the example here:
http://blogs.msdn.com/b/pajohn/archive/2008/06/18/web-widgets-with-net-part-one.aspx

The only cross browser problems I've run into are with creating a hyperlink (and event handler) and the event handler for the drop down. The first time I did the hyperlink I did the attribute thing with it, and it didn't work, so I found the add event handler code, and that did what I needed, but with the drop down, the event handler didn't work, but the attribute trick did. Consistency is a great thing isn't it?

Lol, indeed. I've just been incredibly impressed with jquery. For instance, know how netflix has that cool thing where you can drag and drop your queue-movies to change their priority? That's simply : $('#something').sortable(). That's it, you can drag and drop the elements now ( obviously, there' s a little more to connect that to your back end script, but it's surprisingly easy ).

Or ajax. How could I forget ajax? This is how you submit an ajax query: $.post( url, data, function( callback_data ){ } ). That's all there is to it.

Anyway, I'll get off my soapbox now.

 

[Bohica69]

Thanks for the input! I'll try and take a look at it. Just want to get the basics working now. I have to say, the JSON stuff in that project is pretty cool.