logo

Premium Support
24/7/365

Premium support customers may submit help-desk tickets using the form below.
Alternatively, the help-desk system can be accessed directly at support.maxiomtech.com. support@maxiomtech.com
info@maxiomtech.com
+1 (703) 942-9420
 

How to Add jQuery To Your DNN Skin?

how to add jquery to dnn skin

How to Add jQuery To Your DNN Skin?

DNNCorp_logo_lrgAt this point you’ll be hard-pressed to find a site that does not use jQuery. It has become a requirement for many to bring flash like experience in the form of photo sliders or fast responding ajax applications.

How to Add JQuery to DNN Skin?

Over that time adding it to DotNetNuke (DNN) has not always been straight forward. DNN ships jQuery as part of the core framework and you might assume that it’s always available. But one of the most widely unknown issues is that it must be requested on every page in order for it to be available.

Common Symptoms: 

  • Main menu does not show sub items.
  • Homepage slider does not rotate.
  • Layout is malformed.
  • Works fine when logged in but not when logged out.
[box type=”info”]When you login as an administrator jQuery will always be available since the control panel bar request it. However if you logout on that same page it might not have been requested by any module or skin object on that page.[/box]

Not Recommended Ways

Do Not: Add script tag into page settings or in your skin file.

Why? This will potentially add multiple reference to your page. The real issue is if any plugins are registered between the first reference and the second reference they won’t be available after the second reference is instantiated.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Recommended Ways

In your skin file you can refer and add the control for jQuery. This will ensure that jQuery is available on every single page and that it will only be referenced one time. You also get the benefit of the Client Dependency Framework (CDF).

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

You can optionally add public properties to register jQuery UI, DNN jQuery Plugins and Hover Intent.

<dnn:jQuery runat="server" jQueryUI="true" DnnjQueryPlugins="true" jQueryHoverIntent="true"></dnn:jQuery>
[box type=”note”]Note: The search skin object will also register jQuery.[/box]
Jonathan Sheely

Sr Software Engineer at InspectorIT. Jonathan is an out of the box thinker who has over 10 years experience building and supporting web application software and infrastructure. Jon specializes in ASP.NET C#, Javascript and CSS but is willing to learn anything that gets the job done.

1 Comment
  • Van Vangor
    Posted at 10:35 am, May 6, 2014

    Jonathan:

    Thanks for the concise post!

    DNN 7.2 also ships with the jQuery Migrate Javascript library. Do you know if there is a DNN “sanctioned” method for loading it from the skin, or should I use the old fashioned script tag?

    See Ya!
    Van