SharePoint Script Editor only works in Edit Mode

In this post, we’re going to solve “SharePoint Script Editor only works in Edit Mode not Published Mode in SharePoint 2016“, also we will also show Why the JSOM and Javascript code only works in Edit mode and doesn’t work when you publish your SharePoint Page?

You might also like to read Disable SharePoint Field Using JQuery.

---

JavaScript only works in Edit Mode in SharePoint 2016/2019

In SharePoint 2016/2019, I am trying to get the current user details using JavaScript Object Model (JSOM) in SharePoint Script Editor. So I did the following:

• Edit my page, Click “Add web part”.
• Click on “Media and Content” > Add “Script editor web part”.

• Added the below JavaScript code:
• Click on Edit Snippet.

You might also like to read Missing EDIT SNIPPET SharePoint Script Editor

At this step, I have noted that the below JavaScript code is working in EDIT MODE properly, but when stop editing and publish the SharePoint page, it’s not working!

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(GetCurrentUserInfo,'sp.js');
var currentUser;
function GetCurrentUserInfo(){
    var cx = new SP.ClientContext.get_current();
    currentUser = cx.get_web().get_currentUser();
    cx.load(currentUser);
    cx.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}

function onQuerySucceeded() {
    alert(currentUser.get_loginName().substring(currentUser.get_loginName().indexOf('|')+1)); 
    alert(currentUser.get_title());
    alert(currentUser.get_email());
}

function onQueryFailed(sender, args) {
    alert('Error: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>

You may be also interested to read SharePoint 2016: Get Current User Using JavaScript.

---

SharePoint Script Editor only works in Edit Mode

Cause

This issue “SharePoint Script Editor only works in Edit Mode” or JSOM code is not Working in SharePoint 2016/2019 usually occurs in the case of the following:

1. The Script tag doesn’t have type=”text/javascript”.
2. The “SP.js” and “SP.Runtime” files are not referenced properly in the correct order.
3. You didn’t call the ExecuteOrDelayUntilScriptLoaded function.
4. The Minimal Download Strategy Feature is activated.
5. The code is not written correctly!
6. You are using ExecuteOrDelayUntilScriptLoaded with Publishing Pages

You may be also interested to read This web browser either does not support JavaScript or scripts are being block

---

Solution

The Script tag doesn’t have type=”text/javascript”

You should make sure that all script tags have type=”text/javascript”.

The “SP.js” and “SP.Runtime” files are not referenced

Make sure that you have referenced the “SP.Runtime.js”, “SP.init.js”, “SP.js”, “SP.core.js” correctly as the below order:

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>  
<script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script src="/_layouts/15/sp.js" type="text/javascript" ></script>  
<script src="/_layouts/15/sp.core.js" type="text/javascript"></script>  

Missing ExecuteOrDelayUntilScriptLoaded

The SP.SOD.executeOrDelayUntilScriptLoaded has two parameters

• Function Name.
• JSOM file name.

This function ensures that the JSOM file is loaded first and then executes a specified function in its parameters.

If this function SP.SOD.executeOrDelayUntilScriptLoaded doesn’t help, try to use
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, yourfunctionname); or use _spBodyOnLoadFunctionNames.push(“yourfunctionname”);

The Minimal Download Strategy feature is activated

The Minimal Download Strategy Feature is a new feature introduced in SharePoint 2013, and it reduces page load time when users browse other pages by loading only the page changes.

By default, the Minimal Download Strategy Feature is disabled, if you have activated this feature, try to deactivate it.

Deactivate Minimal Download Strategy Feature

• Open Site Setting.
• Below “Site Actions”, Click on “Manage Site Features”.
• Search for “Minimal Download Strategy”.
• Click on Deactivate to deactivate the feature.

The JavaScript code is not written correctly!

Actually, the code will not work in “Edit Mode” or “Publish Mode” if you have an error in your code, so make sure that your code is written correctly as well as you have applied the above instructions.

The JSOM code structure

The final JSOM code structure should look like

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.core.js"></script>

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(yourfunction,'sp.js');

function yourfunction(){
    var cx = new SP.ClientContext.get_current();
    // your code
    cx.executeQueryAsync(Function.createDelegate(this,this.onQuerySucceeded), Function.createDelegate(this,this.onQueryFailed));
}

function onQuerySucceeded() {
    // on success
}

function onQueryFailed(sender, args) {
// on error
    console.log('Error: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
}
</script>

Using SP.SOD.executeFunc

If you are using publishing pages, try to use SP.SOD.executeFunc(“sp.js”, “SP.ClientContext”, myFunction); instead of ExecuteOrDelayUntilScriptLoaded(myfunction,’sp.js’)

Consider, that you have a button with the RunSP function to run JSOM script in SharePoint as below

<input type="button" onclick="RunSP();" value="Submit">

So to get this JSOM code working in SharePoint, you have to do the following:

function RunSP(){

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

}


function myFunction(){
// add your code here ....
}

In the end, If you have followed the above instructions carefully, you will get SharePoint Script Editor works in Edit Mode and Publish Mode.

---

Conclusion

In this post, we have fixed “SharePoint Script Editor only works in Edit Mode” in SharePoint 2016/2019 by providing general instructions to write high-quality code in the script editor web part.

Applies To

• SharePoint 2019.
• SharePoint 2016.
• SharePoint 2013.

Download

Check JS for SharePoint repository on GitHub to find well-written JavaScript and JSOM code snippets for SharePoint, also Please, don’t forget to Follow Me to get the latest updates.

See Also

• SharePoint Auto Populate Column based on another Column.
• Auto Populate Field Values based on Lookup Selection In SharePoint.
• Show / Hide fields based on choice field selection using JQuery in SharePoint.
• Show and Hide Columns in SharePoint List Forms Using PowerShell.

Have a Question?

If you have any related questions, please don’t hesitate to ask them at deBUG.to Community.