Inserting javascript with jQuery .html
- by Andrew Appleby
I'm experiencing an issue with a website I'm working on, where I originally believed I could simply replace $("main").html('THIS') which was originally code for a flash object, with a new and improved HTML5/Javascript version.
The original code:
$("#main").html('<div style="height: 100%; width: 100%; overflow: hidden;"><object width="100%" height="100%" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">\
<param value="images/uploads/'+image_id+'.swf" name="movie">\
<param value="true" name="allowFullScreen">\
<param value="#737373" name="bgcolor">\
<param value="" name="FlashVars">\
<embed width="100%" height="100%" flashvars="" bgcolor="#737373" allowfullscreen="true" src="images/uploads/'+image_id+'.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">\
</object></div>\
');
});
And my (failed) attempt at inserting my new code:
$("#main").html('<script type="text/javascript">pano=new pano2vrPlayer("container");skin=new pano2vrSkin(pano);pano.readConfigUrl("xml/tablet_'+image_id+'.xml");hideUrlBar();</script>');
It doesn't even work when I just put , so I know it's gotta be the javascript itself.
I've looked at the solutions out there, but I can't make sense in how to properly implement them here in the most efficient way.
Your help is much appreciated, thanks!