How do I know if the page is in Edit Mode from JavaScript?

Question

Is there a way to find out if a page is in Edit Mode from JavaScript?

I know server-side can be found using SPContext.Current.FormContext.FormMode but I can't find any means of doing it from JavaScript.

Answer 1

Looks like you're looking for MSOLayout_InDesignMode

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode == "1")
{
    // page is in edit mode
}
else
{
    // page is in browse mode
}

This will refer to value of the following html input control, which is rendering on the page when it is in edit mode:

<input type="hidden" name="MSOLayout_InDesignMode" id="MSOLayout_InDesignMode" value="1" />

Update: for wiki pages, you will need _wikiPageMode parameter:

var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
    // wiki page is in edit mode
}
else
{
    // wiki page is not in edit mode
}

Answer 2

SP.Ribbon.PageState.Handlers.isInEditMode() 

Returns true or false. I use this in publishing pages.

Answer 3

There is also a global object available called 'PageState'. Among the various members of state information is "ViewModeIsEdit". If the value of this member is "1" then you are in edit mode (e.g. PageState.ViewModeIsEdit === "1").

Note: This variable is initialized after sp.ribbon.js gets loaded and is initialized from the _spBodyOnLoadFunctionNames array on body load. So if you plan on using this and need to query a value as soon as the page loads, you will need to do a check to see if the object exists yet.

Answer 4

If you're using publishing pages there is a simple solution to execute javascript only in display (or edit) mode. You can use EditModePanel control to render html depending on the display mode (display or edit). Here is an example:

<PublishingWebControls:EditModePanel ID="EditModelPanel1" runat="server" PageDisplayMode="Edit">
    <h1>You are in EDIT mode</h1>
    <!-- Place you're javascript for execute only in edit mode -->
</PublishingWebControls:EditModePanel>

<PublishingWebControls:EditModePanel ID="EditModelPanel2" runat="server" PageDisplayMode="Display">
    <h1>You are in DISPLAY mode</h1>
    <!-- Place you're javascript for execute only in display mode -->
</PublishingWebControls:EditModePanel>

I hope this can help you.

Answer 5

Declare the javascript variable "IsInPageEditMode" on master page at top as below...

<script type="text/javascript">
    var _fV4UI = true;
    var IsInPageEditMode = false;
</script>

Insert the below mention code immediate after the above code...

<PublishingWebControls:EditModePanel runat="server" id="EditModePanelJSNone">
     <script type="text/javascript">
        IsInPageEditMode = true;
     </script>
</PublishingWebControls:EditModePanel>

Now you can use JavaScript variable IsInPageEditMode whenever you want it...

I am using this code in my existing various applications. We dont face any problem till date. If you face any problem please let me know.... Thanks....

Hope this will help you....

Answer 6

Using JQuery

if($("#MSOLayout_InDesignMode").attr('value')== "1")
{

}

Answer 7

I have this question many times and bored while trying to find good solution. Dont understand why microsoft not include method which can easy determine mode of display page: display or edit. It have many advices of check different variables, but it cant uniquely say that page in design on different type of page(webpart page and wiki page) and on postback or not.

Is finally tired me and i write this:

    public static bool IsDesignTime()
    {
        if (SPContext.Current.IsDesignTime) return true;

        if (HttpContext.Current.Request.QueryString["DisplayMode"] != null)
            return true;

        var page = HttpContext.Current.Handler as Page;

        if(page == null) return false;

        var inDesign = page.Request.Form["MSOLayout_InDesignMode"];
        var dispMode = page.Request.Form["MSOSPWebPartManager_DisplayModeName"];
        var wikiMode = page.Request.Form["_wikiPageMode"];
        var we = page.Request.Form["ctl00$PlaceHolderMain$btnWikiEdit"];

        if (inDesign == null & dispMode == null) return false; //normal display

        if (we == "edit") return true; //design on wiki pages

        if (page is WikiEditPage & page.IsPostBack & inDesign == "" & dispMode == "Browse" & wikiMode == "") return false; //display wiki on postback


        if (inDesign == "" & dispMode == "Browse" & (wikiMode == null | wikiMode == "")) return false; //postback in webpart pages in display mode

        if (inDesign == "0" & dispMode == "Browse") return false; //exiting design on webpart pages

        return true;
    }

I hope this will save someone some time and nerves.

Answer 8

How about checking the ID parameter at the query string if there then you are in edit mode

Answer 9

There must be a bug with the Team site template in SharePoint 2010. This template is the only one where the hidden property MSOLayout_InDesignMode does not change to '1' when you switch to Edit/Design mode. It never has a value. Consequently, I have not been able to detect edit mode in a team site. For me, my issue is that I have some Jquery code to leverage Typekit functionality (more graphical fonts using CSS) and when this runs in edit mode, it causes a sp.ui.rte.debug.js access denied error, which in turn prevents any of the ribbon drop downs (e.g. font) from working.

Answer 10

alert(g_disableCheckoutInEditMode);

Answer 11

I just use this handy javascript function...

function IsDesignMode() {
    var inDesign = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode;
    if (inDesign != null && inDesign.value == "1") return true;

    var dispMode = document.forms[MSOWebPartPageFormName].MSOSPWebPartManager_DisplayModeName;
    if (dispMode != null && dispMode.value == "Edit") return true;

    return false;
}

Answer 12

SP.Ribbon.PageState is commonly used to perform specific actions based on the state. isInEditMode() is used to determines whether the page is currently being edited.

var InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();

if(InEditMode){

       // page in edit mode
}

Answer 13

This has worked for me for many years on publishing/non-publishing pages/everywhere. Just another option to add to the already large list added here.

this.inEditMode = function () {
  var result = (window.MSOWebPartPageFormName != undefined) && ((document.forms[window.MSOWebPartPageFormName] && document.forms[window.MSOWebPartPageFormName].MSOLayout_InDesignMode && ("1" == document.forms[window.MSOWebPartPageFormName].MSOLayout_InDesignMode.value)) || (document.forms[window.MSOWebPartPageFormName] && document.forms[window.MSOWebPartPageFormName]._wikiPageMode && ("Edit" == document.forms[window.MSOWebPartPageFormName]._wikiPageMode.value)));
  return result || false;
},