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?
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
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");
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.