How to Add jQuery To Your DNN Skin
At 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.
Over that time adding jQuery 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.
- 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.
Not Recommended Ways To Add jQuery
Do Not: Add script tag into page settings or in your skin file.
Why? This will potentially add multiple jQuery 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.
Recommended Way To Add jQuery
In your skin file you you can reference 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]