New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

dnnPreview jQuery Plugin

Return to previous page

  • 4/7/2015



dnnPreview jQuery Plugin

Last updated long time ago



(Enter the content of this article below)


This article is for a specific plugin. Please be sure to read the Introduction and Overview to jQuery Plugins which provides an introduction to the plugins.


This plugin is more specialized than the others – in that it encapsulates specific functionality for previewing skins and containers. It could however be used by a third party to preview skins or containers, so it is included here.

It operates on an html block that could consist of a dropdown for a skin, one for a container, and a preview link. It will handle parsing the drop down and building the appropriate URL to open in a new window to show to the user.
This is used in four places: module settings, page settings, site settings and host settings. The first two open the preview on the current page – whereas the second two open the preview on the home page.

Available Options and their Defaults

baseUrl: window.location.protocol + "//" + + window.location.pathname,
linkSelector: 'a.dnnSecondaryAction',
skinSelector: '',
containerSelector: '',
noSelectionMessage: 'Please select a preview option.',
alertOkText: 'Ok',
alertCloseText: 'close'

Usage Example

This example demonstrates using the plugin to preview a container. If you wanted to preview a skin as well, you would populate the "skinSelector" setting as well when initializing the plugin, making sure the selector resolves to the appropriate element which contains the skin values.


<div class="dnnFormItem dnnContainerPreview">
<dnn:label id="plModuleContainer" runat="server" controlname="ctlModuleContainer" />
<asp:DropDownList ID="moduleContainerCombo" runat="server" DataTextField="Key" DataValueField="Value" />
<a href="#" class="dnnSecondaryAction">


containerSelector: 'select',
baseUrl: '<%= DotNetNuke.Common.Globals.NavigateURL(this.TabId) %>',
noSelectionMessage: '<%= LocalizeString("PreviewNoSelectionMessage.Text") %>',
alertCloseText: '<%= Localization.GetString("Close.Text", Localization.SharedResourceFile)%>',
alertOkText: '<%= Localization.GetString("Ok.Text", Localization.SharedResourceFile)%>'

Other jQuery Plugins

  • 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
No sections defined
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out