DotNetNuke 6 uses several jQuery plugins to provide an updated, modern, and consistent user interface. These plugins are also available for use by third party developers. These plugins are best used in conjunction with the DNN HTML form patterns.

Overview

jQuery Plugins, by nature, are reusable client-side components. The following components are included starting in DotNetNuke 6. The plugins were created with the following 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
  

While the usage of the plugins with their default settings is encouraged, should the developer need to override them the option to do so is provided.

Registration

In a manner that is similar to registerting jQuery, developers can use any of the plugins (listed below) but they must register the plugins in their modules OnInit or OnLoad method.

 DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration(); 

The following dependencies are loaded by loading the plugins:

• jQuery
• jQuery UI
• jQuery hoverIntent
  

Important note: "dnn.js" is also a dependency (it provides a method for writing/reading cookies used in tabs and panels) and it is *not* loaded by using this method. Most of the time dnn.js is already loaded by something else on the page, therefore impact of not enforcing this dependency is generally minimal. However, it is best to do the following along with the above:

 ClientAPI.RegisterClientReference(this.Page, ClientAPI.ClientNamespaceReferences.dnn); 

Here is the related Gemini issue: DNN-18457 - RequestDnnPluginsRegistration method does not load all required dependencies

While the plugins registration method above takes care of requesting registrations for both jQuery and jQuery UI, the jQuery in DotNetNuke page contains details about registering jQuery or jQuery UI individually.

Initialization

When initializing any of the following client side plugins there are a few JavaScript best practices to keep in mind:

• Avoid global scope unless necessary (see: JavaScript Global Variables and How to Avoid Global Variables in JavaScript)
• Make sure you safely access the $ object (see: jQuery noConflict Documentation)
• If appropriate, wire up your logic on the document ready event (see: jQuery Ready Documentation)
• If necessary, make sure you account for ASP.NET Update Panels (see: Sys.WebForms.PageRequestManager endRequest Event Documentation)
  

Below is a very detailed example of safely setting up your JavaScript initialization code.

Detailed Example

/* Wrap your code in a function to avoid global scope and pass in any global objects */

/* globals jQuery, window, Sys */

(function ($, Sys) {



    /* wire up any plugins or other logic here */

    function setUpMyModule() {

        // your initialization code here...

    }



    /* wire up the call to your function on document ready */

    $(document).ready(function () {

    

        setUpMyModule();

        

        /* Wire up the call to your function after an update panel request */

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {

            setUpMyModule();

        });

    });

    

} (jQuery, window.Sys)); // pass in the globals. Note the safe access of the jQuery object.

Although you'll find examples like the one above in the DNN core, you will also find simpler
versions as well. You don't always need to use the document ready event, or account for update panels. At a minimum it is suggested that JS initialization look like this:

Basic Example

(function($) {

 // your initialization code here...

})(jQuery);

This example avoids global scope and safely accesses the jQuery object.

DotNetNuke jQuery Plugins

The following plugins are available for use in DotNetNuke 6:

• dnnAlert - displays a notice in a modal dialog (uses jQuery UI)
• dnnConfirm - displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI)
• 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)
• dnnTooltip - Provides help/info tooltip functionality
• dnnPreview - Helps preview skins and containers in a new window
  

Additional Resources

• Updating the Contest Module for DotNetNuke 6