Search code examples
javascriptjqueryasp.netdotnetnukedotnetnuke-module

How to import JQuery to custom dnn module

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

Solution

  • 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.