SharePoint2013 referencing external JS file in page layout not working

Question

I have created a custom page layout. In that custom page layout I have many HTML markup and controls like Dropdowns, hyperlinks (hrefs) etc. Clicking on hyperlink hides or shows a div. The HTML markup and controls shows up fine when I create a page from page layout. The issue I am having is the JavaScript to hide or show div is in external JS file, which I am referencing in the page layout as below:-

<SharePoint:ScriptLink name="~sitecollection/Style Library/Scripts/my.js" runat="server" />

But when I click on “hyperlinks (hrefs)” the script in external js file doesn’t fire. I also tried using

<script src="../../mysite/Style%20Library/Scripts/my.js"></script>

Any idea what’s wrong?

Answer 1

You can try with following links:

<script type="text/javascript" language="javascript" src="http://SharePoint/sites/SiteName/_catalogs/masterpage/Master%20Page%20Template/test.js"></script>

<SharePoint:ScriptLink id="ScriptExternalJs" runat="server"  Name="~SiteCollection/Style Library/MyCustomStyles/js/TestScript.js" OnDemand="false" LoadAfterUI="true" Localizable="false" ></SharePoint:ScriptLink>

Answer 2

Refer the js file in script tag and Place it just above the Publishing:EditModePanel tag

<!--MS:<Publishing:EditModePanel runat="server" id="editmodestyles">-->

Answer 3

Create a module in sharepoint like "scripts".

Add ur js file under the module and then refer the file in layout.

Answer 4

You need to add

    //<!{CDATA[//]]>

after each of your script links. i.e.

    <script type = "text/javascript" language="javascript" src="/Style%20Library/myjsfile.js">//<!{CDATA[//]]>

Make sure you put your script link into the 'PlaceHolderAdditionalPageHead' block towards the top of the html page layout - just after the close of the edit mode panel is a good spot.