[SOLVED] AAAH! Internet Explorer hates my JSON-fed MODx site!

Well, I just blogged (http://eatsleepmodx.com/articles/create-an-ajax-api-generator-with-wrapper-snippets-and-ditto) yesterday about the fancy JSON-fed MODx site I built, and now I’m wondering if I’ll have to eat my words.

Basically, I’ve created a video player that’s being fed by a JSON feed, using JQuery to pull in the feed and generate the playlist and embedded YouTube player (using a plugin called jquery.youtubeplaylist). It functions beautifully in Firefox, Chrome, Safari and Opera on all platforms, but...nothing works in IE 6, 7 or 8. It’s like my feed is malformed or not being pulled in correctly. I’m not sure if it’s a JQuery issue or a problem with the feed MODx is generating (possibly a character encoding issue?), which is why I’m starting with a post here.

Here’s the link: http://www2.ku.edu/~whyku/students/

In the IE8 debugger, I get the following message during the each loop of the getJson function:



This is bad. If I can’t get it working, I’ll have to pretty much start over with the project. If anyone is a JQuery or JSON expert or has had this type of problem before -- or can at least tell me who I could ask that might have an answer -- I’d be forever in your debt. THANKS!!!

I should mention that I’ve tried everything listed here (http://blog.justprofessionals.com/web-design/jquery-json-internet-explorer/) with no success.

IE can be a picky pain in the butt. It’s telling me:

Message: Object doesn’t support this property or method
Line: 241
Char: 17
Code: 0
URI: http://www2.ku.edu/~whyku/students/

The only thing I see there is "content = ....". Have you tried adding ’var’ prior to the content line? I have found odd things if you don’t declare your variables the first time they’re used.

It may be a long shot, but that’s the only thing I can think of for where IE’s complaining.

Sir William

When I debug it using IE8, the content variable on line 241 evaluates to the DOM node represented by your main div, which is on line 86 when you view source:

<div id="main" class="nonav span-24 last">

is this what you intended? Maybe you could try being more explicit - something like this:

document.getElementById("content")

rather than just using the ID? As this is a DOM node, you should try setting properties explicitly too:

document.getElementById("content").innerHTML = ’<li>’

This is hard to debug from here, as we can’t make changes, but maybe this will nudge things in the right direction?

Woohoo! Making progress. Sir William was right. I added var content = ’’; as the first line of my each loop, and the feed now parses nicely into the playlist. For some reason, it still isn’t generating the YouTube video, though. However, now that I’ve nailed it down as a JQuery problem, I hate to keep clogging up the MODx forums. If anyone has an obvious answer, please let me know; otherwise, I’ll go ask it on the JQuery forums.

Saved by the forums once again! Thank you all so much!

Okay, I lied -- it is working in IE now. For some reason, it’s not showing up in my VirtualBox IE8 install, but it’s fine on an actual PC. Good enough for me!