I just downloaded the project, compiled it and ran it right out of the box and when I put the mouse pointer over or remove the mouse pointer from either MenuItem in the menu demo, I generate this error:
Thanks for your reply. I'm not that knowlegable about javascript, but I went into the debugger and I am supplying the stack trace below. In the last function "updateClassName", the element is undefined. As I walked up the tree, I noticed that in the function
"highlight" the value of this.anchor is undefined. When I look at the innerHTML of "this", it contains all of the content of the full menu's "ul" tag. Each "li" tag inside this innerHTML contains an anchor. I don't known what this means. Any pointers?
Stack trace from oldest:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);
if (!menuItem) {
return;
} menuItem.mouseover();
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
------->
mouseover: function() {
var id = this.container.pendingMouseoutId;
if (id) {
window.clearTimeout(id);
this.container.pendingMouseoutId = null;
} this.hover(true);
if (this.container.menu.get_focused()) {
this.container.navigateTo(this);
}
},
------->
hover: function(hovering) {
if (hovering) {
var currentHoveredItem = this.container.hoveredMenuItem;
if (currentHoveredItem) {
currentHoveredItem.hover(false);
}
var currentFocusedItem = this.container.focusedMenuItem;
if (currentFocusedItem && currentFocusedItem !== this) {
currentFocusedItem.hover(false);
}
this.applyUp(function(menuItem) {
if (menuItem.childMenu && !menuItem.childMenu.get_displayed()) {
menuItem.childMenu.show();
}
});
this.container.hoveredMenuItem = this; this.highlight(true); }
else {
var menuItem = this;
while (menuItem) {
menuItem.highlight(false);
if (menuItem.childMenu) {
if (!menuItem.childMenu.isStatic()) {
menuItem.childMenu.hide();
}
}
menuItem = menuItem.parentMenu.parentMenuItem;
}
}
},
Remember, this is the solution right out of the box. I simply opened the solution, built it, and ran it. when I mouse over either of the two menu items I get hit with this error.
When I look at the debugger, the error is happening here:
updateClassName: function(operation, element, name, value) {
this[operation + 'String'](
function() { return element.className; <------- on this line I get 'element.className' is null or not an object
},
function(newValue) {
element.className = newValue;
},
value
);
},
When I trace the stack back up to the root, the error is happening here:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);
if (!menuItem) {
return;
} menuItem.mouseover(); <------- it all starts with this mouseover event handler
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
I then put a breakpoint here and re-ran:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this); <------- breakpoint here
if (!menuItem) {
return;
}
menuItem.mouseover();
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
When I break, I add 'this' to the watch list and it appears to be the outter 'ul' of the menu. I determined this from the outerHTML:
If I step I see that it populates the menuItem variable so that it will not exit at this point.
Here I am getting curious. I would have thought the outer 'ul' would represent the entire menu an not a menuItem.
Could this be part of the problem?
I also notice that the '_anchor' property is 'undefined'. I would expect this since all of the anchors are children of 'li' objects and not of the 'ul' objects. This is important because later in this function the menuItem.mouseOver() function is called
which expects there to be an anchor.
Ultimately, down the call chain the null error happens because this anchor does not exist.
I don't know where to go from here. hopefully, someone with knowledge of the inner workings can give me a lead.
Q) Is the outer 'ul' object supposed to be a 'menuItem'?
No) Why does the line "var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);" return a value when 'this' is a 'ul'?
Yes) Does a menuItem have to contain an anchor?
Yes) Why doesn't the outer 'ul' have an anchor?
No) Why doesn't 'highlight: function(highlighting)' check for the existance of 'this._anchor' before the line:
"Sys.WebForms.Menu._domHelper.appendCssClass(this._anchor, 'highlighted');"
Did you ever find a solution to this problem? I am working on additions to an ASP.NET site, and the menu on it is now returning this error. I haven't changed any of the code for the menu, so I am wondering if the problem is due to a configuration option
or a conflict with JQuery or AJAX.
Thanks!
EDIT: I came here from a search engine, which only displayed the first post, not any replies. Strange. Anyway, setting the <pages controlRenderingCompatibilityVersion="3.5"> instead of 4.0 got it working again. That's what I get for assuming that everything
needed to be updated to 4.0 when the project was upgraded from VS 2008 to VS 2010.
Dogulas
Member
23 Points
42 Posts
'element.className' is null or not an object
Jul 22, 2010 10:38 PM|LINK
Hi,
I just downloaded the project, compiled it and ran it right out of the box and when I put the mouse pointer over or remove the mouse pointer from either MenuItem in the menu demo, I generate this error:
'element.className' is null or not an object
It points to this javascript method:
updateClassName: function(operation, element, name, value) {
this[operation + 'String'](
function() {
return element.className;
},
function(newValue) {
element.className = newValue;
},
value
);
},
I don't know where thia is. It doesn't seem to be in any of the js files in the project. Has anyone else run across this? Any ideas?
Thanks,
Dogulas
rChordata, LLC
sansan
All-Star
53942 Points
8147 Posts
Re: 'element.className' is null or not an object
Jul 23, 2010 02:02 AM|LINK
your are trying to assign some css class name to the element which is menu item here when it is null
if you can debug the code, check to see the properties of the element int function()
that give you more idea why you are getting that errort
Dogulas
Member
23 Points
42 Posts
Re: 'element.className' is null or not an object
Jul 23, 2010 12:57 PM|LINK
Hi,
Thanks for your reply. I'm not that knowlegable about javascript, but I went into the debugger and I am supplying the stack trace below. In the last function "updateClassName", the element is undefined. As I walked up the tree, I noticed that in the function "highlight" the value of this.anchor is undefined. When I look at the innerHTML of "this", it contains all of the content of the full menu's "ul" tag. Each "li" tag inside this innerHTML contains an anchor. I don't known what this means. Any pointers?
Stack trace from oldest:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);
if (!menuItem) {
return;
}
menuItem.mouseover();
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
------->
mouseover: function() {
var id = this.container.pendingMouseoutId;
if (id) {
window.clearTimeout(id);
this.container.pendingMouseoutId = null;
}
this.hover(true);
if (this.container.menu.get_focused()) {
this.container.navigateTo(this);
}
},
------->
hover: function(hovering) {
if (hovering) {
var currentHoveredItem = this.container.hoveredMenuItem;
if (currentHoveredItem) {
currentHoveredItem.hover(false);
}
var currentFocusedItem = this.container.focusedMenuItem;
if (currentFocusedItem && currentFocusedItem !== this) {
currentFocusedItem.hover(false);
}
this.applyUp(function(menuItem) {
if (menuItem.childMenu && !menuItem.childMenu.get_displayed()) {
menuItem.childMenu.show();
}
});
this.container.hoveredMenuItem = this;
this.highlight(true);
}
else {
var menuItem = this;
while (menuItem) {
menuItem.highlight(false);
if (menuItem.childMenu) {
if (!menuItem.childMenu.isStatic()) {
menuItem.childMenu.hide();
}
}
menuItem = menuItem.parentMenu.parentMenuItem;
}
}
},
------->
highlight: function(highlighting) {
if (highlighting) {
this.applyUp(function(menuItem) {
menuItem.parentMenu.parentMenuItem.highlight(true);
},
function(menuItem) {
return !menuItem.parentMenu.isStatic() && menuItem.parentMenu.parentMenuItem;
}
);
Sys.WebForms.Menu._domHelper.appendCssClass(this._anchor, 'highlighted');
}
else {
Sys.WebForms.Menu._domHelper.removeCssClass(this._anchor, 'highlighted');
this.setTabIndex(-1);
}
},
------->
appendCssClass: function(element, value) {
this.updateClassName('append', element, name, value);
},
------->
updateClassName: function(operation, element, name, value) {
this[operation + 'String'](
function() {
return element.className;
},
function(newValue) {
element.className = newValue;
},
value
);
},
------->
appendString: function(getString, setString, value) {
var currentValue = getString();
if (!currentValue) {
setString(value);
return;
}
var regex = this._regexes.getRegex('(^| )' + value + '($| )');
if (regex.test(currentValue)) {
return;
}
setString(currentValue + ' ' + value);
},
------->
updateClassName: function(operation, element, name, value) {
this[operation + 'String'](
function() {
return element.className;
},
function(newValue) {
element.className = newValue;
},
value
);
},
The watch for element is undefined:
element undefined Undefined
rChordata, LLC
Dogulas
Member
23 Points
42 Posts
Re: 'element.className' is null or not an object
Jul 24, 2010 04:19 PM|LINK
Hi,
This is really kicking my butt.
Remember, this is the solution right out of the box. I simply opened the solution, built it, and ran it. when I mouse over either of the two menu items I get hit with this error.
When I look at the debugger, the error is happening here:
updateClassName: function(operation, element, name, value) {
this[operation + 'String'](
function() {
return element.className; <------- on this line I get 'element.className' is null or not an object
},
function(newValue) {
element.className = newValue;
},
value
);
},
When I trace the stack back up to the root, the error is happening here:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);
if (!menuItem) {
return;
}
menuItem.mouseover(); <------- it all starts with this mouseover event handler
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
I then put a breakpoint here and re-ran:
Sys.WebForms.MenuItem._onmouseover = function(e) {
var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this); <------- breakpoint here
if (!menuItem) {
return;
}
menuItem.mouseover();
Sys.WebForms.Menu._domHelper.cancelEvent(e);
};
When I break, I add 'this' to the watch list and it appears to be the outter 'ul' of the menu. I determined this from the outerHTML:
outerHTML "
<UL style="POSITION: relative; FLOAT: left; cssFloat: left" role=menuitem Sys.WebForms.Menu.Mapping="%2"><LI-Menu-WithChildren><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic')">Music</A>
<UL>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Classical')">Classical</A> </LI>
<LI-Menu-WithChildren><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock')">Rock</A>
<UL>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock\\Electric')">Electric</A> </LI>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Rock\\Acoustical')">Acoustical</A> </LI></UL></LI>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMusic\\Jazz')">Jazz</A> </LI></UL></LI>
<LI-Menu-WithChildren><SPAN-Menu-NonLink>Movies</SPAN>
<UL>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Action')">Action</A> </LI>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Drama')">Drama</A> </LI>
<LI-Menu-Leaf><A-Menu-Link href="javascript:__doPostBack('EntertainmentMenu','bMovies\\Musical')">Musical</A> </LI></UL></LI></UL>" String
If I step I see that it populates the menuItem variable so that it will not exit at this point. Here I am getting curious. I would have thought the outer 'ul' would represent the entire menu an not a menuItem. Could this be part of the problem?
I also notice that the '_anchor' property is 'undefined'. I would expect this since all of the anchors are children of 'li' objects and not of the 'ul' objects. This is important because later in this function the menuItem.mouseOver() function is called which expects there to be an anchor.
Ultimately, down the call chain the null error happens because this anchor does not exist.
I don't know where to go from here. hopefully, someone with knowledge of the inner workings can give me a lead.
Thanks,
Dogulas
rChordata, LLC
Dogulas
Member
23 Points
42 Posts
Re: 'element.className' is null or not an object
Jul 24, 2010 07:28 PM|LINK
Here is a question tree:
Q) Is the outer 'ul' object supposed to be a 'menuItem'?
No) Why does the line "var menuItem = Sys.WebForms.Menu._elementObjectMapper.getMappedObject(this);" return a value when 'this' is a 'ul'?
Yes) Does a menuItem have to contain an anchor?
Yes) Why doesn't the outer 'ul' have an anchor?
No) Why doesn't 'highlight: function(highlighting)' check for the existance of 'this._anchor' before the line:
"Sys.WebForms.Menu._domHelper.appendCssClass(this._anchor, 'highlighted');"
rChordata, LLC
shalahu
Member
2 Points
1 Post
Re: 'element.className' is null or not an object
Aug 18, 2010 06:48 AM|LINK
I met this issue too, when select target framework 4.0 in my project Template. 2.0 ~ 3.5 all work fine.
here a link about ASP.NET 4.0 new featrues or improvements, one is CSS Improvements http://www.asp.net/LEARN/whitepapers/aspnet4#0.2__Toc253429267
I guess that's the reason 4.0 failed and just add this in Web.config of 4.0 web project.
<system.web>
<pages controlRenderingCompatibilityVersion="3.5"/>
</system.web>
Everything works again.
Hope it help~
Sam
MrGreg
Member
2 Points
1 Post
Re: 'element.className' is null or not an object
Jul 26, 2011 07:10 PM|LINK
Hi,
Did you ever find a solution to this problem? I am working on additions to an ASP.NET site, and the menu on it is now returning this error. I haven't changed any of the code for the menu, so I am wondering if the problem is due to a configuration option or a conflict with JQuery or AJAX.
Thanks!
EDIT: I came here from a search engine, which only displayed the first post, not any replies. Strange. Anyway, setting the <pages controlRenderingCompatibilityVersion="3.5"> instead of 4.0 got it working again. That's what I get for assuming that everything needed to be updated to 4.0 when the project was upgraded from VS 2008 to VS 2010.