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 in on the 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

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 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

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 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

SP.Ribbon.PageState.Handlers.isInEditMode() 

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

Answer 7

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

Answer 8

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 9

alert(g_disableCheckoutInEditMode);