Include javascript file in sharepoint visual web part

Question

I am using sharepoint 2010 and developing a visual web part. I had javascript functions on the ascx file and they all used to work file.Now I have moved them to a single javascript.js file and deployed it to the _layouts folder on server.

And I have put the below line on the ascx file to reference to that file

<script src="/sites/xxxxx/_layouts/customwebparts/javascript.js" type="text/javascript"> </script>

and then on the ascx.cs file and I am using the methods defined in this file for eg.,

      btnCancel.Attributes.Add("onclick", "{return Action(Cancel the form?)};");

But it is not working, it is not displaying the confimration box ...Am I referencing the wrong way. Please help me ....

Matt Klepeis · Accepted Answer · 2011-08-11 02:08:40Z

9

To reference a javascript file from within a SharePoint Visual Web Part you need to use the SharePoint:ScriptLink tag (example below):

<SharePoint:ScriptLink ID="<someid>" runat="server" Name="/_layouts/...<Path>"></SharePoint:ScriptLink>

I add a layouts mapped folder to my Visual Web Part project and place a scripts folder within the default folder, which I believe is the projects name. Following this model ensures that the javascript file is always kept up-to-date during deployment. The 'Name' property in the above tag is just the path to the javascript file relative to _layouts, so something like "/_layouts/ProjectName/Scripts/myjavascript.js".

As an FYI if you want to use CSS as well there is a SharePoint:CssRegistration tag as well. I find these are the 2 that I use the most.

edited Aug 11, 2011 at 2:08

answered Aug 11, 2011 at 1:53

Matt Klepeis

1,7221 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Janet Over a year ago

If the Javascript file is loaded on the Styles Libary , can you please let me know how do I include it on ascx file.<script src="/sitecollections/style library/customwebparts/javascript.js" type="text/javascript"> </script> I tried this but it did not work.

Matt Klepeis Over a year ago

Take a look at this link, I believe the 3rd code block has what you are looking for. surinder.computing-studio.com/post/2011/02/03/…. <SharePoint:ScriptLink ID="ScriptLink1" Name="<% $SPUrl:~SiteCollection/Style Library/Core Styles/jquery.js%>" runat="server" />

Matt Klepeis Over a year ago

If you use F12 tools to debug the page that the Javascript is suppose to run on does indicate that the javascript is being reached?

Gyonder Over a year ago

with Sharepoint 2013 the path should be "/_layouts/15/ProjectName/Scripts/myjavascript.js"

steveareeno Over a year ago

^ this comment brings up a point that came back to bite us during an upgrade to 2013. There are two paths to the layout folder after upgrading: 14 and 15. if you (in 2010) referenced using /_layouts, in 2013 that points to the 14 folder, To point it to the 15 folder you have to use /_layouts/15. I had to adjust permissions on the 14 layouts folder after the upgrade to avoid having to go back through all my web parts and change the folder reference to 15. the only reason I bring it up is if you will be upgrading to 2016, this could change again, effectively breaking your links.

Andrea · Accepted Answer · 2014-11-12 16:30:16Z

1

You should put your javascript file in the Layout mapped folder and use the SharePoint:ScriptLink tag:

    <SharePoint:ScriptLink id="ScriptLink1" runat="server" Localizable="false" Name="some-layout-subfolder/file.js" />

If you have a file not found error you should check that the Localizable attribute is set to false and from Visual Studio, in the properties of the js file, Build Action should be set as Content and Deployment Type should be TemplateFile.

Check here for more details: http://blog.netgloo.com/2014/06/19/include-javascript-and-css-files-in-your-sharepoint-2010-visual-web-part/

edited Nov 12, 2014 at 16:30

answered Jul 5, 2014 at 10:05

Andrea

16.7k20 gold badges71 silver badges86 bronze badges

Collectives™ on Stack Overflow

Include javascript file in sharepoint visual web part

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related