Strange IE behaviour when using jQuery AJAX

Enverex

I've been trying to make RetroTracks look a little better and decided to bring in some jQuery goodness that I had been implementing into a few of my other sites, problem is I'm running into some strange issues specifically with IE (Chrome, Firefox, Safari and even my BLACKBERRY all work fine).

Here's an example. Go to this page - http://retrotracks.net/tunes/61 - and click "Play" next to one of the tracks. In anything other than IE you'll see a loading bar (if the server hasn't cached the track) and then it'll switch to a Flash player with a download link and start playing the track (or on Blackberrys/iPhones, etc it'll use your inbuilt media player).

On IE you get the same behaviour (load bar, etc) but then you end up with an empty box rather than the Flash player. I've checked this through with Firebug Lite in IE and it shows the code is being sent back and inserted into the page, but IE simply doesn't display it. Switching to Firebug's HTML mode to show what was inserted shows the player, working. So it seems to be an IE display issue.

Anyone run into this before and know how to fix it?

PirateNinja

I've not experienced that, but it actually loads somethings then clears and hides them.
If we look at your function you call when clicking play:

function StartPlayer(url) {
			jQuery('#playerbox').hide();
			jQuery('#loadingbox').show();
			jQuery('#playerbox').empty();
			jQuery('#playerbox').load(url, function() {
				jQuery('#loadingbox').hide();
				jQuery('#playerbox').show();
			});
			return false;

It looks like one of two things:
1. IE just is not loading the data again after you use .empty.
2. .load works fine, but it can't render the HTML (what I think it is)

I did notice:

<div style='margin-bottom: 2px;'>
				<a href='/content/61-new/mod.coolp14.mp3'>Download (Right Click - Save As)</a>
			</div>
			<div>
				<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' width='165' height='38' id='mp3player' align=''>
				<param name=movie value='/mp3player.swf?file=%2Fcontent%2F61-new%2Fmod.coolp14.mp3&as=1'>
				<param name=quality value=high>
				<param name=bgcolor value=#FFFFFF>
				<embed src='/mp3player.swf?file=%2Fcontent%2F61-new%2Fmod.coolp14.mp3&as=1' quality=high bgcolor=#FFFFFF width='165' height='38' name='mp3player' align='' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'>

				</embed>
			</object>
			</div>
			</div>

The code here seems off. The quotes are single, double, or non existent. IE is picky about this stuff.

---

Long story short, I'd try refining the html a bit..specifically the single/double quote madness there.

On that note, awesome site! I cool spot.

Enverex

Ahh, I hadn't noticed the lack of some quotes. There are no double quotes in there, only single quotes and missing quotes (I use single quotes inside HTML to avoid having to escape them in PHP, keeps the code easier to read).

I'll add that in now and see if it helps, ta.

Enverex

Unfortunately adding quotes to the missing embed code and removing the extra clear has no effect, IE still does exactly the same thing while every other browser, mobile ones included, still work as intended.

Any other ideas?

PirateNinja

Maybe try this just to help zero in on the problem:
Take this code:
http://retrotracks.net/index.php?page=enco&mode=mini&folder=61&file=mod.coolp14&device=1
And make it nothing but the word TEST. Do not even use any markup.

Then see if IE shows TEST.

If it doesn't we know it is something to do with the Jquery/javascript. If it does, we can work with the markup.

--
I'm assuming it is an issue with the Jquery/javascript though. In which case I'd have to look again, and I can do that later today.

Enverex

It's the Flash part that's doing it. The divs and such all show up. Add in the Flash and poof, it breaks.

It's not exactly a lot of code:

	<objEGGect width='165' height='38'>
		<paEGGram name='movie' value='/mp3player.swf?file=$fullfileurl&as=1'>
		<emEGGbed src='/mp3player.swf?file=$fullfileurl&as=1' width='165' height='38'></emEGGbed>
	</objEGGect>

(yes I know I'm not using &).

Looks like an IE bug to be honest as there's really nothing I can imagine being wrong here.

EDIT: Erm, why don't the CODE tags work? Meh. Replaced them with QUOTE tags instead. That also didn't work. Added 'EGG' to the tags to break them. Ok that also didn't work, the code tags clearly just don't work.

PirateNinja

Why don't you try embedding with SWFobject?
http://code.google.com/p/swfobject/

It's another .js call, but it will likely get you all sorted out.

PirateNinja

Oh look, a jquery swfobject plugin that supports vars:
http://jquery.thewikies.com/swfobject/examples

I believe that is the best for you

Enverex

Ill try that tomorrow if its worth it. I'm just surprised that this only has issues with IE and that IE has issues at all :/ meh.

Enverex

Ok that didn't work. The swfObject just made things worse. It played in Firefox but was invisible using the static method and the dynamic method was just as bad.

I tried the jQuery plugin which works fine in Firefox, etc but behaves exactly the same way as my original method, i.e. it works in everything except for IE where it doesn't work and is invisible (at least with this one I've got a nice way of checking for Flash, but that's beside the point)...

Any other ideas?

PirateNinja

Maybe try the absolutely bare minimum embed code for .swf

I can't post code here but this covers it:
http://www.w3schools.com/flash/flash_inhtml.asp

If that doesn't work I'd say it is an issue with IE not wanting to bring embed tags up through jquery.

So, this:
http://plugins.jquery.com/project/jlembed

If that fails, I give.

Enverex

I was already using the minimum valid code from the W3C site so that's already marked off. The jQuery one appears to be virtually the same as the one I'm using now.

It appears to be an IE bug then, ah well.