Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
add comment

9 Answers 9

up vote 53 down vote accepted

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
}
share|improve this answer
    
Hello @omlin thanks for your quick response. However for some reason this returns always empty regardless of the page mode, any ideas? am I doing anything wrong? I am testing in a standard team site homepage –  Renzo May 16 '11 at 14:48
    
I've tested on empty site template. Now I see: this method doesn't work for wiki pages, but for simple pages and webpart pages it works. –  Andrey Markeev May 16 '11 at 15:41
    
I've updated my answer with solution for wiki pages. Note: this was NOT tested for publishing pages.. –  Andrey Markeev May 16 '11 at 15:52
    
i know little about sharepoint, but i think that if (inDesignMode = "1") is a typo :P –  gion_13 May 16 '11 at 20:38
    
@gion_13 sure, fixed, thanks! :) –  Andrey Markeev May 16 '11 at 21:03
show 2 more comments

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

share|improve this answer
1  
Welcome to SharePoint! While this post may answer the question, we prefer more details such as "why". Please edit your post with additional details. See How to Answer for general guidelines. –  Kit Menke Aug 15 '11 at 20:41
1  
When you edit a page and then save it, the Query String parameters persist, so using the Query String wouldn't actually tell you whether or not you are in edit mode definitively. –  John Chapman May 7 '12 at 15:25
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Hi Alan, the Default page for the team site is a wikipage so you should try @omlin second suggestion document.forms[MSOWebPartPageFormName]._wikiPageMode.value, hope this helps –  Renzo Jan 30 '12 at 16:32
    
Also @Matt-Dempsey suggestion works well! –  Renzo Jan 30 '12 at 16:36
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Ok, but this is C# not JavaScript, question was specific to JS –  Bogdan M. Feb 10 at 15:32
add comment
alert(g_disableCheckoutInEditMode);
share|improve this answer
    
While this post may answer the question, we prefer more details such as "why". Please edit your post with additional details. See answer for general guidelines. –  SPDoctor Mar 10 '12 at 10:23
add comment

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

share|improve this answer
add comment
SP.Ribbon.PageState.Handlers.isInEditMode() 

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

share|improve this answer
    
works for SharePoint 2013 December CU –  Bogdan M. Feb 10 at 15:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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