Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

DotNetNuke 6: jQuery, jQuery UI, and New jQuery Plugins

There are many exciting updates around jQuery in DotNetNuke 6. This post will provide an overview of the changes and a recap of some of the existing functionality to give you a good picture of the many ways jQuery is used, and how you may use it moving forward.



DotNetNuke 6 uses jQuery version 1.6.1. This version represents a stable upgrade from jQuery 1.5.2. The framework takes care of registering the jQuery library when it is needed for its own use, but if you’d like to use it in your own development, you’ll need to request it be registered to ensure that it gets loaded. Using the API is strongly recommended, you will run a high risk of causing unwanted performance and compatibility issues if you bypass the API.

You may opt to use a different version of jQuery, or the same version but just hosted in a remote location, by specifying the hosted URL in your application’s host settings. Community members frequently choose to use the  Google CDN Library for performance benefits.

jQuery UI

DotNetNuke 6 marks the first version that includes jQuery UI in the core framework. The version shipped is 1.8.13, and just like jQuery, the library file reference can be managed in the application’s host settings and requested through the API. If you need to use jQuery UI and safely support DotNetNuke 5 as well, please visit Bruce Chapman's blog on Using jQuery UI with DotNetNuke 5 and 6 in the same module for details and example code.

jQuery UI features that are used in the core are modal dialogs (also called popups) and tabs. These features are used in three of the new jQuery plugins (see below for more info), as well as in the admin modal popups feature. For more information about the modal popups, please read Tips on how to make your Module Popup-Friendly by Vincent Nguyen, and check out the DotNetNuke 6 Developer Quick Start in the wiki as well.

DNN jQuery Plugins

DotNetNuke 6 uses several jQuery plugins to provide an updated, modern, and consistent user interface. These plugins are reusable client-side components that naturally layer functionality on top of the new DNN HTML form pattern.

The following information is pulled from the Reusable DotNetNuke jQuery Plugins wiki page, where you can find details, usage examples, and best practice information.

The plugins were created with the following high level goals:

  • Allow for reuse across the framework for a consistent user experience
  • Physically separate all plugin logic from the markup (separate file)
  • Avoid duplicate file registrations by exposing a public API method to register script
  • Inject all markup information/context through plugin settings on initialization
  • Use convention based defaults that match the DNN 6 form pattern for ease of implementation and to encourage usage of consistent form pattern
  • Provide the flexibility to override the default settings when necessary

Site Settings features the dnnTabs, dnnPanels and dnnExpandAll plugins.

The following custom components are included in DotNetNuke 6. Can you spot the three that are being used in the screenshot of the Site Settings page above?

  • dnnAlert – Displays a notice in a modal dialog (uses jQuery UI’s dialog)
  • dnnConfirm – Displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI’s dialog)
  • dnnPanels – Displays content areas in regions that are expandable and collapsible
  • dnnExpandAll - Works with panels to expand or collapse all regions
  • dnnTabs - Displays content areas in a tabbed format (uses jQuery UI’s tabs)
  • dnnTooltip - Provides help/info tooltip functionality
  • dnnPreview - Helps preview skins and containers in a new window

jQuery UI Themes

In addition, the core framework uses a custom jQuery UI theme to style the dialogs and tabs. A jQuery UI theme is simply CSS that targets the CSS classes generated by the jQuery UI framework. This style can be found in the default.css file.


The most important characteristic of this jQuery UI theme is that it takes advantage of CSS Scope to target only the elements that are necessary for the core to function properly. What this means is that it only targets the dialogs that have the “dnnFormPopup” CSS selector (such as in the image above) and the tabs that have the “dnnForm” class (such as in the previous image of the site settings page). This technique helps to prevent conflicts with jQuery UI components that are used elsewhere.

Very important: in order to use a jQuery UI theme in an extension and not break the default theme – you will need to use CSS Scope as well. If you do not, your CSS theme will apply to all elements and more than likely result in a visually disjointed site.

Please read the Using Multiple jQuery UI Themes on a Single Page article from the Filament Group for more information, and also check out the jQuery UI download page, paying special attention to the CSS Scope section under the “Advanced Theme Settings” section.


Over time, jQuery has built a larger and larger presence within the DotNetNuke Framework and community as well. Yet, DotNetNuke 6 is the first version to make use of jQuery to such a great extent.

I would expect that this trend will continue, and I see that trend in a very positive light. We’re building tools that help provide our community with a more compelling and a more modern user experience. At the same time these tools are helping to make UI development for those within DotNetNuke Corporation and those in the community easier and more consistent.

All of this is being done with the power, relative simplicity, and fun that comes along with jQuery. That’s not to say there won’t be occasional compatibility issues and stumbling points as we move forward – as the global nature of JavaScript and the breadth of our community does make things a bit tricky at times – but on the whole, I think we are making large strides in important areas, all to the benefit of the product and especially the community.


David rouin
very nice post..
David rouin Wednesday, June 03, 2015 6:31 AM (link)
Justin Goodman
Nice article Ian, thanks a lot for introducing these plugins in such a well-prescribed manner. Web plugins have brought a revolutionary change by boosting the development process up to manifolds. I mean, no one has to type those complicated codes again & again in order to insert particular functionality. They can just install a related plugin. How easy is that… isn’t it?.
Justin Goodman Friday, June 05, 2015 8:56 AM (link)

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (269)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?