How to import JQuery to custom dnn module

Question

I have created custom DNN module that should use some JQuery plugins.
I loaded plugins fine.
But getting error:

Uncaught TypeError: undefined is not a function imagesloaded.js?cdv=18:93
Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' Masonry:755
GET http://dnn7site/jquery.min.map 404 (Not Found) Masonry:464
GET http://dnn7site/resources/shared/scripts/jquery/jquery.min.map 404 (Not Found)

And I think that this is because JQuery is not imported in my custom module. I included other JS files like:

<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/jquery.infinitescroll.min.js"  />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/masonry.pkgd.js"  />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/imagesloaded.js"  />

But I don't know how to import JQuery, any help?
I am using DNN 7.1.1

Answer 1

Don't include jquery using the method described in the other answer. This will potentially cause conflicts with the jquery version that may be bundled with your DNN installation and/or other modules.

To include jQuery in DNN, it's as follows:

DotNetNuke.Framework.jQuery.RequestRegistration()

If you want jquery UI, use:

DotNetNuke.Framework.jQuery.RequestUIRegistration()

If you want to do it through a ASCX file, use this:

<%@ Register TagPrefix="dnn" TagName="JQUERY" Src="~/Admin/Skins/jQuery.ascx" %>
<dnn:JQUERY ID="dnnjQuery" runat="server" />

More information can be found here:

http://www.dnnsoftware.com/wiki/Page/jQuery

The version of jquery and whether it uses a hosted file can be configured in host settings -> advanced settings -> jquery settings.

Answer 2

If jQuery is required, try downloading the jQuery library and placing the jQuery script file in the same location as the other script files, and ensure that the jQuery library is reference before any other script files that require jQuery. For example:

<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/jquery-1.9.1.min.js"  />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/jquery.infinitescroll.min.js"  />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/masonry.pkgd.js"  />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/com.demo.masonry/Scripts/imagesloaded.js"  />

However, the Masonry documentation suggests that jQuery is not required to run the plugin, so your problem may lie elsewhere

jQuery is not required to use Masonry. But if you do enjoy jQuery, Masonry works with it as a jQuery plugin.