1

I have added the following to my seatle.master page inside my SharePoint server 2013 :-

<SharePoint:ScriptLink language="javascript" name="custom.js" OnDemand="true" runat="server" Localizable="false" />

an i added the custom.js file inside the following path:- C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS

The script is a simple function to display the current date inside a div , as follow:-

$( document ).ready(function() {


document.getElementById("currentdate").innerHTML = formatAMPM();

function formatAMPM() {
var d = new Date(),
    minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() : d.getMinutes(),
    hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
    ampm = d.getHours() >= 12 ? 'pm' : 'am',
    months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+d.getDate()+' '+months[d.getMonth()]+' '+d.getFullYear()+' '+hours+':'+minutes+' '+ampm;
}
});

baring in mind if i add script editor web part inside the page and i added the above code, it will show the current date and time. but having this code inside a script editor web part mean that i have to add this web part to all my pages, instead i want this script to fire for all the site collection pages. any idea how to solve this issue ?

UPDATE

<head runat="server">
    <meta name="GENERATOR" content="Microsoft SharePoint" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10"/>
    <meta http-equiv="Expires" content="0" />
    <SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6" />
    <SharePoint:RobotsMetaTag runat="server"/>
    <SharePoint:PageTitle runat="server">
        <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
            <SharePoint:ProjectProperty Property="Title" runat="server" />
        </asp:ContentPlaceHolder>
    </SharePoint:PageTitle>
    <SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=23" />
    <SharePoint:StartScript runat="server" />
    <SharePoint:CssLink runat="server" Version="15"/>
    <SharePoint:CacheManifestLink runat="server"/>
    <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:CustomJSUrl runat="server" />
    **<SharePoint:ScriptLink language="javascript" name="custom.js" OnDemand="False" runat="server" Localizable="false" />**

        <SharePoint:SoapDiscoveryLink runat="server" />
    <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
        <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
        <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
        <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server" />
    </SharePoint:AjaxDelta>
<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
    <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Custom CSS/MyCustomeCss.css %>" After="corev4.css" runat="server"/>

</head>
  • You can not set OnDemand="True" if you want it to auto fire – Robert Lindgren Sep 3 '13 at 12:18
  • i chnage it to OnDemand="False", but nothing changed.. – john Gu Sep 3 '13 at 12:21
2

The path is right, but maybe not the place where you added it in the masterpage. Some questions:

  1. If you debug your website, does the script get loaded at all? If yes, you could debug it to get specific error messages.
  2. Can you provide the whole <head> of the masterpage? Maybe the location is not quite right. I remember situations, where I needed to put custom JS directives after the core.js line. But this is wild guessing without seeing the head.
  • i have added the <head> tag . can you check my UPDATED section. – john Gu Sep 3 '13 at 12:23
  • Thank you. Have you tried to debug? Does the script get loaded? – wu5chl Sep 3 '13 at 12:35
  • yes it gets loaded, i use the developer tool inside Ie and the script will be loaded but it will not update the date and time. any idea what might be causing this? – john Gu Sep 3 '13 at 15:08
  • Are you including JQuery on the page? It doesn't look like it from the head section you pasted in, and that $(document).ready() event won't work without JavaScript. One debugging method I like to do in cases like this is run the part inside the handler manually through the console and make sure it works as expected then. – Ted N. Aug 19 '14 at 19:56
0

The location of your JS file in the master page needs to be

"/_layouts/custom.js"
  • actually i tried this but it will not make any differences, still the date and time will not be displayed . and without adding "/_layout/" SharePoint will locate the script, but the date and time will not be displayed. – john Gu Sep 3 '13 at 12:14
0

If you're editing the .html page instead of the .master page then you can just as easily use a plain <script> tag in your <head> tags.

<script type="text/javascript" src="/_layouts/custom.js"> </script>

Edited: Tags were stripped out

  • i am editing the seatle.master. but where exactly i can write the script tag ? – john Gu Sep 3 '13 at 12:17
  • Hi, edited my answer the tag labels were stripped out. Fixed now – Donald Dunlop Sep 3 '13 at 12:18
  • thanks for the reply, but where exactly inside my master page i should added the script. – john Gu Sep 3 '13 at 15:09
0

The first issue is that your function $( document ).ready(function() does not have to fire at all :-). This is becouse SharePoint loads scripts different way. So, you should use something like:

(function () {
    "use strict";
    /* SharePoint equivalent of jQuery $( document ).ready() function. */
    /* It is possible to push more than one function to be executed when page is ready */
    _spBodyOnLoadFunctionNames.push("gsPageLoaded");
})();

/* Started when page is loaded */
function gsPageLoaded() {
    "use strict";
    /* We run it after document ready, but SharePoint scripts are on demand scripts, so this the way to make sure script is loaded */
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', gsMain)
}

function gsMain() {
    console.log("SharePoint ready!");
}

So, gsPageLoaded() is executed after page is loaded, and it should be good enough in your case. The sample shows also, how to 'wait' for SharePoint scripts to be loaded first. This is gsMain function.

I would advise not to put any files in SharePoint system folders etc. The easiest and simplest way is to create separate IIS web - in production envrionment on the separate machine - and store JavaScript files there.

0

You can include custom JS in your master page by using simple script tag as well...all you need to provide is the proper path to your file.

For ex:

Before the closing tag you can add this:

<SharePoint:Scriptlink ID="Scriptlink1" runat="server" name="~SiteCollection/Style Library/YourFolderName/YourScriptName.js" language="javscript" />

OR

<script src="_layouts/YourFolderName/YourScriptName.js" type="text/javascript"></script>
-1

Write line before end of head tag. exactly before tag.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.