thanby thanby -4 years ago 201
CSS Question

js called in head does not always load

I'm building a responsive website from the ground up for use as a SharePoint 2013 masterpage, using skel.js to control the grid and breakpoints. Once published, the js files (

skel.min.js
,
skel-panels.min.js
,
jquery.min.js
,
html5shiv.js
, and a simple
config.js
written by me to configure skel and skel-panels) do not reliably run every time a user hits the site, leaving the CSS frozen at whatever breakpoint the browser matched at the time. A refresh usually fixes the issue, but that's not an acceptable solution. So far this happens in IE, Chrome and FF (all versions that don't trigger
html5shiv
).

Does anyone have experience troubleshooting skeljs, or know of a higher-level cause for this behavior? I'm not proficient enough with JavaScript to figure this one out for myself, but even a push in the right direction would be appreciated.

Update: Caught one of the errors in IE Developer Tools (IE10). The console reports
SCRIPT5007: Unable to get property 'match' of undefined or null reference
and points to
skel-panels.min.js
at line 25 character 484. I looked at that line and the offending statement appears to be:

b.attr("class").match(/(\s+|^)([0-9]+)u(\s+|$)/)&&b.data("cell-size",parseInt(RegExp.$2))};


Does this provide any useful insight? I think this is the most common error, but believe there are others as well. I'm continuing to try catching all of them in all browsers.

Update 2: As requested, here are the calls to the js files in the head. Note that these have been translated to SharePoint masterpage syntax (which it does automatically when you publish a page), but they are identical to a "standard" js reference and SharePoint does not alter how they work.

<!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/jquery.min.js">//<![CDATA[-->
<!--ME://]]></script>-->
<!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/config.js">//<![CDATA[-->
<!--ME://]]></script>-->
<!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/skel.min.js">//<![CDATA[-->
<!--ME://]]></script>-->
<!--MS:<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/skel-panels.min.js">//<![CDATA[-->
<!--ME://]]></script>-->


This is how one looks before SharePoint wraps it in its own comments:

<script type="text/javascript" src="/_catalogs/masterpage/SiteName/js/jquery.min.js"></script>


Here is another exception that it throws:
SCRIPT438: Object doesn't support property or method '_skel_panels_close'
in
skel-panels.min.js
on line 6 character 192, which is right in the middle of this statement:
c.is(":visible")?c._skel_panels_close():c._skel_panels_open()};


Also as requested, I added
console.log(b);console.log(b.attr("class"));
before the first statement mentioned above to see what
b
is when it's failing. When it works, both instances of
b
come out to be "6u" which is a class from skel.min.js that defines the width of a section within a row. When the script fails, only the first instance of
b
is recorded and it is "undefined".

Update 3: Per the suggestions of multiple people I tried loading the js at the end of the page, but this broke all of the scripts. After doing some more reading I decided to re-arrange the order of the css and script links so that the css loaded first. What I've come to find out though is that modern browsers use speculative parsing, so the order shouldn't matter. I confirmed this by seeing no noticeable change in behavior when loading the page. For reference though, the scripts come first (about halfway down right after the default scripts that SharePoint calls), then the css is linked at the bottom of the
head
. I still have not found a resolution to this issue, so any suggestions are welcome!

Answer Source

When script tags are added to masterpage, Design Manager appends XML comments:

//<![CDATA[

and

//]]

even though contents of block between <script> and </script> is empty. That particular behavior causes skel.js to break - as skel.js expects to read its configuration from the contents of this script block (which is one of possible ways for configuration) as XML comments are parsed by skel.js and understood as invalid configuration entries.

Solution for this is pretty simple: instead of using <script> for referencing skel.js files you should use SharePoint ScriptLink:

<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/skel.min.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/skel-panels.min.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/<templateName>/js/init.js" Defer="true" runat="server" Localizable="false">-->
<!--ME:</SharePoint:ScriptLink>-->

Hope this helps.

Dragan

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download