Add jQuery Support to Pre-DNN 5 Sites Using PageBlaster
Mar
18
Written by:
3/18/2009
We all pretty much know that DotNetNuke has officially adopted jQuery, beginning with version 5.00.00. Although version 4.09.02 has the scripts in the installation, jQuery still does not have “official” support until version 5. I have built a module that facilitates this need, and blogged about how to do so, but if you already have PageBlaster installed, why install another module to use a feature you already have in your possession?
PageBlaster (PB) does many great things, among them is the ability to inject, remove, or change existing HTML markup that is sent to the website visitor. For example, if you have a company phone number all over your site in the text of various modules, a simple replacement rule in PB will automatically find and fix all of them for you. It is worth noting though, that the change is not permanent. PB just replaces the content prior to sending it to the web browser. The erroneous information still exists in the database.
In order to create a replacement rule, follow along with the following steps:
- Download the jQuery library from the jQuery website.
- Put the extracted jQuery scripts into your DNN site at the following directory, using the same naming convention. This will ensure maximum compatibility going forward, as you upgrade DNN.
~/Resources/Shared/scripts/jquery/jquery.js
~/Resources/Shared/scripts/jquery/jquery.min.js - Open the PB module from your Admin menu.
- Expand the “Response – Replace” node.
- Right-click on the “Portal Rules” node, and choose “Add New Rule”. You will see 3 fields available to you: Rule Name, Search For, and Replace – Respond With.
- Enter anything you want for the Rule Name. It is only for you. I have entered “Add jQuery Support”.
- You want to put the jQuery script as close to the top of the page as possible. I chose to put it after the DNN CSS placeholder markup. Here is the Search For regular expression I used:
\<style id="StylePlaceholder" type="text/css"\>\</style\> - Now add the following markup into the Replace – Respond With field:
$0<script language="javascript" type="text/javascript" src="/Resources/Shared/scripts/jquery/jquery.min.js"></script><script language="javascript" type="text/javascript">jQuery.noConflict();</script> - Click the save icon in the PB toolbar to save your changes.
Here is a screen shot of the settings in place.
The previous steps will add the jQuery script to your markup, as shown in the following image.
