By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,458 Members | 1,003 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,458 IT Pros & Developers. It's quick & easy.

Problem assigning onchange event handler to dynamically created select control in IE

P: 3
I'm using following code:

Expand|Select|Wrap|Line Numbers
  1. function cloneRow(tBodyId, sourceRowId)
  2. {
  3.     var obj = document.getElementById(tBodyId);
  4.     if(obj.tagName != 'TBODY')
  5.     {
  6.         for(var i = 0; i < obj.childNodes.length; i++)
  7.         {
  8.             if(obj.childNodes[i].tagName == 'TBODY')
  9.             {
  10.                 obj = obj.childNodes[i];
  11.                 break;
  12.             }
  13.         }
  14.     }
  15.     var cloneSource = document.getElementById(sourceRowId);
  16.     var cloneRow = cloneSource.cloneNode(true);
  17.     var rowCount = -1; //Assuming that we have header row and we don't need it
  18.     for(var i = 0; i<obj.childNodes.length;i++)
  19.     {
  20.         if(obj.childNodes[i].tagName == 'TR')
  21.         {
  22.             rowCount++;
  23.         }
  24.     }
  25.     rowCount++;
  26.     cloneRow.id = 'row'+rowCount;
  27.     cloneRow = obj.appendChild(cloneRow);
  28.     var cellCount = 0;
  29.     var tmpString, tmpString2, replaceString;
  30.     var tmpClick;
  31.     var tmpIdx1, tmpIdx2;
  32.     for(var i = 0; i < cloneRow.childNodes.length; i++)
  33.     {
  34.         if(cloneRow.childNodes[i].tagName == 'TD')
  35.         {
  36.             cellCount++;
  37.             for(var j = 0; j < cloneRow.childNodes[i].childNodes.length; j++)
  38.             {
  39.                 if(cloneRow.childNodes[i].childNodes[j].tagName == 'INPUT')
  40.                 {
  41.                     cloneRow.childNodes[i].childNodes[j].id = cloneRow.childNodes[i].childNodes[j].type+'_'+rowCount+'_'+cellCount;
  42.                     try
  43.                     {
  44.                         if (cloneRow.childNodes[i].childNodes[j].type != 'button') 
  45.                         {
  46.                             cloneRow.childNodes[i].childNodes[j].value = '';                        
  47.                         } 
  48.                         else if (cloneRow.childNodes[i].childNodes[j].value == ' ... ') 
  49.                         {
  50.                             tmpClick = new String(cloneRow.childNodes[i].childNodes[j].onclick);
  51.                             tmpIdx1 = tmpClick.indexOf('rowNum=');
  52.                             tmpIdx2 = tmpClick.indexOf('&',tmpIdx2);
  53.                             if(tmpIdx1>=0 || tmpIdx2>=0)
  54.                             {
  55.                                 tmpString2 = tmpClick.slice(tmpIdx1,tmpIdx2);
  56.                                 tmpIdx1 = 0;
  57.                                 tmpIdx2 = tmpString2.indexOf('=');
  58.                                 replaceString = tmpString2.slice(tmpIdx1,tmpIdx2);
  59.                                 replaceString +='='+rowCount;
  60.                                 tmpClick = tmpClick.replace(tmpString2,replaceString);
  61.                                 tmpClick = tmpClick.replace('onclick','');
  62.                                 eval('cloneRow.childNodes[i].childNodes[j].onclick = '+tmpClick);
  63.                             }
  64.                         }
  65.                     }
  66.                     catch(err)
  67.                     {
  68.                         //Do nothing
  69.                         alert('Oops: '+err.message+' '+err.description);
  70.                     }
  71.                     try
  72.                     {
  73.                         cloneRow.childNodes[i].childNodes[j].checked = false;
  74.                     }
  75.                     catch(err)
  76.                     {
  77.                         //Do nothing
  78.                         alert('Oops: '+err.message+' '+err.description);
  79.                     }
  80.                 }
  81.                 else if((cloneRow.childNodes[i].childNodes[j].tagName != null))
  82.                 {
  83.                     tmpString = new String(cloneRow.childNodes[i].childNodes[j].tagName);
  84.                     cloneRow.childNodes[i].childNodes[j].id = tmpString.toLowerCase()+'_'+rowCount+'_'+cellCount;
  85.                     try
  86.                     {
  87.                         cloneRow.childNodes[i].childNodes[j].selectedIndex = 0;
  88.                         tmpClick = new String(cloneRow.childNodes[i].childNodes[j].onchange);
  89.                         tmpIdx1 = tmpClick.indexOf('rowNum=');
  90.                         tmpIdx2 = tmpClick.indexOf('&',tmpIdx2);
  91.                         if(tmpIdx1>=0 || tmpIdx2>=0)
  92.                         {
  93.                             tmpString2 = tmpClick.slice(tmpIdx1,tmpIdx2);
  94.                             tmpIdx1 = 0;
  95.                             tmpIdx2 = tmpString2.indexOf('=');
  96.                             replaceString = tmpString2.slice(tmpIdx1,tmpIdx2);
  97.                             replaceString +='='+rowCount;
  98.                             tmpClick = tmpClick.replace(tmpString2,replaceString);
  99.                             tmpClick = tmpClick.replace('onchange','');
  100.                             tmpClick = tmpClick.replace('anonymous','');
  101.                             eval('document.getElementById(\''+cloneRow.childNodes[i].childNodes[j].id+'\').onchange = '+tmpClick);
  102.                         }
  103.                     }
  104.                     catch(err)
  105.                     {
  106.                         //Do nothing
  107.                         alert('Oops: '+err.message+' '+err.description);
  108.                     }
  109.                 }
  110.             }
  111.         }
  112.     }
  113. }
and it works just fine in Firefox and Opera (last versions), but fails to work correctly in IE (6 and 7). While debugging, I've output the properties of newly created inputs and select boxes and am getting nothing, like outputting id gives empty id, onchange and onclick handler empty either, though, i've assigned them in code, taking them from clone source.
Notes: for building table i used following scheme of naming:
cell id: cell_Row_Cell, where Row is row number and Cell is cell number
input/select id: Type_Row_Cell, where Type is type of input or select for select control, Row is row number and Cell is cell number.

Any advises, corrections?
Aug 10 '07 #1
Share this Question
Share on Google+
1 Reply

acoder
Expert Mod 15k+
P: 16,027
Perhaps using IE's event method (attachEvent) will do the trick.
Jan 8 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.