Home » How to load jQuery on demand in SharePoint 2013

How to load jQuery on demand in SharePoint 2013

Summary

Solution was needed for adding jQuery to my site. For my failing memory, below are my requirements, plus how I did it.

Audience:

Because I am forever one, my posts are to help absolute beginners.

Requirements:

  • jQuery is needed on many, but not every page.
  • Minimize the effort needed to load jQuery when it is needed.
  • Farm is SharePoint 2013.
  • Solution cannot use Visual Studio (work computer with strict settings)
  • Solution can use SharePoint Designer 2013
  • I have access to the 15 folder (C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS), but this is not something I want to count on moving forward; several platforms I work on do not offer this access.
  • Site collection uses Seattle.master
  • You need at least Designer access, I think

Principles:

  • I don’t want to load something where it is not needed.
  • I’d like to minimize using CEWP (Content Editor Web Parts), although will use it in this example.

Steps:

  1. Open SharePoint Designer 2013 and go to your Site Assets folder.
  2. Create a folder structure where a “MasterPageScripts” folder is inside a “Scripts” folder, which is inside the “Site Assets” folder: Site Assets > Scripts > MasterPageScripts
  3. Download jQuery-1.12.3.min here and save it into the MasterPageScripts folder.
  4. Your path to jQuery is now: https://yoururl/sites/yourSiteCollection/SiteAssets/Scripts/MasterPageScripts/jquery-1.12.3.min.js. Recommend you test that link before continuing.
  5. Next, click Master Pages in your left sidebar of SharePoint Designer and open Seattle.master
  6. Find this line:
  7. Before that line, add this “on-demand” link to jQuery:

    Note: The OnDemand=”true” attribute makes an “on-demand” link to jQuery, meaning jQuery loads only if it is explicitly called. On the other hand, if you set OnDemand=”false”, it renders the link to jQuery differently: jQuery is loaded whether or not it is needed. Try it both ways to see the difference…. Go to any SharePoint page controlled by this master page and view the source.

    • If you have OnDemand=”true”, you’ll see a line like this (we do want this)… Notice that this line calls a function, RegisterSod, that “registers” jQuery. Later on, we will use a similar function to load jQuery:
    • If you have onDemand=”false”, you’ll see line like this (we do not want this.):
  8. Go to the Site Assets > Scripts folder and create a new nested set of folders: /SiteAssets/Scripts/Defects/NewForm/ (I think it helps keep stuff in order to create folders for Lists that I customize).
  9. Inside the NewForm folder, create a new Javascript file. Call it myScript.js.
  10. Open myScript.js, paste the following code into it, and save it:
  11. Go to the list view or list form where you want the jQuery to run. In my case it was https://myurl/sites/mysitecollection/Lists/Defects/NewForm.aspx
  12. Go into Edit mode and add a CEWP (Content Editor Web Part)
  13. In the web part, and add a link to your custom myScript.js file (https://yoururl/sites/yourSiteCollection/SiteAssets/Scripts/Defects/NewForm/myScript.js).
  14. In SharePoint, go to your list, click “new item,” and myScript.js will run and jQuery will load. To check, view the page source and look at the body tag’s class attributes.

So what this means is that, depending on the scenario, instead of putting jQuery inside the typical…

…you’ll want to couch your jQuery code inside….

…or inside…

One more thing

Notice that jQuery was loaded into the local site collection and not onto the server in the 15 folder. This means that to successfully call jQuery on demand, you have to include the correct path in the LoadSodByKey or SP.SOD.executeFunc functions. So instead of this:

SP.SOD.executeFunc(‘jquery-1.12.3.min.js’, null, confirmJQueryLoaded);

…You would do this…

SP.SOD.executeFunc(‘~site/SiteAssets/Scripts/MasterPageScripts/jquery-1.12.3.min.js’, null, confirmJQueryLoaded);

Leave a Reply

Your email address will not be published. Required fields are marked *

*