|
DotNetNuke 5.0 and jQuery
In late 2008 Microsoft announced that they would start shipping jQuery with Visual Studio as well as support for jQuery Intelli-Sense from within the Visual Studio IDE. In short order after the Microsoft announcement DotNetNuke Corporation made the announcement that DotNetNuke 5.0.0 would include jQuery support and that it would be implemented in a similar fashion to that of ASP.NET AJAX. This article will talk about the host level settings and how they work, then we will discuss the developer implementation of jQuery.
Host Settings
To provide jQuery support in DotNetNuke a new set of options was added to the “host settings” section of the installation.
As you can se here these are very simple options. The first is for informational purposes only and identifies the currently installed version of jQuery that is LOCAL to the DotNetNuke installation. By default the minified version of jQuery is used to help with performance, however when debugging script the minified version can make the task quite difficult. This is where the “Use jQuery Debug Version” comes in handy, especially for those with local development installations.
The last two options provide DotNetNuke site administrators another great option, the ability to use a remotely hosted version of jQuery rather than the local one. By default this is disabled, but the key advantage here is that as adoption of jQuery grows if more sites use the hosted version individuals will already have jQuery cached and it will not have to be requested on page load when visiting your specific site. The final option allows the site administrator to select the URL for the hosted service, granting full flexibility in implementation.
As a host user goes, this is all that is needed to configure jQuery, then it is time for the developer to get involved.
Using jQuery as a Developer
Developers will also love this implementation as with a single line of code they can ensure that the needed reference to jQuery is added and they can also be assured that only one reference exists. To perform this action the following line of code is all that is needed.
DotNetNuke.Framework.jQuery.RequestRegistration()
This will register the jQuery script for the page, the key to remember here is that this value must be set on EVERY page load as the framework does not keep track of which modules need jQuery and which do not. This is typically the most common stumbling block when working with jQuery.
Otherwise this completes the implementation and you can include jQuery script information in your module’s .js files. However, there is one important compatibility item to consider when it comes to jQuery, DotNetNuke, and Microsoft’s ASP.NET AJAX. And that is the use of the $() shortcut, it is strongly recommended that rather than using the $() syntax that you use jquery() to ensure the highest level of compatibility with the framework, other modules, and other javascript that exists on the page.
Example Implementation
So now this begs to answer the most important question, what should we use jQuery for? Well this is a question that isn’t easily answered by just saying everything. But the key is that anything you are looking to do client side, MIGHT have some benefit of using jQuery rather than standard JavaScript. This is due to the jQuery effects and the extra bonus items that it offers when it comes to working with content. For example IowaComputerGurus Inc offers an Expandable Text/HTML module for DotNetNuke that just recently released support for jQuery for the expanding and collapsing actions. jQuery provided a much more user friendly expansion and collapsing process with a “slow” show and hide process.
The code they use to show and hide elements is shown below.
function ShowOrHideContentJquery(idOfElement, itemId)
{
//Create paths
expand = jQuery("#ICG_ETH_EXPAND_" + itemId);
collapse = jQuery("#ICG_ETH_COLLAPSE_" + itemId);
//do the magic
listing = jQuery("#" + idOfElement);
if (listing.hasClass('hideContent')) {
//Currently hidden, show with jquery
listing.show('slow').removeClass('hideContent');
//Setup expand collapse
if (expand != null) {
expand.addClass('hideContent');
collapse.removeClass('hideContent');
}
}
else {
//Show
listing.hide('slow').addClass('hideContent');
//Setup expand collapse
if (expand != null) {
expand.removeClass('hideContent');
collapse.addClass('hideContent');
}
}
}
It is very simple code, but uses some fun jQuery items such as; removeClass, addClass, show, and hide. These options are all quick and easy ways to manipulate the HTML Document Object Model to get intended effects with little programming on the developers side of things. This is just one simple example of jQuery in action within DotNetNuke. You can visit jQuery.com for more information on jQuery or you can visit this address to see the IowaComputerGurus module in action - http://www.iowacomputergurus.com/free-products/dotnetnuke-modules/dnn-expandable-text-html.aspx
Conclusion and Parting Notes
Overall DotNetNuke version 5.x provides site administrators a great centralized location to manage and configure their jQuery references, with developers also having this easy to use method of implementation it will most likely open the doors for greater adoption of jQuery within modules. The use of jQuery in previous versions of DotNetNuke is possible, however, a lot more work is involved in getting it successfully implemented.
|