Login Register

IE6 Error "Object required" in my custom widget

I originally created a custom widget in dojo .4 version. My old widget worked both in FF as well as IE6.

Recently I migrated the widget to Dojo 1.0. I have having trouble gettting my widget to work in IE. It works OK in Firefox.

Here is my template code:

<div dojoAttachPoint="LogTableDomNode"> </div>

Here is the code I have in the fillInTemplate that was included inside the widget. The objective of this code was to replace the above template code with a HTML Table.

fillInTemplate: function() {
		var table = document.createElement("table");
		table.setAttribute("id","logTableID");		
		table.setAttribute("border","1");		
		var row = document.createElement("tr");
		table.appendChild(row);
		var thelement = document.createElement("th");
		thelement.setAttribute("align","left");
		row.appendChild(thelement);
		var dataTextElement = document.createTextNode("Creation Time");
		thelement.appendChild(dataTextElement);		
		var element = document.createElement("th");
		element.setAttribute("align","left");
		row.appendChild(element);
		var dataElement = document.createTextNode("Severity");
		element.appendChild(dataElement);
		var element = document.createElement("th");
		element.setAttribute("align","left");
		row.appendChild(element);
		var dataElement = document.createTextNode("Message Text");
		element.appendChild(dataElement);
		this.LogTableDomNode.appendChild(table);
	}

Since the old "fillInTemplate" no longer available in the version 1.0 I changed my postCreat() method to call the above function.

It works ok in FF.

I get "Object required" error in IE6.

Can anyone help me why?

If I'm not mistaken, IE

If I'm not mistaken, IE requires dynamically created TR's to be added to a TBODY node instead of directly adding it to a TABLE. I've fallen in this pitfall before. Therefore you need to create and add a TBODY node in your function. Alternatively, you could use the specialized DOM functions insertRow (on TABLEs), insertCell (on TRs) etc., which would result in less code. But I believe they are slower than createElement/appendChild, especially on IE.

Btw., I wonder why you use fillInTemplate anyway. Since you call it (solely?) in postCreate and it seems to generate constant markup, you could add it to the template code directly. Additionally, I think IE (or the template parsing function) is more forgiving about missing TBODYs in templates, so you don't have to worry about that.

Hi Helmchen, Thanks for your

Hi Helmchen, Thanks for your quick response. I did not know about the IE exceptions to dynamic rendering of HTML Tables.

Why I'm using fillInTemplate:
I was trying to create a dynamic HTML table based on messages from cometd engine in my widget. I wanted to generate an empty table with no rows except for Header when page is first refreshed. Then for every message coming through I wanted to add a new row to the table. I wanted to set the limit of HTML table as say 7 rows. So when the eigth message comes I'll delete the first row and add 8th message to the end of the table. I couldn't find a HTML table widget that could do this work for me. So I decided to put all the HTML table creation logic inside my cometd widget.

Still I have the same problem after incorporating your changes. Here is the latest code..

fillInTemplate: function() {

		var table = document.createElement("table");
		table.setAttribute("id","logTableID");		
		table.setAttribute("border","1");

		var tbody = document.createElement("tbody");
		table.appendChild(tbody);
		
		var row = document.createElement("tr");
		tbody.appendChild(row);
		
		var thelement = document.createElement("th");
		thelement.setAttribute("align","left");
		row.appendChild(thelement);
		var dataTextElement = document.createTextNode("Creation Time");
		thelement.appendChild(dataTextElement);
		
		var element = document.createElement("th");
		element.setAttribute("align","left");
		row.appendChild(element);
		var dataElement = document.createTextNode("Severity");
		element.appendChild(dataElement);
		var element = document.createElement("th");
		element.setAttribute("align","left");
		row.appendChild(element);
		var dataElement = document.createTextNode("Message Text");
		element.appendChild(dataElement);

		this.LogTableDomNode.appendChild(table);
	}

I notice the error right after the execution of line "this.LogTableDomNode.appendChild(table);". Do you think I might be using "this.logTableDomNode" correctly. DOJO documentation say's I can refer dojo Attachpoints as DOM nodes. What do you think?

Let me know what I might be doing wrong. I'll retry the above with DOM Table functions sometime next couple of days.

I appreciate your help.

Yes, dojoAttachPoints in

Yes, dojoAttachPoints in Templates are DOM nodes (or Widgets, in case of a specified dojoType and widgetsInTemplate set to true).

At first glance I dont' see any error in your code. Is it still working in FF? What's the error message you're getting? Have you checked if this.LogTableDomNode does exist (via an alert or one of Microsofts crappy debuggers)?

Another famous mistake in IE are trailing commas in json objects, so make sure to get rid of them (don't know if fillInTemplate is the last function in your widget, but if this is case the error message would be at a comma after the closing bracket of this function).