Will "the Mighty" Strohl

Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module

You may or may not know this, but jQuery has been available to you since DotNetNuke version 4.09.01.  It was not publicized at all, as it is not officially supported until version 5.00.00.  In this blog entry, I will show you how add jQuery to your DNN site using the WillStrohl.Injection module.  This is a free and open source module I have on CodePlex.  I posted a variation of this blog entry in the past, using the PageBlaster Module.  While I love the PageBlaster Module, I know that not everyone else does, and not everyone else is willing to pay for the replacement.  Hence, the need for this blog entry. Let’s get started.

First thing’s first...  I am going to assume that you know how and have permission to install and use the WillStrohl.Injection Module.  The module is quite easy to use, but the concept it exposes is not 100% clear to some people.  Second, if your DNN site is not at least at version 4.09.01, the previous blog post gives some great insight into adding the actual jQuery files to your site.

Now, we will assume that you have your jQuery files in the following location on your site:  ~/Resources/Shared/scripts/jquery/jquery.min.js

Once the WillStrohl.Injection Module is on your page, click the “Manage this Module” link.

Click the "Manage this Module" link

This will bring you to the injection view, where you can add and manage injections to the current page or tab.  Click the “Add New Injection” link to add a new injection.

Click the "Add New Injection" link

Add a meaningful name to help identify what the injection is, and then add the intended markup.  In this case, we are adding a reference to import the jQuery script to the page, so we are adding the following markup into the content injection field.  It is also important in DotNetNuke to reset the dependency of the $ character.  Not doing this may not only break DotNetNuke functionality, but also other JavaScript libraries.  The jQuery.noConflict(); method forces you to use the jQuery namespace in your client code instead of the $ character.

<script language=”javascript” type=”text/javascript” href=”/Resources/Shared/scripts/jquery/jquery.min.js”></script>
<script language=”javascript” type=”text/javascript”>jQuery.noConflict();</script>

Make sure you inject the content to the header of the page, and leave the injection as enabled.  When you’re finished filling in the form, it should look something like the following screen shot.

jQuery Injection Example

Now, when you look at the top of your rendered DotNetNuke page source, you will see the imported jQuery script.

Using FireBug to Show jQuery is Included

Technorati Tags: ,,,


blog comments powered by Disqus