Add jQuery to EditForm.aspx

I needed to remove the content editor dropdown you sometimes see in the form.
The most efficient way to do this is to add een Content Editor WebPart to the form of your list.
This way you could also add any javascript to your edit form, or other things to your page.

Here is the code:

SPList list = web.Lists[LIST_NAME];
string EditFormURL = list.DefaultEditFormUrl;

web.AllowUnsafeUpdates = true;

SPFile file = web.GetFile(EditFormURL);

if (null != file)
      using (SPLimitedWebPartManager mgr = file.GetLimitedWebPartManagerPersonalizationScope.Shared))
if (null != mgr)
//create new webpart object
ContentEditorWebPart contentEditor = new ContentEditorWebPart();
//Add content to CEWP
XmlDocument xmlDoc = new XmlDocument();
XmlElement xmlElement = xmlDoc.CreateElement(“Root”);
xmlElement.InnerText = GetValidationScript().ToString();
contentEditor.Content = xmlElement;contentEditor.Content.InnerText = xmlElement.InnerText;

//Add it to the zone
mgr.AddWebPart(contentEditor, “0”, 0);


private StringBuilder GetValidationScript()

StringBuilder sbScript = new StringBuilder();
string sJQueryURL = “_layouts/JQuery.js”;//exact path of your js file
sbScript.Append(“<script src='” + sJQueryURL + “‘type=’text/javascript’></script>”);
sbScript.Append(“<script type=’text/javascript’>”);
sbScript.Append(“$(document).ready(function() { “);
sbScript.Append(@” $(‘select[id*=””ContentTypeChoice””]’).parent().parent().hide();”);
sbScript.Append(“}); “);
return sbScript;





Deploy my WSP to a certain WebApplication and not Globally

Most often you want your customsolution to be deployed to only a specific webapplication but SharePoint won’t allow it.

It’s actually very easy to fix this by tricking SharePoint.


In your package manifest you add a safe control:

<Solution xmlns=””&gt;
<Assembly Location=”dll_name_of_your_solution.dll” DeploymentTarget=”GlobalAssemblyCache”>
             <SafeControl Assembly=”dll_name_of_your_solution,Version=,Culture=neutral, PublicKeyToken=****************” Namespace=”namespace_of_your_solution” TypeName=”*” />


JQuery into SharePoint

Most of you have already worked with jQuery, if you have not shame on you.
I have worked with jQuery a lot the past years, client site scripting gives you more flexibility towards your customers.
The way you can manipulate the DOM is just great.

Many people find it hard to start with jQuery, the first step of the process is to get your jQuery into SharePoint.
There are several ways of doing this which I’ll be explaining to you in this post.

First we have to download jQuery  here. Just save it somewhere so that you know were it is.

The ways that I know to import jQuery into SharePoint are the following:

  • Put a reference into your MasterPage
  • Put a reference in your webpart or your layouts page
  • Load it programmatic
  • Through the content editor webpart
  • With a feature

1. Put a reference to Jquery

You can tell your webpart, layouts page and master page to load the script directly.
Keep in mind if you do this in the MasterPage then everywhere in your SharePoint the jQuery is loaded.

This technique is the most simple of loading the jQuery.
You have to open SharePoint designer for this, and open the site where you want to place the jQuery.

Next thing you have to select ‘all files’ and then catalog.

Jquery SPS 001

Next you have to select your MasterPage en select ‘Edit file in advanced Mode’

Jquery SPS 002

Next you will see the HTML and stuff of your MasterPage , there we can place a link to the jQuery file.
We can link directly to the jQuery site

Jquery SPS 004

or to our local JQuery file , stored somewhere in the layouts folder of SharePoint in this case

Jsurty local file system  master page linked to layouts folder

Next you just save and publish the masterpage and your are done.

And how do I know that it worked ????
If you open your IE explorer en type F12 which will open the development tools of IE, you’ll see a tab called scripts.

Jquery SPS script loaded from LAyouts folder

Jquery SPS script loaded with direct link

Told you it was simple.
This technique can be repeated for a VisualWebPart or a Layouts page.
I’m not gonna show because it is just copying the same script tags
2. Load the script programmatic

Personally I prefer this way.
It’s easy, it’s faster, no SharePoint designer, Visual Studio and so on

When you’re using jQuery you are going to develop something, so you’ll be using VS anyway.
So you can deploy the jQuery along with your solution.
I’m just gonna create a very simple webpart to demonstrate.
My Visual Studio project looks like this:

vs 001

I added a link to the SharePoint Layouts/1033 folder in my Visual Studio, then I added the jQuery file which I downloaded earlier in this folder in Visual Studio.
The reason I placed it there is because SharePoint also put it’s JavaScript files there.
Now let’s add this thing into our WebPart, but lets test this.
Lets create a simple “HelloWorld.js” that throws an alert when the page is loaded, and put this also in the 1033 folder.

vs 003

Then you deploy the webpart and add it to your page, now every time the page is loaded it will throw an alert.

vs 004

Using this techniques you do not have to open SharePoint designer every time you have to add a jQuery file.
To my point of view this techniques gives you way more flexibility.

3. Content Editor WebPart

This is the most simple technique there is.
Just edit the page add add a CEW.

Edit the webpart and just add this in the text:

// <![CDATA[
javascript” src=””&gt;
// ]]>


Click ‘ok’ and you are done.
I find this more unprofessional but it would do the trick, but there are risks to it.

4. Using a feature

This is also a very simple technique to load the general jQuery files into SharePoint.

Add to your solution a new Module.
Delete the txt file that comes with the Module, and change the content of the Element.xml file to look like this:

feature Jquery 001

In the screenshot you’ll see I have put the Module into a feature and that is it.
Go to your feature in SharePoint and activate

feature Jquery 002

You can test with the development tools to check if the feature is deactivated and deactivated.

Hope it helps.

Leave a comment