How to set relative path to script from ascx

Question

I have created custom DNN module.
And I want to use masonry plugin in it.
So in the module project in VS I have created Scripts folder and put JS files in there.
On the view of ascx file I have added:

<script src="Scripts/jquery.infinitescroll.min.js"></script>
<script src="Scripts/masonry.pkgd.js"></script>
<script src="Scripts/imagesloaded.js"></script>

But when I load the page eith module in console I get:

GET http://dnn7site/resources/shared/scripts/jquery/jquery.min.map 404 (Not Found) Masonry:457
GET http://dnn7site/jquery.min.map 404 (Not Found) Masonry:464
GET http://dnn7site/Demos/Scripts/masonry.pkgd.js 404 (Not Found) Masonry:751
GET http://dnn7site/Demos/Scripts/imagesloaded.js 404 (Not Found) Masonry:752
GET http://dnn7site/Demos/Scripts/jquery.infinitescroll.min.js 404 (Not Found) 

What is the way to add and set a relative path to the scripts in DNN?

Answer 1

Try including the full path to the resource files, as per the instructions on the Masonry getting started documentation:

Include the Masonry script in your site.

<script src="/path/to/masonry.pkgd.min.js"></script>

For example:

<script src="/desktopmodules/com.demo.masonry/Scripts/jquery.infinitescroll.min.js"></script>
<script src="/desktopmodules/com.demo.masonry/Scripts/masonry.pkgd.js"></script>
<script src="/desktopmodules/com.demo.masonry/Scripts/imagesloaded.js"></script>

Answer 2

You should be using the client dependency framework to include scripts in DotNetNuke (feature was added in DNN 6.1+). It will control priority and allow the framework to combine scripts together for a more efficient payload.

The wiki entry for the information is here:

http://www.dnnsoftware.com/wiki/Page/Client-Resource-Management-API

In essence, it's as easy as this:

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

<dnn:DnnJsInclude runat="server" FilePath="~/Resources/Shared/Scripts/jquery/jquery.hoverIntent.min.js" />

If you want to do it through code, try this:

RegisterStyleSheet(Page page, string filePath) //default provider and default priority

Answer 3

For scripts or css in my custom module, I usually put the call to ClientResourceManager in my control's PreRender event. I use the ControlPath to get the relative path of my module control to reference the scripts. Example:

protected override void OnPreRender(EventArgs e)
{
    ClientResourceManager.RegisterStyleSheet(this.Page, this.ControlPath + "css/view.css");
    ClientResourceManager.RegisterScript(this.Page, this.ControlPath + "js/view.js");
}