jQuery and SharePoint 2010 - How can I tell is the page is in edit mode, using javascript?

Question

I have some javascript in a CEWP that I want to execute only when the page is in display mode. I've used firebug to scour the page for some "msEditMode" type of variable or something I can rely on.

I've seen tons of questions and answers about how to tell if a page is in edit mode, from server side, but I cannot find a solution for how to tell if the page is in edit mode, client side.

Can anyone point me in the right direction? Do I need to create a web part that simply emits such a variable? (That seems like overkill to me.)

Thanks so much!

Answer 1

Rob's solution - looking at the button - looks like a viable approach.

Also, feel free to take a look at my Easy Tabs v5 code:

http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Easy-Tabs-v5.aspx

In the case of the Easy Tabs, I used a different approach because I needed the code to work in both SP 2007 and SP 2010. Here are the tests I included:

p.getAttribute("contenteditable")=="true"; //(where p is a Web Part zone)
document.forms[0].elements["MSOLayout_InDesignMode"].value=="1";
document.forms[0].elements["_wikiPageMode.value"]=="true"; //(wiki page)

Answer 2

I found Amal Hashim's blog post: Javascript Detect SharePoint Page In Edit Mode There are different approaches for pages, wikis and publishing pages. I combined them into one helper function:

function isEditMode() {
    var publishingEdit = window.g_disableCheckoutInEditMode,
        form = document.forms[MSOWebPartPageFormName],
        input = form.MSOLayout_InDesignMode || form._wikiPageMode;  
    return !!(publishingEdit || (input && input.value));
}

This returns true if the page is being edited, and false if the page is in the view mode.

Answer 3

A somewhat cheesy approach is to look for an element on the page that exists when the page is in edit mode. For example, when in edit mode the "Editing Tools" ribbon appears and there is a save icon off to the left. If you use the IE developer tools, you'll see the code for the save button looks like this:

So using jQuery you can check for the existence of "Save & Close" on the page...or choose a different element entirely -- one that is unique.

Keep in mind that different page types (blogs, wikis, web part pages) may or may not use different tags so this may not work across the board. So double-check the page you're working with before you include the script.

Answer 4

Found more info. If you want to do it through the object model, see if either of these links helps:

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.publishing.webcontrols.editmodepanel.aspx

Some example implementations of the aforementioned class: http://mystepstones.wordpress.com/2008/09/23/detecting-the-current-mode-displayedit/