JavaScript in content editor or script editor web part or not working after publishing the page in SharePoint Online/2013/2016

In this SharePoint tutorial we will discuss how to resolve javascript in content editor web part not working after publishing the page issue which comes in SharePoint Online/2013/2016. The issue can come in script editor web part as well as in content editor web part. It was like the jsom code was running only in the Edit mode of the page.

Recently I was using a script editor web part to display SharePoint list item details in a web part page in SharePoint Online publishing site. The list item id was coming from a Query string parameter. There was a strange issue was happening, the item details were populating when the page is in check out mode. But when I publish the SharePoint page, the item details were not displaying. It was just displaying a blank page.

Here I was using a custom master page for the site pages in SharePoint Online.

There was no script error also in the SharePoint page. Then I noticed that the javascript function itself is not triggering in the page.

javascript in content editor web part not working after publishing the page

Below is the code I was using to retrieve the query string value and then we were writing the below code to retrieve list items by id using jsom SharePoint code.

The code I have added inside a script editor web part or content editor web part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(retrieveConrosProductListItems, "sp.js");
});

function retrieveConrosProductListItems() {
    var id = GetParameterValues('itemid');
getitemsbyID(id);
}

var conroProductListItem;  
var clientContext;
var conrosProductslist

function getitemsbyID(itemID) {
     clientContext = new SP.ClientContext.get_current();
     productslist = clientContext.get_web().get_lists().getByTitle('Products');
    productListItem = productslist.getItemById(itemID);
    clientContext.load(productListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
$('#txtTitle').text(productListItem.get_item('Title'));
}

}
function onQueryFailed(sender, args) {
    alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
function GetParameterValues(param) {
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < url.length; i++) {
        var urlparam = url[i].split('=');
        if (urlparam[0] == param) {
            return urlparam[1];
        }
    }
}

</script>

The above code is working fine in the page edit mode, the page has not been published. Once the page is published the code is not working.

Replace ExecuteOrDelayUntilScriptLoaded function with SP.SOD.executeFunc

This is the solution that worked for me. Here in this code I was using the below method.

ExecuteOrDelayUntilScriptLoaded(retrieveConrosProductListItems, "sp.js");

I replaced that with the below code and it started working.

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveConrosProductListItems);

Refer SP.js file in Script editor or content editor web part in SharePoint Page

The issue might come if the sp.js file not loaded in the SharePoint web part page propery. In those cases you can load the sp.js file in the page manually like below:

<script src="/sites/SharePointSky/_layouts/15/SP.Runtime.js" type="text/javascript">
<script src="/sites/SharePointSky/_layouts/15/SP.js" type="text/javascript">

Now, if you will run the code, it should work fine, the jsom code should work fine.

Refer SP.js file in SharePoint Custom Master page

If you are using a custom master page in SharePoint Online or SharePoint 2013/2016, then you can refer sp.js file in the master page itself like below.

<SharePoint:ScriptLink language="javascript" Name="sp.js" runat="server" OnDemand="false" LoadAfterUI="true" Localizable="false"><SharePoint:ScriptLink>

Once you refer the sp.js file in the master page, you do not need to refer it in any other individual pages. Now you should not get the javascript in content editor web part not working after publishing the page issue.

Deactivate Minimal download strategy feature

If in your site, Minimal download strategy feature is enabled, then you might face issue and your jsom code might not trigger because of the URL redirection.

Deactivate Minimal download strategy feature, will solve the issue.

Open SharePoint site, go to the Site Settings page, click on “Manage site features” which is presented in the Site Actions.

Then in the Site Features page, search for “Minimal Download Strategy” and deactivate the feature like below.

You may like following jsom SharePoint tutorial:

• jsom SharePoint 2013 examples: Retrieve list items using javascript object model in SharePoint online
• JSOM SharePoint 2013 examples: Update List Item Using JSOM in SharePoint Online
• jsomSharePointt 2013 examples: Get List Item by ID using JSOM in SharePoint Online
• Bind SharePoint Online List Data into HTML table or jQuery Datatable using jQuery and Rest API
• Insert/Add item to SharePoint Online list using PowerShell
• Jsom SharePoint 2013 examples: Retrieve List Items and display in Hyperlink using JavaScript Object Model in SharePoint Online
• Jsom SharePoint 2013 examples: Display SharePoint list data in html table using jquery and javascript object model

Conclusion

SP.Js file is very important if you are working with jsom SharePoint. Here we say how to refer sp.js file like, you can refer directly in the master page, as well as you can refer inside the script editor web part or content editor web part.

This way you can resolve javascript in content editor web part not working after publishing the page issue in SharePoint Online or SharePoint 2016/2013.