Customize or Override core.js file functions in Sharepoint

Core.js JScript file located @ 12 or 14 hive , depending upon the SharePoint version installed on a system, provides several in-built javascript functions. This is an out-of-box aka OOB sharepoint file.
[12/14 hive is @ %PROGRAMFILES%\Common Files\Microsoft Shared\Web Server Extensions\]

These functions are invoked internally by OOB visual webparts in sharepoint.

For e.g.,
Any Document library View page listing all items, hosted in a sharepoint site, references core.js file. Functions may get invoked when a user hovers any item name column or when an Add New Item link is clicked.

You may be thinking about the scenarios where you may need to customize a function defined in core.js file.

Where\Why?
There can be many. Yes. One of them which i faced is related to Browser compatibility.

Add modal pop up opening as a full page

On XP SP3 build’ IE7, a javascript error was thrown on clicking “Add New Item”. Due to this, an AddItem page was opening as a full page rather than a modal pop-up. This was not even reproducible on IE9 running into IE7 compatibilty and document mode.
The faulty function was: function UseDialogsForFormsPages(c){…}

You may face other problems but cause could be the same.

Note: However, my recommendation is NOT to OVERWRITE the core.js.

You may now be confused. Many questions may be coming into your mind – What is the purpose of this blog then?, How should i achieve if i ever need to?

Well, i recommended not to overwrite core.js. The reason being that this is OOB file and may get modified in the next version of sharepoint.
What you should do is provide a method override. Another javascript function which has a same prototype but a body definition as per your requirements.

This is how you should do.

How?

Create a separate js file, say CustomCore.js
Provide a method override of faulty function, say function UseDialogsForFormsPages(c){…} in CustomCore.js

This will hide the same function definitions declared on top of this definition, if any.

Deploy this javascript file relative to a correct Hive 12 or 14 as a part of solution deployment, say to ~/_layouts/js/
Include core.js and CustomCore.js explicitly either on your page or in your master page

This is important. Without this, whatever you did earlier, all will go in vain.
You can declare $lt;Sharepoint:ScriptLink> tag to achieve this same.



<Sharepoint:ScriptLink ID="ScriptLinkCore" language="javascript" name="core.js" Defer="true"  runat="server"/>

     <Sharepoint:ScriptLink ID="ScriptLinkCustomCore" language="javascript" name="~/_layouts/js/customcore.js" Defer="true"  runat="server"/>

Why does the above trick work?
The reason being that if a same javascript function is defined more than once on a page then the last definition of a javascript function is used.

For e.g. if your Page SomePage.aspx has a following html



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

</head>

<body>

<script type="text/javascript">

    function SomeFunction() {

        alert('First defnition');

    }

</script>

<script src="someSourceUrlGoesHere" type="text/javascript" /> <!--defining SomeFunction()-->

<script type="text/javascript">

    function SomeFunction() {

        alert('Second defnition');

    }

</script>

</body>

</html>

You will see an alert with a message ‘Second Definition’ if javascript:SomeFunction() is invoked from anywhere on a page.
Using the above approach, you just need to define a faulty function in your custom javascript file and you are all set.

Possible Errors

Behavior is still the same

Resolution:

Verify if your custom js file is deployed
Verify that your changes in a page/master page referring core.js and custom.js is deployed
Clear the browser cache