Code that works for FF, not IE

[Agent Moose]

I have created a Code Index, that basicly takes topics from a page and sorts them to make it easy for viewers to read. But, it only works on FF, anyone know why?


function code_index_v3() {
$(function() {
if(location.href.match(/.smcindex/i)){
var title = "SMC Code Index V3"
var board = "8"
var index = "smcindex"
};
if(location.href.match(/.zbindex/i)){
var title = "ZetaBoard Code Index V3"
var board = "27"
var index = "zbindex"
};
if(location.href.match(/.smcindex/i)||location.href.match(/.zbindex/i)){
document.title = title;
navigation = $("div.nav").html();
pages = $("tr td.middletext").html();
online = $("tr.windowbg2 td[colspan='8']").html();
$("#bodyarea,img[alt='New'],#news_box").hide();
$("#bodyarea").before("<br/><div class='nav' style='font-size: smaller; margin-bottom: 2ex; margin-top: 2ex;'>"+navigation+" > <b><a class='nav' href='"+location.pathname+"/index.php/board,"+board+".0."+index+"/sort,subject.html'>Code Index</a></b></div><br/><center>Search the Code Index<form id='searchform' name='searchform' accept-charset='ISO-8859-1' method='post' action='http://smcodes.smfforfree3.com/index.php?action=search2'><input type='text' size='40' name='search'/><input id='brd"+board+"' type='hidden' checked='checked' value='"+board+"' name='brd["+board+"]'/><input type='submit' value='Search' name='submit'/></form></center><br/><div class='tborder'><div class='catbg' style='padding: 5px 5px 5px 10px;'>"+title+" - <span class='smalltext'>Sort By: <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,replies/desc.html'>Replies</a> | <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,views/desc.html'>Views</a> | <a href='"+location.pathname+"/board,"+board+".0."+index+"/sort,subject.html'>Subject</a></span></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+online+"</td></tr></table></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+pages+"</td></tr></table></div><div><table width='100%' border='0' cellspacing='1' cellpadding='4' id='code'></table></div><div><table width='100%' cellpadding='1' cellspacing='0'><tr><td class='titlebg2' colspan='5'>"+pages+"</td></tr></table></div></div>")
var codes = $("span");
for(s=0;s<codes.length;s++){
if(codes[s].id.match(/msg/i)&&$(codes[s]).parent("td.windowbg").html()){
var topic = $(codes[s]).html();
var creator = $(codes[s]).parent().next().html();
document.getElementById("code").innerHTML += "<tr><td class='windowbg' width='50%'>"+topic+"</td><td class='windowbg' width='50%'>"+creator+"</td></tr>";
};};
$("a").each(function(){
if(this.href.match(/\/sort,/i)) {
this.href = this.href.replace("/sort,subject","."+index+"/sort,subject");
this.href = this.href.replace("/sort,starter","."+index+"/sort,starter");
this.href = this.href.replace("/sort,replies","."+index+"/sort,replies");
this.href = this.href.replace("/sort,views","."+index+"/sort,views");
};});
$("a").each(function(){if(this.href.match("#bot")&&this.href.match("."+index+"/")){$(this).hide(); }});
};
$("a").each(function(){if(this.href.match(/board,/i)){
this.href = this.href.replace("board,23.0.html","board,8.0.smcindex/sort,subject.html");
this.href = this.href.replace("board,28.0.html","board,27.0.zbindex/sort,subject.html");
};});
});};
code_index_v3();

[jscheuer1]

What's $? There are various frameworks that use that, each somewhat differently. It looks like it's returning the object, which in some places in the code looks like overkill. But, without the full code, there is no way to be sure. Even then it could be a nightmare tracking it down.

If you provide a link to a demo of the problem, that would probably be our best shot at helping.

[BYK]

The framework here is the jQuery framework I think. And since jQuery is completely cross-browser as far as I know, it should have something with your custom codes.

[jscheuer1]

The framework here is the jQuery framework I think. And since jQuery is completely cross-browser as far as I know, it should have something with your custom codes.

The prototype.js framework, or at least some of its optional modules use $ as well, perhaps other frameworks. So, this is not as simple as you make out. Probably it isn't the specific framework that is to blame, but how it is being used or even some other part of the code. It could be due to having two conflicting frameworks associated with the page though.

These are just a few of the reasons why a link to the problem page itself would be the best bet at resolving this.

[BYK]

I never told that I can solve the problem without the link to the problem page ;)

[jscheuer1]

I never told that I can solve the problem without the link to the problem page ;)

I never said you did. My post was directed to Agent Moose. That is who we are trying to help here. :p

[BYK]

Sorry, with a quote from me, I thought you were referring to me :)

So, hey Agent Moose, give us the link man :D

[xyzweb]

I have created a Code Index, that basicly takes topics from a page and sorts them to make it easy for viewers to read. But, it only works on FF, anyone know why?

Yes, you have encountered the IE .innerHTML Table bug.

For info on this bug, and what elements it will affect (e.g. not work at all on) see this bug report.

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

good luck!

[jscheuer1]

Yes, you have encountered the IE .innerHTML Table bug.

http://webbugtrack.blogspot.com/2007/12/bug-210-no-innerhtml-support-on-tables.html

Very cool, um knowing that, not the fact that the bug exists. As an illustration/test, I used this in the body:


<body>
<table><tr>
<td>Hi</td>
</tr>
</table>
<input type="button" onclick="test();">
</body>

These three test functions failed:


function test(){
document.getElementsByTagName('table')[0].innerHTML+='<tr><td>Bye</td></tr>';
}


function test(){
document.getElementsByTagName('table')[0].firstChild.innerHTML+='<tr><td>Bye</td></tr>';
}

which (if it worked) would have been adding to the (assumed) tbody using innerHTML;


function test(){
var tr=document.createElement('tr');
var td=document.createElement('td');
td.appendChild(document.createTextNode('Bye'));
tr.appendChild(td);
document.getElementsByTagName('table')[0].appendChild(tr);
}

which attempts to append directly to the table using the DOM.

This worked:


function test(){
var tr=document.createElement('tr');
var td=document.createElement('td');
td.appendChild(document.createTextNode('Bye'));
tr.appendChild(td);
document.getElementsByTagName('table')[0].firstChild.appendChild(tr);
}

appending to the (assumed) tbody using the DOM.