Problem with events on dynamically created input fields in internet explorer

[Thomas]

Hi,

I'm having a problem with the dynamically created inputfields in
Internet Explorer.
The situation is the following:
- I have a dynamically created table with a textbox in each Cell.
- It is possible to Add and Delete rows
- Some cells have special attributes (readonly and events)

Here's a snippet of the code:
function addRowToTable(p _vestigingnumme r,
p_straat_vest,
p_huisnr_vest,
p_bus_vest,
p_postcode_vest ,
p_gemeente_vest ,
p_plaats_syscod e_vest,
p_vanaf_vest
) {
var tbl = document.getEle mentById("table name");
var lastRow = tbl.rows.length ;
lastRow--;
v_row++
v_rowid = "row" + v_row;
// if theres no header row in the table, then iteration =
lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(l astRow);
row.setAttribut e("id",v_rowid) ;

/*.....more cells added here......*/
var CellPostcode = row.insertCell( 4);
CellPostcode.se tAttribute("now rap","");
var CellPostcodeTek st = document.create Element("input" );
var Anchornode = document.create Element("a");
Anchornode.setA ttribute("href" ,"javascript:ca ll_zoekgemeente _byID(\''p_plaa ts_sys_vest"
+ v_rowid + "\'',\''p_postc ode_vest" + v_rowid +
"\'',\''p_gemee nte_vest" + v_rowid + "\'')");
var Imagenode = document.create Element("img");
Imagenode.setAt tribute("src","/images/list.gif");
Imagenode.setAt tribute("border ","0");
CellPostcodeTek st.setAttribute ("type","text") ;
CellPostcodeTek st.setAttribute ("name","p_post code_vest_tmp") ;
CellPostcodeTek st.setAttribute ("id","p_postco de_vest" +
v_rowid);
CellPostcodeTek st.setAttribute ("size","3") ;
CellPostcodeTek st.setAttribute ("value",p_post code_vest);
//troubles CellPostcodeTek st.setAttribute ("onblur","call _zoekgemeente_b yID(\''p_plaats _sys_vest"
+ v_rowid + "\'',\''p_postc ode_vest" + v_rowid +
"\'',\''p_gemee nte_vest" + v_rowid + "\'')");
CellPostcode.ap pendChild(CellP ostcodeTekst);
Anchornode.appe ndChild(Imageno de);
CellPostcode.ap pendChild(Ancho rnode);

//Cell gemeente
var Cellgemeente = row.insertCell( 5);
var CellgemeenteTek st = document.create Element("input" );
CellgemeenteTek st.setAttribute ("type","text") ;
CellgemeenteTek st.setAttribute ("name","p_geme ente_vest_tmp") ;
CellgemeenteTek st.setAttribute ("id","p_gemeen te_vest" +
v_rowid);
CellgemeenteTek st.setAttribute ("size","20" );
CellgemeenteTek st.setAttribute ("value",p_geme ente_vest);
CellgemeenteTek st.setAttribute ("READONLY","tr ue"); //troubles
var Cellplaatshidde n = document.create Element("hidden ");
Cellplaatshidde n.setAttribute( "type","hidden" );
Cellplaatshidde n.setAttribute( "name","p_plaat s_sys_vest_tmp" );
Cellplaatshidde n.setAttribute( "value",p_plaat s_syscode_vest) ;
Cellplaatshidde n.setAttribute( "id","p_plaats_ sys_vest" +
v_rowid);

Cellgemeente.ap pendChild(Cellg emeenteTekst);
Cellgemeente.ap pendChild(Cellp laatshidden);
}

Now The problem(s) is this:
If you change the textbox "p_postcode " (which is postal code in
english - or something like that) it must invoke a function which
looks up the correct city.
This works fine in Firefox but it doesn't do a damn thing in Internet
Explorer 6. I've allready changed the onchange event to onblur but
that doesn't help.
Second problem is the readonly attribute which doesn't seem to work in
IE.

