So I'm looking for some JavaScript code that will trigger once a user goes into Edit mode on a page. I basically want to have two layouts in a content editor. One for display and one for edit. I have found plenty of examples of detecting if a page is in Edit mode, the problem is I can't find an event to listen to, to see if the user has gone into Edit mode. Only thing I can think of is a While loop but that seems messy. Also I want this script to be a attach and forget so I would like to avoid having to edit the page itself in designer.

  • You can have a custom button in content editor webpart and trigger edit mode from there, I've implemented something like this in 2013 not sure if this works in 2010. sharepoint.stackexchange.com/questions/151425/… Commented Feb 2, 2018 at 14:06
  • I believe you can define a function on page load, something like a function on document.ready which can help you with what needs to be shown and what needs to be hidden.
    – Amit
    Commented Feb 2, 2018 at 14:45
  • Tried to do a windows.onload but it breaks my page. I can't click on the 'page' tab and when I try to edit through site actions, it says, "Unable to get property 'PageState' of undefined or null reference". Then when I remove the code it works fine. My code below... <script src="../SiteAssets/Scripts/jquery-1.12.1.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function() { console.log("hit"); } </script>
    – Ben Hester
    Commented Feb 2, 2018 at 15:00
  • and a jQuery document.ready doesn't recognize a load when switching to edit mode
    – Ben Hester
    Commented Feb 2, 2018 at 15:08
  • Also attempted to use _spBodyOnLoadFunctionNames.push("testing"); and while it fires my function, it doesn't fire on switching to edit mode
    – Ben Hester
    Commented Feb 2, 2018 at 15:15

1 Answer 1


I can think of two ways.


$("#EditButtonID").click(function() {
    if(SP.Ribbon.PageState.Handlers.isInEditMode()) FunctionToTrigger();


$("#EditButtonID").click(function() {
    if($(this).text() == "Stop") FunctionToTrigger();

If it doesn't work, you can add a setTimeOut() to wait 1 second or less just before ifs

  • Yeah I thought of this too but the issue with that is that there is a few different edit button ids on a site. You can go through the ribbon or you can edit through site actions. Also I think the id changes based on if its a wiki page or not. In the end I decided to look for a PageState after a refresh. The page doesn't refresh after entering edit mode but it does when you edit the the content editor and really I just need the script to apply to the content editor.
    – Ben Hester
    Commented Feb 6, 2018 at 14:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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