Sitecore Experience Editor : Save button is disabled

Recently I was involved in Sitecore 8.1 upgradation project and stumbled upon into a situation where save button was disabled in Experience Editor. I’d made text changes into many fields but save button was greyed out and was not allowing to save the text changes.

During troubleshooting, I’ve found that below error was appearing in web browser console:

TypeError: saveButtonState.onchange is not a function.

It seems the JavaScript used by Sitecore in edit mode and the JavaScript files in the webpage are conflicting somehow. When using the Experience Editor for editing pages that utilize the jQuery JavaScript library, editing might not function properly and few errors may occur. This can happen because the Prototype JavaScript library used by the Experience Editor may conflict with jQuery utilized by the page and cause the browser to interpret Prototype calls as jQuery ones. Prototype.js plug-in is also using the $ as the global variable.

To avoid editing issues in Experience Editor use jQuery JavaScript library in the No-Conflict mode. I’ve added below code in layout page to avoid conflict in the page editor mode.

@if (Sitecore.Context.PageMode.IsPageEditor)
{
<script>$.noConflict();</script>
}

Comments and suggestions are most welcome. Happy coding!