Using JavaScript file in Elements.xml

Question

I am trying to create a custom ribbon and in my project I have created a JavaScript file.

From this and this question I was able to figure out that I can use <CustomAction> tag to import the JavaScript file.

<CustomAction Id="Ribbon.Library.Actions.Scripts"
 Location ="ScriptLink" ScriptSrc="/_layouts/MyJSFile.js" />

Now my Elements.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction Id="Ribbon.Library.Actions.Scripts" Location="ScriptLink"
                ScriptSrc="/_layouts/CustomRibbonButton/JavaScript1.js" />

    <CustomAction
    Id="Ribbon.Library.Actions.AddAButton"
    Location="CommandUI.Ribbon"
    RegistrationId="101" RegistrationType="List"
    Title="Add a Ribbon Button">
        <CommandUIExtension>
            <CommandUIDefinitions>
                <CommandUIDefinition
          Location="Ribbon.Library.Share.Controls._children">
                    <Button Id="Ribbon.Library.Share.NewRibbonButton"
            Command="NewRibbonButtonCommand"
                    Image16by16="_layouts/15/images/placeholder16x16.png"
                    Image32by32="_layouts/15/images/placeholder32x32.png"
                                    LabelText="Hello World"
            TemplateAlias="o2" />
                </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
                <CommandUIHandler
          Command="NewRibbonButtonCommand" 
          CommandAction="javascript:getFiles()" />
            </CommandUIHandlers>
        </CommandUIExtension>
    </CustomAction>
</Elements>

When I load my page in IE in Network tab of IE developer tools I can see 404 error that it is not able to find the path /_layouts/customribbonbutton/javascript1.js. I updated my <CustomAction> tag to this:

<CustomAction Id="Ribbon.Library.Actions.Scripts" Location="ScriptLink"
                ScriptSrc="/_layouts/JavaScript1.js" />

But I still get the same 404 error, albeit for different path.

What am I doing wrong here?

Answer 1

You need to append 15 to _layouts i.e /_layouts/15 in order to get hold of the file as you are working on SP 2013.

UPDATE

Put the javascript file under CustomRibbonButton folder in your project and use /_layouts/15/CustomRibbonButton/JavaScript1.js. The hive folder for SharePoint 2013 is 15. It used to be 12 for MOSS and 14 for SP 2010. This needs to be used explicitly as SP 2013 also supports solutions which are 2010 based and if you don't mention 15 in your code, then it will look for the file in 14 hive.

Answer 2

Add the following between the <CommandUIExtension> open and close tag

<CommandUIHandler
                    Command="NewRibbonButtonCommand"
                    CommandAction="javascript:Convertion();"
                    EnabledScript="javascript:enable();"/>