Conflict between html5.js and other frameworks

Topics: Core, Customizing Orchard, General, Troubleshooting, Writing modules
Jan 19, 2012 at 5:40 PM

I am using Sencha Ext JS in one of my custom modules for Orchard. The problem is that the html5.js that automatically gets placed in the page head by the Orchard framework is conflicting with my Javascript app. This is the what I am referring to in the head:

<script src="/orchardsite/Core/Shapes/scripts/html5.js" type="text/javascript"></script>

I looked at that Javascript file and it strangely seems like the whole thing is commented out:

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.5.1 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(p,e){var q=e.createElement("div");q.innerHTML="<z>i</z>";q.childNodes.length!==1&&function(){function r(a,b){if(g[a])g[a].styleSheet.cssText+=b;else{var c=s[l],d=e[j]("style");d.media=a;c.insertBefore(d,c[l]);g[a]=d;r(a,b)}}function t(a,b){for(var c=new RegExp("\\b("+m+")\\b(?!.*[;}])","gi"),d=function(k){return".iepp_"+k},h=-1;++h<a.length;){b=a[h].media||b;t(a[h].imports,b);r(b,a[h].cssText.replace(c,d))}}for(var s=e.documentElement,i=e.createDocumentFragment(),g={},m="abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".replace(/ /g, '|'),n=m.split("|"),f=[],o=-1,l="firstChild",j="createElement";++o<n.length;){e[j](n[o]);i[j](n[o])}i=i.appendChild(e[j]("div"));p.attachEvent("onbeforeprint",function(){for(var a,b=e.getElementsByTagName("*"),c,d,h=new RegExp("^"+m+"$","i"),k=-1;++k<b.length;)if((a=b[k])&&(d=a.nodeName.match(h))){c=new RegExp("^\\s*<"+d+"(.*)\\/"+d+">\\s*$","i");i.innerHTML=a.outerHTML.replace(/\r|\n/g," ").replace(c,a.currentStyle.display=="block"?"<div$1/div>":"<span$1/span>");c=i.childNodes[0];c.className+=" iepp_"+d;c=f[f.length]=[a,c];a.parentNode.replaceChild(c[1],c[0])}t(e.styleSheets,"all")});p.attachEvent("onafterprint",function(){for(var a=-1,b;++a<f.length;)f[a][1].parentNode.replaceChild(f[a][0],f[a][1]);for(b in g)s[l].removeChild(g[b]);g={};f=[]})}()})(this,document);@*/
Is this doing anything and can we get rid of it from the page render?

Jan 19, 2012 at 5:52 PM

It's making Orchard work correctly with legacy browsers. It's not really commented out; that's just some kind of minification strangeness. What conflict are you getting exactly? html5.js is a fairly widely-used script these days and Ext really should be compatible.

Jan 19, 2012 at 6:54 PM

It is crashing the Ext JS framework with this error: 

SCRIPT1003: Expected ':'

It is before my custom code even runs and only happens in IE. I have written a thread about this in the Sencha forums and was checking here to see if I can solve it from the Orchard end: http://www.sencha.com/forum/showthread.php?174362-Conflict-with-another-script-only-in-IE-SCRIPT1003-Expected

It is sounding like this is something that Ext JS and html5shiv need to work out together (I agree from the Ext JS side).

 

MS Sweden EventBoard / Orchard Widget
Jan 19, 2012 at 7:13 PM

Suggest trying the latest version from google code: http://code.google.com/p/html5shiv/source/browse/#svn%2Ftrunk

If that resolves the problem (and still works otherwise) submit a workitem and patch :)

Jan 19, 2012 at 8:22 PM

You were spot on! The new version of html5shiv (v3) does NOT crash the Ext JS framework and works like charm. I have opened a work item for this:

http://orchard.codeplex.com/workitem/18372

Thanks a mil!