Description

Summary: if several tiddlers use the same name but with different capitalization, IE has problems displaying more than one of those tiddlers at the same time.

Submitted by "CheeseshireCat?" on TiddlyWiki GoogleGroup? http://groups.google.com/group/TiddlyWiki/browse_frm/thread/49a45b2538d4fb26/ee061a2421d663dc

To reproduce:

Open an empty TW2.3.0, edit MainMenu? and enter:

FooBar
FoObar
FoobAr

Using this main menu, click on "FooBar?", it opens the "FooBar?" tiddler. Click on "FoObar?", it zooms to the already open "FooBar?" tiddler instead of opening the "FoObar?" one. Same with clicking on "FoobAr?". Close "FooBar?" and click on "FoObar?", "FoObar?" opens, and clicking on others zooms to it. Close "FoObar?" and click on "FoobAr?", "FoobAr?" opens, and clicking on others zooms to it.

Diagnosis:

story.displayTiddler() uses document.getElementById(id) to determine if the tiddler is already displayed by looking for the rendered tiddler's DOM element, whose id is composed of the tiddler title from the link, with a prefix of "tiddler" (e.g., "tiddlerFooBar", "tiddlerFoObar", "tiddlerFoobAr", etc.). If the tiddler element is not found, the TW core creates one and renders the tiddler content into it. However, if a tiddler element with that id *is* found, the core simply 'zooms' to it without re-rendering... which is the correct behavior.

However... in IE4 through IE7, the document.getElementById(...) function is ***case-INsensitive***, which is contrary to the W3C spec standards, which clearly indicate that this function is supposed to be case-sensitive. Microsoft even notes this discrepancy in their own documentation:

http://msdn2.microsoft.com/en-us/library/ms536437(VS.85).aspx

Their note also includes a link to the IE8 (beta) references, which indicates that in IE8, the function will finally conform to the W3C spec, and *will* be case-sensitive (as it should have been all along!). Note that this behavior "requires IE8 mode compatibility" (which, thankfully, will be the default when IE8 is finally released).

Suggested work-around:

Hijack getElementById() and, when looking for the id of a rendered tiddler, manually scan through the children of "tiddlerDisplay" (the rendered tiddler elements) to find an exact (case sensitive) matching id.

Code (copied from http://www.TiddlyTools.com/#CoreTweaks)

if (config.browser.isIE) {
document.coreTweaks_coreGetElementById=document.getElementById;
document.getElementById=function(id) {
	var e=document.coreTweaks_coreGetElementById(id);
	if (!e || !e.parentNode || e.parentNode.id!="tiddlerDisplay") return e;
	for (var i=0; i<e.parentNode.childNodes.length; i++)
		if (id==e.parentNode.childNodes[i].id) return e.parentNode.childNodes[i];
	return null;
};
}