Modifying DIV in firefox breaks out of for loop?

Javascript weirdness...

[twiggy]

I'm stumped here...

I'm using Google's AJAX Feed API to create an RSS reader widget and it works fine in Internet Explorer. Unfortunately, it doesn't work in Mozilla.

Some background:
For now, I'm creating 5 DIV containers - one for each RSS entry (I'm only requesting 5 results while I get this to work). Then, within those containers, I've got 2 others - one for the date, one for the title.

Whether I use innerHTML or the DOM method of populating these divs - it works fine in IE, and it dies in Firefox. To debug I first put an alert(i) in my for loop and saw that Firefox never got past 0, while IE went through all iterations.

Next, I selectively commented code out of the body of the for loop - finally isolating it to any statement involving modifying my DIV contents.

Here's the function:

function loadRSSFeed(RSSURL, RSSChannel, numEntries) { 
var thisContainer = document.getElementById("chan" + RSSChannel); 
var thisContainerLoading = document.getElementById("chan" + RSSChannel + "_loading"); 
var feed = new google.feeds.Feed(RSSURL); 
feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT); 
feed.setNumEntries(numEntries); 
feed.load(function(result) { 
 if (!result.error) { 
 thisContainerLoading.style.visibility = "hidden"; 
 thisContainerLoading.style.display = "none"; 
 for (var i = 0; i < result.feed.entries.length; i++) { 
 var iplus = i+1; 
var thisEntryContainer = document.getElementById("chan" + RSSChannel + "_" + iplus); 
thisEntryContainer.style.display = "block"; 
thisEntryContainer.style.visibility = "visible"; 
thisEntryContainer.style.clear = "both"; 
 var thisEntryDiv = document.getElementById("chan" + RSSChannel + "_" + iplus); 
 thisEntryDiv.innerHTML = thisEntryDiv.innerHTML + "&nbsp;"; 
 var thisPubDateDiv = document.getElementById("chan" + RSSChannel + "_" + iplus + "_pubDate"); 
 var thisTitleDiv = document.getElementById("chan" + RSSChannel + "_" + iplus + "_title"); 
 var thisDescriptionDiv = document.getElementById("chan" + RSSChannel + "_" + iplus + "_description"); 
 var thisLinkDiv = document.getElementById("chan" + RSSChannel + "_" + iplus + "_link"); 
 var thisEntry = result.feed.entries[i]; 
 var thisTitle = thisEntry.title; 
 var thisLink = thisEntry.link; 
 var thisContent = thisEntry.content; 
 var thisContentSnippet = thisEntry.contentSnippet; 
 var thisPublishedDate = thisEntry.publishedDate; 
 var niceDate = getNiceDate(thisPublishedDate); 
var rssLine = '<a title="' + xml_decode(thisContentSnippet) + '" href=\"' + thisLink + '" target="_blank">' + xml_decode(thisTitle) + '</a>'; 
 thisPubDateDiv.innerHTML = niceDate; 
 thisTitleDiv.innerHTML = rssLine; 
 } 
 } 
}); 
} 

The offending lines are the .innerHTML lines - but changing these to thisPubDateDiv.appendChild() statements (with the proper createTextNode() method called on the text) causes the same issue - Firefox craps out at the first iteration of the loop.

Any help / insight would be greatly appreciated...

[twiggy]

Sorry - the formatting / indenting didn't hold even with PRE tags...

Also, I'm aware that there's some hacky garbage like the iplus thing, but I'm just trying to get a working prototype here :-)

[john_k]

I would guess that the string identifier in the getElementById statement is evaluating differently. I would add these to check it:

alert("chan" + RSSChannel + "_" + iplus + "_pubDate"); //is this the same in both browsers?
alert(thisPubDateDiv); //should say "object" or something similar.

[twiggy]

Interesting, it appears you're onto something.

alert("chan" + RSSChannel + "_" + iplus + "_pubDate"); appears to be the identical in both browsers.

However, alert(thisPubDateDiv); shows null in firefox.

I tried putting the following into a separate variable:
"chan" + RSSChannel + "_" + iplus + "_pubDate"

Then doing: thisPubDateDiv = document.getElementById(testVariable);

That didn't help.

*scratches head*... I can't pin down why this is just yet.. any thoughts?

[john_k]

In no particular order:

Does "chan" + RSSChannel + "_" + iplus + "_pubDate" match the div ID as it actually appears in Firefox view source?

What happens if you remove the underscore characters?

Does the page validate? If one or more tags aren't being closed out, or if things aren't nested correctly, then maybe Firefox is not able to find the DIV.

[WesleyC]

Try downloading Firebug (useful extension for Firefox), then go into the Script tab, find your script file, and set a breakpoint on the line in question. Then you can mouseover all the variables in the javascript and see exactly what's happening, as well as step through the code line-by-line to see what's dying.

[honestbleeps]

.

[twiggy]

Strange, my reply didn't go through last night apparently..

I solved the problem thanks to john_k having me look at my div names. While there was no difference between IE and Firefox on how the javascript evaluated, it got me looking at my HTML.

The problem was that IE is forgiving of bad code where Firefox is not - I had a difference in case: pubDate vs. pubdate ...

Thanks to all who tried to help... sorry the answer to my question probably ended up being totally uninteresting :-)