Install jQuery in a RapidWeaver theme

One of the most popular Javascript frameworks available today is jQuery, a fast and easy way to manipulate your website with Javascript. Many RapidWeaver themes, including my own, include the jQuery framework by default; however, many RapidWeaver themes do not. This tutorial will demonstrate how to add the jQuery framework to your RapidWeaver website so you can use the many features jQuery has to offer. As cool as jQuery is, you don’t need to include jQuery on every page in your website. Instead, you should only include jQuery in pages that need jQuery. With this in mind, let’s get started.

Install jQuery

Open your website file in RapidWeaver. Select a page and view its Page Inspector → Header → Header field. Insert the following code into the Header field.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

This code includes the latest jQuery framework from Google’s content delivery network. This ensures the code is minified (to reduce bandwidth) and delivered from a server closest to the website visitor’s physical location (to reduce latency).

Avoid conflicts with other Javascript frameworks

Next, we should make sure the included jQuery framework does not conflict with other Javascript frameworks already included on the current page. To do this, insert the following code into the Page Inspector → Header → Header field immediately after the code you just added (see above).

<script type="text/javascript">
    $.noConflict();
</script>

This code relinquishes the $ handle to other libraries, such as MooTools or Prototype.

Start using jQuery

Now is the fun part. Let’s write some custom code with jQuery. First, add the following Javascript inside the <script> element (see above) immediately after $.noConflict();.

jQuery(document).ready(function($){
    //add your code here
});

The Page Inspector → Header → Header tab should now read:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $.noConflict();
    jQuery(document).ready(function($){
        //your code here
    });
</script>

Next, replace "//your code here" with your own Javascript. Although we relinquished control of the $ handle earlier using $.noConflict, we can continue to use the $ handle since the jQuery object is aliased by the .ready() callback function. That's it! Now start coding.