The purpose of this tutorial is to show how the jQuery library can be integrated in DotNetNuke 4.x by making use of DotNetMushroom RAD. As from DotNetNuke 5.x onwards, jQuery comes standard with the DotNetNuke installation and so the following steps need not be performed.

After integrating the jQuery library into DotNetNuke, you will be able to add jQuery applications, also through DotNetMushroom RAD forms. We will be showing you how to do this through another blog post. In this tutorial it is assumed that you have already added the DotNetMushroom RAD application on your webpage.

What is jQuery?

jQuery is an open source software which you can download for free. It is a lightweight JavaScript file that provides implementations of interactions between JavaScript and HTML, animations and event handling. jQuery is cross-browser compliance, which means that it is compatible with all browsers.

A) Download the jQuery file

1. Go to the jQuery site: http://docs.jquery.com/Downloading_jQuery.
2. Go under the Current Release section and right click on the “Minified” link.
3. Select “Save Link As...” if you are using Mozilla Firefox or Google Chrome, if you are using Windows Internet Explorer select “Save Target As...”
4. Save the file as “jquery.js”

B) Upload the jQuery file

1. Log in to your FTP account.
2. Go into the DotNetMushroom module folder of the application where you will be using jQuery and add a new folder.
3. Call the new folder “js”
4. Open the folder and upload the “jquery.js” file that you have just downloaded.

C) jQuery application in DotNetMushroom RAD

1. Go to the DotNetMushroom RAD form, where you need to use jQuery and paste the following:

<script src="/Portals/portal-number/DotNetMushroom/application-number/js/jquery.js" type="text/javascript" charset="utf-8"></script>

2. Change portal-number to the portal number of your website, and application-number to the DNM RAD application number of where you will be using jQuery.
3. Paste the html code of the jQuery application you wish to integrate in your webpage, after the text pasted in point 1.
4. Go back to your webpage and the application should be working.