Now my question is offcourse: Why doesn't it work in Internet
Explorer? Am I dealing with a MS bug here or is there some other
explanation?
Strange thing is that a lot of other attributes work perfectly (but i
don't need those, haha, programming is fun) like disabled, style,
etc....
I's nearly impossible to change the whole code (time is running out)
so I'll have to find a fix here!

anyone have a clue?

Greetz,
Thomas

[Steve Fulton]

Thomas wrote:

Hi,

I'm having a problem with the dynamically created inputfields in
Internet Explorer.
The situation is the following:
- I have a dynamically created table with a textbox in each Cell.
- It is possible to Add and Delete rows
- Some cells have special attributes (readonly and events)
[snip] CellPostcodeTek st.setAttribute ("onblur","call _zoekgemeente_b yID(\''p_plaats _sys_vest" [snip] CellgemeenteTek st.setAttribute ("READONLY","tr ue"); [snip]
Now The problem(s) is this:
If you change the textbox "p_postcode " (which is postal code in
english - or something like that) it must invoke a function which
looks up the correct city.
This works fine in Firefox but it doesn't do a damn thing in Internet
Explorer 6. I've allready changed the onchange event to onblur but
that doesn't help.
The problem is that event handler attributes are functions, not strings.
Mozilla browsers parse the string and create a function object, just like
they do when they parse the HTML. IE, on the other hand, expects you to
set the attribute to a Function object; it doesn't parse the string.

Which is correct? Neither, really. According to the W3C DOM specs, the
setAttribute method only accepts a string for the second argument, so
IE isn't compliant. On the other hand, event handlers are special cases
that are handled by a completely separate method using DOM-compliant
clients; they aren't really attributes (which can only be strings) at all.

"addEventListen er"
http://www.w3.org/TR/DOM-Level-2-Eve...dEventListener

Unfortunately, IE doesn't follow the spec for adding event handlers to
elements (of course); it has its own proprietary method.

"attachEven t Method"
http://msdn.microsoft.com/workshop/a...ttachevent.asp

Unless you want to do client capability-sniffing, the cross-browser way
to add event handlers to elements is to avoid the setAttribute menthod
(which is the wrong approach anyway) and the W3C-DOM and MS-proprietary
methods and to use the DOM-0 format:

CellPostcodeTek st.onblur=funct ion(){call_zoek gemeente_byID(. ..)}
Second problem is the readonly attribute which doesn't seem to work in
IE.
IE wants the attribute to be spelled "readOnly" (with a capital O).
You should also be aware that although Mozilla accepts the value
"READONLY", Opera does not. It also expects the value "readOnly".
Now my question is offcourse: Why doesn't it work in Internet
Explorer? Am I dealing with a MS bug here or is there some other
explanation?
setAttribute isn't really meant to handle event handlers.
Strange thing is that a lot of other attributes work perfectly (but i
don't need those, haha, programming is fun) like disabled, style,
etc....
Other attributes are string values; setAttribute is meant to work with
them.
I's nearly impossible to change the whole code (time is running out)
so I'll have to find a fix here!

anyone have a clue?

Use the DOM-0 method to attach event handlers and use the value
"readOnly" to set the readonly attribute.

--
Steve

If a man points at the moon, an idiot will look at the finger.
-Sufi wisdom

[RobG]

Thomas wrote:

Hi,
Steve has already pointed you in the right direction, I'll just lob a
few extras in...

I'm having a problem with the dynamically created inputfields in
Internet Explorer.
The situation is the following:
- I have a dynamically created table with a textbox in each Cell.
- It is possible to Add and Delete rows
- Some cells have special attributes (readonly and events)

Here's a snippet of the code:
function addRowToTable(p _vestigingnumme r,
p_straat_vest,
p_huisnr_vest,
p_bus_vest,
p_postcode_vest ,
p_gemeente_vest ,
p_plaats_syscod e_vest,
p_vanaf_vest
) {
var tbl = document.getEle mentById("table name");
var lastRow = tbl.rows.length ;
lastRow--;
v_row++
v_rowid = "row" + v_row;
// if theres no header row in the table, then iteration =
lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(l astRow);
row.setAttribut e("id",v_rowid) ;
All of your 'setAttribute' stuff can be done by accessing the
properties directly. You don't seem to be supporting older browsers,
so I can't see an issue with:

row.id = v_rowid;

And similarly for all the other attributes you set.

/*.....more cells added here......*/
var CellPostcode = row.insertCell( 4);
CellPostcode.se tAttribute("now rap","");
var CellPostcodeTek st = document.create Element("input" );
var Anchornode = document.create Element("a");
Anchornode.setA ttribute("href" ,"javascript:ca ll_zoekgemeente _byID(\''p_plaa ts_sys_vest"
+ v_rowid + "\'',\''p_postc ode_vest" + v_rowid +
"\'',\''p_gemee nte_vest" + v_rowid + "\'')");
var Imagenode = document.create Element("img");
Imagenode.setAt tribute("src","/images/list.gif");
Imagenode.setAt tribute("border ","0");
CellPostcodeTek st.setAttribute ("type","text") ;
CellPostcodeTek st.setAttribute ("name","p_post code_vest_tmp") ;
CellPostcodeTek st.setAttribute ("id","p_postco de_vest" +
v_rowid);
Imagenode.src = "/images/list.gif";

// Set all border attributes in one go
Imagenode.style .border = '2px solid red';

// Or just the width:
Imagenode.style .borderWidth = '0px';

CellPostcodeTek st.type = "text";
CellPostcodeTek st.name = "p_postcode_ves t_tmp";
CellPostcodeTek st.id = "p_postcode_ves t" + v_rowid;
...
CellPostcodeTek st.setAttribute ("size","3") ;
CellPostcodeTek st.setAttribute ("value",p_post code_vest);
//troubles CellPostcodeTek st.setAttribute ("onblur","call _zoekgemeente_b yID(\''p_plaats _sys_vest"
+ v_rowid + "\'',\''p_postc ode_vest" + v_rowid +
"\'',\''p_gemee nte_vest" + v_rowid + "\'')");
Untested, but you can attach functions to intrinsic events thusly:

CellPostcodeTek st.onblur = function (){
call_zoekgemeen te_byID('p_plaa ts_sys_vest' + v_rowid,
'p_postcode_ves t' + v_rowid,
'p_gemeente_ves t' + v_rowid )
};

This way you have access to the variables created in the rest of your
script.
CellPostcode.ap pendChild(CellP ostcodeTekst);
Anchornode.appe ndChild(Imageno de);
CellPostcode.ap pendChild(Ancho rnode);

//Cell gemeente
var Cellgemeente = row.insertCell( 5);
var CellgemeenteTek st = document.create Element("input" );
CellgemeenteTek st.setAttribute ("type","text") ;
CellgemeenteTek st.setAttribute ("name","p_geme ente_vest_tmp") ;
CellgemeenteTek st.setAttribute ("id","p_gemeen te_vest" +
v_rowid);
CellgemeenteTek st.setAttribute ("size","20" );
CellgemeenteTek st.setAttribute ("value",p_geme ente_vest);
CellgemeenteTek st.setAttribute ("READONLY","tr ue"); //troubles
CellgemeenteTek st.readOnly = true;
var Cellplaatshidde n = document.create Element("hidden ");
Cellplaatshidde n.setAttribute( "type","hidden" ); [...]
anyone have a clue?

Hope that helps.
--
Rob

[Steve Fulton]

Thomas wrote:

I'm having a problem with the dynamically created inputfields in
Internet Explorer.

Just thought I'd add another setAttribute gotcha. If you want to use it
to set the class of an element, Mozilla expects the attribute to be
called "class" and IE expects it to be called "className" ; Opera accepts
either value.

--
Steve

Every gun that is made, every warship launched, every rocket fired
signifies, in the final sense, a theft from those who hunger and are not
fed, those who are cold and are not clothed. -Dwight D. Eisenhower

[Thomas]

>

Untested, but you can attach functions to intrinsic events thusly:

CellPostcodeTek st.onblur = function (){
call_zoekgemeen te_byID('p_plaa ts_sys_vest' + v_rowid,
'p_postcode_ves t' + v_rowid,
'p_gemeente_ves t' + v_rowid )
};

This way you have access to the variables created in the rest of your
script.

Hope that helps.

This sure helps me a lot! Thank you for your time and answers. But I
have a new problem now: The variable v_rowid always has the newest
value it was assigned, so the last row is always chosen. :s
Can I add parameters to the function so it always works?

[RobG]

Thomas wrote:

Untested, but you can attach functions to intrinsic events thusly:

CellPostcodeTek st.onblur = function (){
call_zoekgemeen te_byID('p_plaa ts_sys_vest' + v_rowid,
'p_postcode_ves t' + v_rowid,
'p_gemeente_ves t' + v_rowid )
};

This way you have access to the variables created in the rest of your
script.
Hope that helps.

This sure helps me a lot! Thank you for your time and answers. But I
have a new problem now: The variable v_rowid always has the newest
value it was assigned, so the last row is always chosen. :s
Can I add parameters to the function so it always works?

Ah, I suspect this is an issue with closure - because the onblur
function still references the variable v_rowid, it stays in existence
even though it was created in the script. When the onblur runs, it
references the existing value, not what it was when the onblur was
created.

If I knew enough about these things I'd probably rabbit on about
scope chains and how to break them, but I don't. I can think of a
few kludgey was to get around it, but I'm sure there's an elegant
solution (and an explanation that will help both our understanding
of the issue) is RC lurking?

Following is a bit of play code as an example of the specific issue.
It adds 5 rows to a table, generating a row id as it goes. The row
id becomes static, but a reference to the same variable from the
onclick function stays dynamic.

Adding multiple sets of rows creates multiple instances of the
persistent variable 'i' - indicating that the lack of closure is also
eating memory - or am I totally off the track?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Dynamic ID </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function addRows(t){
var cell, i, row, rowId;
for ( i=0; i<5; i++ ){
row = t.insertRow(t.r ows.length-1);
row.id = 'row-' + i;
row.onclick = function () {
alert('row-' + i + '\n' + this.id);
};
cell = document.create Element('td');
cell.appendChil d(document.crea teTextNode(i))
row.appendChild (cell);
}
}
</script>
</head>
<body>

<table border="1">
<tbody id="tbodyA">
<tr>
<td onclick="addRow s(document.getE lementById('tbo dyA'));">
Click me to add rows
</td>
</tr>
</tbody>
</table>
</body>
</html>
--
Rob

[RobG]

Thomas wrote:

Untested, but you can attach functions to intrinsic events thusly:

CellPostcodeTek st.onblur = function (){
call_zoekgemeen te_byID('p_plaa ts_sys_vest' + v_rowid,
'p_postcode_ves t' + v_rowid,
'p_gemeente_ves t' + v_rowid )
};

This way you have access to the variables created in the rest of your
script.
Hope that helps.

This sure helps me a lot! Thank you for your time and answers. But I
have a new problem now: The variable v_rowid always has the newest
value it was assigned, so the last row is always chosen. :s
Can I add parameters to the function so it always works?

I was hoping someone could explain things better, ah well.

Anyhow, the way to break the scope chain is to have the onclick added
by an external function, not an internal one. My post above provides
code to demonstrate the issue, below is a modified version that fixes
it (tested: Firefox, IE).

The trick is to pass values to another function and add the onclick
from there. My guess is that this breaks the chain back to 'i' and
so its literal value is used for the onclick, not the variable
reference.

At the bottom I have added what I think will work for your case.

/******** Demo fix *************** **/

<script type="text/javascript">
function addRows(t){
var cell, row, rowId,
i = t.rows.length,
j = i + 5;
for ( ; i<j; i++ ){
row = t.insertRow(i);
row.id = 'row-' + i;
addClick(row,i) ;
cell = document.create Element('td');
cell.appendChil d(document.crea teTextNode(i))
row.appendChild (cell);
}
}

function addClick(x,y){
x.onclick = function() {
alert('this.id: ' + this.id + '\nstatic value: row-' + y)};
}
</script>

/******** Your fix *************** **/

function .... {
...

addOnBlur(CellP ostcodeTekst,
'p_plaats_sys_v est' + v_rowid,
'p_postcode_ves t' + v_rowid,
'p_gemeente_ves t' + v_rowid );

...
}

// Outside the above function
function addOnBlur(Postc odeTekst, plaats_sys, postcode, gemeente){
PostcodeTekst.o nblur = function (){
call_zoekgemeen te_byID( plaats_sys, postcode, gemeente )
};
}

Hope that does the trick (untested of course!).
--
Rob