3 Comments

Having been busy with a small DotNetNuke-based project lately so here’s a short “how-to” for those who want to use jQuery in their own DNN-modules. This applies to DNN 5.0 and newer.

1. Installing jQuery

DNN by default includes the jQuery library so no manual installation is required. You can check the jQuery version from Host – Host settings – Advanced Settings – JQuery settings. This is also the place where you can make DNN to use Microsoft’s or Google’s CDN to deliver the library. If your module targets the version 5.0 of DNN (actually, 4.9.1) or newer, you can be sure that every installation includes the jQuery.

dnn_jquery

2. Request jQuery in code-behind

In your module, make sure to request for jQuery in code-behind class. Module’s Load-event is excellent place for this:

   1: Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   2:
   3:     Try
   4:
   5:         If Not Page.IsPostBack Then
   6:
   7:             DotNetNuke.Framework.jQuery.RequestRegistration()
   8:
   9:         End If
  10:
  11:     Catch exc As Exception
  12:         ProcessModuleLoadException(Me, exc)
  13:     End Try
  14:
  15: End Sub

3. Use the jQuery-word instead of $-character

For some reason the widely used jQuery-shortcut ‘$’ doesn’t always work properly inside the DotNetNuke. So it’s better to use the word jQuery instead. Here’s an example of using jQuery in the traditional way:

   1: <script type="text/javascript">
   2:     $(document).ready(function() {
   3:         $("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 7500, true);
   4:     });
   5: </script>

In DotNetNuke it’s better to write the function like the following:

   1: <script type="text/javascript">
   2:     jQuery(document).ready(function() {
   3:         jQuery("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 7500, true);
   4:     });
   5: </script>
And that’s it. Following these small steps you can easily use jQuery to enhance the functionalities of your custom DNN modules.

Comments

Comment by Oakley Sunglasses Outlet

Oakley Sunglasses Outlet...

I was more than happy to seek out this net-site.I wished to thanks for your time for this wonderful read!!...

Comment by ugg australia

ugg australia...

Post thanks for share. more wait .. ?...

Comment by Oakley Prescription Sunglasses

Oakley Prescription Sunglasses...

You made some respectable factors there. I appeared on the web for the issue and found most people will associate with with your website....