Strange IE behaviour when using jQuery AJAX

EnverexEnverex Worcester, UK Icrontian
edited August 2010 in Internet & Media
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?

Comments

  • PirateNinjaPirateNinja Icrontian
    edited August 2010
    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 <3 cool spot.
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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.
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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?
  • PirateNinjaPirateNinja Icrontian
    edited August 2010
    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.
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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.
  • PirateNinjaPirateNinja Icrontian
    edited August 2010
    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.
  • PirateNinjaPirateNinja Icrontian
    edited August 2010
    Oh look, a jquery swfobject plugin that supports vars:
    http://jquery.thewikies.com/swfobject/examples

    I believe that is the best for you
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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.
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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?
  • PirateNinjaPirateNinja Icrontian
    edited August 2010
    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.
  • EnverexEnverex Worcester, UK Icrontian
    edited August 2010
    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.
Sign In or Register to comment.