473,405 Members | 2,187 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

dynamic select element: problem with onchange event

Hi all,

For some reason my change() function is only called when the page loads. I'd
much rather it gets called when the select changes.

Here's the code:

window.onload = init;

function init() {
var new_select = new Selector('tdata','myselect','myid');
var new_select_list = new DataSource("some_list");
new_select_list.addItem(1,"One");
new_select_list.addItem(2,"Two");
new_select_list.addItem(3,"Three");
new_select_list.addItem(4,"Four");
new_select_list.addItem(5,"Five");
new_select.setDataSource(new_select_list);
new_select.formInput("form","input");
}

Selector = function(container_id,name,id) {
var container = document.getElementById(container_id);
this.node = document.createElement("select");
//this.node = new Select();
container.appendChild(this.node);
this.node.name = name;
this.node.id = id;
}

Selector.prototype.setDataSource = function(ds) {
this.dataSource = ds;
for(var i = 0; i < ds.items.length; i++) {
if(ds.items[i] != undefined) {
var option = new Option(ds.items[i],i,false,false);
this.node.options[this.node.options.length] = option;
}
}
}

Selector.prototype.formInput = function(form,element) {
var myform = document.getElementById(form);
this.input = document.createElement("input");
this.input.name = element;
//this.input.type = "hidden";
myform.insertBefore(this.input,myform.firstChild);
this.node.onchange = change(this);
}

function change(selector) {
alert("hello");
selector.input.value = selector.node.value;
}

DataSource = function(name) {
this.name = name;
this.items = new Array();
}

DataSource.prototype.addItem = function(id,item) {
this.items[id] = item;
}

and the html:

<html>
<head>
<script defer src="/javascript/selectors.js"
type="text/javascript"></script>
</head>
<body>
<form id=form>
<table border=1>
<tr>
<td>
Select:
</td>
<td id=tdata>
</td>
</tr>
</table>
</form>
</body>
</html>


Jul 20 '05 #1
1 20665
"Covad" <wp*********@hotmail.com> wrote in message
news:8e***************************@msgid.meganewss ervers.com...
<snip>
Selector.prototype.formInput = function(form,element) {
var myform = document.getElementById(form);
this.input = document.createElement("input");
this.input.name = element;
//this.input.type = "hidden";
myform.insertBefore(this.input,myform.firstChild);
this.node.onchange = change(this);
}

<snip>

Your specific problem is the line above. The - change - function is
only called once because that line calls the function and assigns the
return value of the change function (undefined) to the onchange property
of the node. To have an onchange event handling function called with a
change event you need to assign a reference to the function to the
onchange property of the SELECT element.

Unfortunately, you want the - change - function to reference its -
selector - parameter, but event handling functions are either passed a
reference to the event object (on browsers that follow the Netscape
pattern of event handling) or they get no parameter at all. There are
two approaches to associating a JavaScript object instance with an event
handling function. The first is to create a global reference to the
object so the event handling function can refer to the object via a
global identifier or property accessor, for example:-

function myObject(){
this.index = myObject.instances.length;
myObject.instances[this.index] = this;
this.selectEl = ...
...
}
myObject.prototype.setOnChange = function(){
this.selectEl.onchange =
new Function('change(myObject.instances['+this.index+']);');
}
myObject.instances = [];

- and many variations on the theme.

The second option is to use a closure to hold a reference to the
JavaScript object instance associated with an inner function assigned as
the event handler:-

function setOnChange(selectEl, objInstance){
selectEl.onchange = function(){
alert("hello");
objInstance.input.value = objInstance.node.value;
};
selectEl = null;
}

- and many variations on that. The closure option is probably easiest to
code but suffers from producing a garbage collection problem on all
(Windows at least) version of IE where the garbage collector cannot free
DOM elements or JavaScript objects if they form points in a circular
chain of references that includes both DOM elements and JavaScript
objects. For example, if a select element's onchange property refers to
a function that is an inner function that results in a closure and the
closure holds a reference to the select element then the chain of
references is circular and IE will not garbage collect any of the
objects involved, tying up memory until the browser is closed. The
example function above should not produce that problem itself as the
select element references the inner function and nulling the direct
reference to the select element leaves the closure only holding a
reference to the JavaScript object instance and that is not circular,
_but_ if the JavaScript object instance itself holds a reference to the
select element the circular reference would exist and memory leaks would
result unless positive action was taken to prevent it (such as using an
onunload event handling function to break the circular references at
some point).

Your code also suffers from making assumptions about the features of
environment in which it will be executing, calling various functions and
method without first verifying that they exist in the browsers. There
does not appear to be any reason for not verifying browser support,
possibly in the init function so that it only has to be done once.
Though it would be normal to also plan some path of clean degradation to
a functional UI in the absence of browser support for the required
features, and it looks like this code design is already to JavaScript
dependent for basic HTML functionality in the absence of browser
support. But at least testing the browser for support of the required
features would avoid confirming the user of an unexpected browser's
impression that the page author was incompetent by showing a series of
avoidable JavaScript error messages.

Richard.
Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Joe Kelsey | last post by:
I want to create dynamic content and use replaceChild to switch out different subtrees. I start with a span placeholder: <span id="replaceMe"></span> Then I use document.getElementById...
3
by: Dennis M. Marks | last post by:
I have a problem with the following code. It generates a <FORM><SELECT><OPTION> list. There is no problem in the generating. The problem is in the execution as follows. It works fine in Mac IE...
3
by: daveland | last post by:
I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a...
9
by: Gianni | last post by:
I have to insert in a html select the last 10 years <select name="year" onChange="month()" size=5> <option value="1994">1994</option> <option value="1995">1995</option> <option...
2
by: Tyler | last post by:
Hi all, I am using some components from a JS library (scriptalicious), where callback functions are arguments to the constructors of the components like so: someClass x (name) { this.name =...
3
by: Michael McGrew | last post by:
I have a Dynamic drop-down box that is populated based on a ADO query. This works fine. I want to capture the users selection and assign it to a variable for use in another query. I am using the...
7
by: prash.marne | last post by:
Hello, I have a simple form <form method="POST"> <select name="activity"> <option value="0">None</option> <option value="M" onclick="popup_onclick()">Select Multiple</option> <option...
9
by: Tarscher | last post by:
hi all, I have this seemingly simple problem. I have lost a lot of time on it though. When a user selects a value from a dropdownlist (static control) a dynamic control is generated. I have...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.