Page 1 of 1

debugging in IE

Posted: Wed Feb 07, 2007 6:24 am
by garry27
can anyone think why IE throws the following error in the script below when it works in ff: html file: unknown runtime error (line 63 at bottom)

Code: Select all

function addPubFn(pubID, pubName, pubPostcode)
{ 
  var tbody = document.getElementById('publist3').getElementsByTagName("tbody")[0];	  
  var currentRows = new Array;
  var newRows;
  	 
  //if table full, exit fn
  if (tbody.rows.length <10)
  {         
   for (var i = 0; i < tbody.rows.length; i++) {
    if (tbody.getElementsByTagName("tr")[i].getElementsByTagName("td")[0]. 
	firstChild.nodeValue == pubID) 
	{	
     return; 
	}
   } 
	    
  //create array of current table elements
  for (var i = 0; i < tbody.rows.length; i++) 
  {			
   var td1Text = tbody.getElementsByTagName("tr")[i].
                 getElementsByTagName("td")[0].firstChild.nodeValue
   var td2Text = tbody.getElementsByTagName("tr")[i].
		         getElementsByTagName("td")[1].firstChild.nodeValue
   var td3Text = tbody.getElementsByTagName("tr")[i].
	             getElementsByTagName("td")[2].firstChild.nodeValue		
   currentRows[i] = "<tr onclick='thisRow(this)'><td>" + td1Text + "</td><td>"
		            + td2Text + "</td><td>" + td3Text + "</td></tr>";		  
  }
  
  //join table rows  
  currentRows=currentRows.join("");	
  //add new row to end of current rows
  var newRows = currentRows + "<tr onclick='thisRow(this)'><td>" + pubID + 
                "</td><td>" + pubName + "</td><td>" + pubPostcode + "</td></tr>";
  //add new rows to table			
  tbody.innerHTML = newRows;      ///////////////line 63/////////////
  			
  }
  return false;			
} 

Posted: Wed Feb 07, 2007 7:58 am
by superdezign
Your variable "tbody" is an array, correct? I don't think arrays have an innerHTML attribute.

Posted: Wed Feb 07, 2007 3:42 pm
by garry27
no, tbody is a tagname of the html table. i.e.

Code: Select all

<table>
   <thead>
   </thead>
   <tbody>
   </tbody>
</table>

Posted: Fri Feb 09, 2007 6:01 am
by garry27
anyone have any ideas on this? it's really important.

Posted: Fri Feb 09, 2007 6:37 am
by choppsta
From looking at your code it looks like your function adds a row onto an existing table.
You're using DOM functions to get the data out of the table, but then using innerHTML to put it all back.
Can't you just use the DOM functions (appendChild(), etc.) to add the new row on without having to mess with what's already there? Would probably make the code a lot simpler too.

Posted: Fri Feb 09, 2007 7:05 am
by choppsta
I'm bored and in a good mood, here you go:

Code: Select all

function addPubFn(pubID, pubName, pubPostcode)
{
	var tbody = document.getElementById('publist3').getElementsByTagName('tbody')[0];      

	//if table full, exit fn
	if (tbody.rows.length >= 10) { return false;}

	// if pubID is in the table, exit
	for (var i = 0; i < tbody.rows.length; i++) 
	{
		if (tbody.getElementsByTagName('tr')[i].getElementsByTagName('td')[0].firstChild.nodeValue == pubID)
		{       
			return false;
		}
	}

	// Create the new row
	var newRow = document.createElement('tr');
	newRow.onclick = function() { thisRow(this);};

	var cell1 = document.createElement('td');
	cell1.appendChild(document.createTextNode(pubID));
	var cell2 = document.createElement('td');
	cell2.appendChild(document.createTextNode(pubName));
	var cell3 = document.createElement('td');
	cell3.appendChild(document.createTextNode(pubPostcode));

	newRow.appendChild(cell1);
	newRow.appendChild(cell2);
	newRow.appendChild(cell3);

	// Add it to the table
	tbody.appendChild(newRow);

	return false;   
}

Posted: Sat Feb 10, 2007 4:04 am
by garry27
thanks for that chopsta but unfortunateley i already tried it that way.

using innerhtml was a last resort as it was the only way i could attach the event to the table rows. i tried using addeventlistener and addevent but they don't allow you to pass parameters to a function. onclick didn't work for me either.

Posted: Sat Feb 10, 2007 4:20 am
by garry27
my mistake. working great now-thanks for the code :wink: