Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
Apr
22
Written by:
4/22/2009
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.
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.
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.
Now, when you look at the top of your rendered DotNetNuke page source, you will see the imported jQuery script.
9 comment(s) so far...
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
Will - does that mean like 4.8 sites wouldn't work with jQuery at all? even if you did the injection on them ?
By dylan barber on
4/23/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
My previous blog entry gives additional insight into how I'd suggest adding jQuery to a DNN site versions lower than 4.09.01.
By Will on
4/23/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
Is it possible to exceed the 900kb limit in putting on scripts? I need to put something like:
document.write(".hidden{display:none;}");$(document).ready(function({$.fn.colorbox.settings.bgOpacity ="0.5";$("#fxn-spec").colorbox({fixedWidth:"50%",inline:true,href:"#fxn-spec-pop"});$("#wf-sol").colorbox({fixedWidth:"50%",inline:true,href:"#wf-sol-pop"});});
Hope you respond.
Thanks.
By dong on
5/11/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
@Dong I am not sure what you are referring to, in regards to the 900k limit. Unfortunately, your snippet didn't ring a bell with me either.
By Will on
5/11/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
Will - Your injection module requires that the script be 900 bytes or less. Can this be resolved?
By Trent on
8/20/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
hi, my webpage is center aligned when I used your injector the thickbox.css moved the whole page to the right. Any solutions please?
By Michael on
8/20/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
@Trent Can you please submit a ticket to the project website? (link above)
@Michael I would not be able to offer you much advice without seeing the actual CSS and markup.
By Will on
8/20/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
I'm am trying to get your module to work. I thought I had it working once but had parsing errors. I'm using DNN, your module, and jquery ClueTip. When setting DNN 5.0 to include jQuery libraries, the injection code has errors because the registering of the jQuery files seem to come after the injection. So I turn jQuery off and include that in the injection, seems to work except I see to script tags in the generated HTML and not sure where the other is coming from. Also I'm having problems using document.ready with
jQuery(document).ready(function() {
jQuery('area.load-local').cluetip({
attribute: 'href',
titleAttribute: 'alt',
cursor:'pointer',
arrows: true,
dropShadow: false,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
closeText: 'close'
});
});
I get 'object doesn't support this property or method'. When I take the ClueTip code outside document.ready it seems to work. I have an idea it is the order of the javascript files in the HTML, however the HTML looks ok.
It also could be simple HTML errors but I can't see anything.
I guess I'm looking for things to look at. Is there away to get a specific order of the files after injection?
Thanks
Working For Hours Pat
By the way your module seems very easy to use if I could get to work dangit...
By Patrick Finfrock on
12/18/2009
|
Re: Adding jQuery to DotNetNuke 4.09.02+ Using the Injector Module
You do not need to use this module to use jQuery on DNN 5+. jQuery is usually already included on the page for you. Make sure by viewing your source. One way to get the jQuery loaded on every page load in DNN 5+ is to make sure widgets are enabled in your Site Settings.
By Will on
12/18/2009
|