In SharePoint 2013 the Javascript\u00a0loading mechanism seems to be changed a bit. When porting a SharePoint 2010 solution to 2013 I found out that sometimes some weird script errors where occuring\u00a0when calling SharePoint Javascript\u00a0libraries. On some pages in SharePoint 2013 it happens that not all SharePoint Javascript\u00a0libraries are loaded because of the built-in\u00a0lazy loading mechanism. This reduces bandwidth\u00a0when loading pages, because no unneeded libraries are downloaded to the client. But this causes issues when you want to use not loaded libraries. The following sample Javascript\u00a0codes shows how you can load some Javascript Libraries and then automatically call your function where you want to use those libraries:<\/p>\n
\r\n\/\/Register SOD's\r\nSP.SOD.registerSod('core.js', '\\u002f_layouts\\u002fcore.js');\r\nSP.SOD.executeFunc('core.js', false, function(){});;\r\nSP.SOD.registerSod('sp.js', '\\u002f_layouts\\u002fsp.js');\r\nSP.SOD.executeFunc('sp.js', false, function(){});\r\nSP.SOD.registerSod('sp.core.js', '\\u002f_layouts\\u002fsp.core.js');\r\nSP.SOD.executeFunc('sp.core.js', false, function(){});\r\n\r\nfunction doSomething() {\r\n \/\/Your Logic here which calls sp core libraries\r\n}\r\n\r\n\/\/ Load asynchronous all needed libraries\r\nExecuteOrDelayUntilScriptLoaded(function() { ExecuteOrDelayUntilScriptLoaded(doSomething, 'sp.core.js') }, 'sp.js');\r\n<\/pre>\nIn the example above we’re using the SP.SOD library<\/a>\u00a0provided with SharePoint. Those existed already in SharePoint 2010 and are still present in 2013. With the SOD library it is possible to lazy load Javascript\u00a0files and load them on the moment you need them. The sample script exists of three parts. In the first step we register Sod’s (Script on Demand) where we define a key and as value the relative path to the Javascript\u00a0file. We also call executeFunc\u00a0to load the file using a dummy function. In the second step we create a custom function. This is the function where you want to call specific methods in the Javascript\u00a0libraries loaded. Then we call ExecuteOrDelayUntilScriptLoaded. Because in this sample we want both sp.core.js and sp.js loaded, we nest it with another call to ExecuteOrDelayUntilScriptLoaded\u00a0and finally let the callback call the function which needs the libraries loaded before executing. This method of loading scripts seems to work well in SharePoint 2013 and can also be used for other OOTB Libraries, like the Taxonomy Javascript\u00a0Library. When your site is still running in SharePoint 2010 mode however, this doesn’t work properly. The registering of Sod’s seems to break with the 2010 way of loading the OOTB Javascript\u00a0files so there you need only the ExecuteOrDelayUntilScriptLoaded\u00a0calls. If you need to detect the mode in Javascript you can use the SP.Site.get_compatibilityLevel()<\/a>\u00a0function to retrieve that info using JSOM and then dynamically decide which method of loading to use.<\/p>\n","protected":false},"excerpt":{"rendered":"In SharePoint 2013 the Javascript\u00a0loading mechanism seems to be changed a bit. When porting a SharePoint 2010 solution to 2013 I found out that sometimes some weird script errors where occuring\u00a0when calling SharePoint Javascript\u00a0libraries. On some pages in SharePoint 2013 it happens that not all SharePoint Javascript\u00a0libraries are loaded because of the built-in\u00a0lazy loading mechanism. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[3,25,26,27,5],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-sharepoint","tag-csom","tag-javascript","tag-jsom","tag-lazy-loading","tag-sharepoint-2013"],"_links":{"self":[{"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vlieshout.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=167"}],"version-history":[{"count":5,"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/vlieshout.net\/index.php?rest_route=\/wp\/v2\/posts\/167\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/vlieshout.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vlieshout.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vlieshout.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}