473,703 Members | 3,067 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problem with events on dynamically created input fields in internet explorer

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
Jul 23 '05 #1
6 3327
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
Jul 23 '05 #2
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
Jul 23 '05 #3
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
Jul 23 '05 #4
>
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?
Jul 23 '05 #5
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
Jul 23 '05 #6
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
Jul 23 '05 #7

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

Similar topics

7
2304
by: Aaron Prohaska | last post by:
I have just run into a problem where I have a page that posts back to itself to execute code, except when the page does the post back it somehow executes code that is in our home page for the site. The only reason I know that is happening is because I keep track of the pages executed by the user to see how they have traversed the site. Has anyone every seen anything like this before? Regards, Aaron Prohaska
3
1724
by: The Pritchard | last post by:
I want the user to be able to save the information displayed on a dynamically created page. When I write a script like the following: <SCRIPT> winNew = window.open("","test"); winNew.document.writeln("Hello World!"); winNew.document.close(); winNew.focus();
6
2023
by: joe | last post by:
Hi Everyone, could anyone comment on the following problem: I have a textbox being appended to a cell in a table, and am trying to call focus() on like this: <snip> c01.removeChild(answerbox); answerbox=document.createElement('input'); answerbox.addEventListener("change",check_answer,false); answerbox.style.fontSize=FONTSIZE; answerbox.style.backgroundColor=COLOR_ANSWBG;
2
1857
by: niels.froehling | last post by:
Hy; I'm stucked in modifying events to make a multi-select select-input being additive/subtractive only. Because I should offer a solution similar to that select for DAUs (aka. MostIdioticUser) I have to make something else (checkboxes?). It's not that want to fiddle around with events, but it seemed to be the most simply-plug-in-working-no-change-html-php solution.
1
3505
by: Apu Nahasapeemapetilon | last post by:
Hello and thank you in advance for your help. Can anyone think of a reason why this code would work properly on one PC, but not another? I've got a System.Windows.Forms.UserControl that products events which I want to consume (sink) within Internet Explorer. I'm following the instructions at: ms-http://support.microsoft.com/default.aspx?kbid=313891.
7
2340
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. Is that so?
21
29804
by: Leena P | last post by:
i want to basically take some information for the product and let the user enter the the material required to make this product 1.first page test.php which takes product code and displays prodcut anme have used ajax to avoid refreshing of page this works fine 2.now i have created one row with checkbox|select box|text|text|text|text| where in the select box values are fetched from table here also i have used ajax for getting the m_name...
1
2076
by: apstein | last post by:
Hi, I have an HTML form (generated by php) which I am rendering in Internet Explorer 6. My original problem was that if the user submitted the form, and then used the back button to return to the form (desirable ability), then all the fields in the form would reset to their default values, forcing the user to re-enter them to submit the form similarly as previously.
1
4846
by: avpkills2002 | last post by:
I seem to be getting this weird problem in Internet explorer. I have written a code for parsing a XML file and displaying the output. The code works perfectly fine with ffx(Firefox).However is not working in Internet Explorer.(I m using Internet Explorer 6.0). The code is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
0
8759
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8670
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9122
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9017
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
5922
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4687
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3125
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2455
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2070
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.