Skip navigation

Currently Being Moderated

jQuery

Mar 12, 2012 12:48 AM

jQuery is often metioned throughout the knowledgebase and used by many partners developing websites on the BC platform and is the prefered javascript framework for many web designers and developers. jQuery is now the prefered framework of the Adobe Business Catalyst development team and all current and new developments of the system use jQuery.

 

 

What is jQuery?

 

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

How do I obtain it?

 

You can download jQuery from the official site here :  http://docs.jquery.com/Downloading_jQuery#Download_jQuery

 

<script type="text/javascript" src="/js/jQuery.min.js"></script>

 

OR


You can link to the latest and most update jQuery through the Google API Libraries.

Using the Google AJAX Libraries content delivery network to serve your jQuery directly from Google’s network of datacenters has a number of advantages over hosting jQuery on your website from: decreased latency, increased parallelism, and better caching.

 

There are a couple of ways you can load jQuery and other Libraries into your website via the google method.

 

1. Direct Link:

 

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

 

2. Google Load Request:

 

https://developers.google.com/loader/

 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.7.1");
</script>


The google Load Request Method allows you to load many other Libraries like the jQuery UI or even googles own Map API functionality.

 

jQuery Compatability Mode


This platform currently implements a number of javascript elements based on the Prototype Framework. This shares the same implementation methods with jQuery.

 

To ensure jQuery functions correctly you will need to use the jQuery nConflict Method.

 

Example:

 

Declare your noConflict

$j = jQuery.noConflict();


This needs to be the start of your scripting be it inline or in your main dom Loading script file.


Any instance of $ you have or use from example code on the web needs to be updated to be $j.

$j(document).ready(function($){


Full Example loading the Dom and running a simple command:

$j = jQuery.noConflict();
 
// DOM LOAD
$j(function()
{
     // Get Rid of CMS Borders
      $j("img").each(function() {
           if ( $j(this).attr("border").length ) {
                $j(this).removeAttr("border")
           }
      });
 
});

 

Start jquery on the DOM

 

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.

 

 

 

$(document).ready(function() {
   // do stuff when DOM is ready
 });


Q. "But you wrote something different in your previous example?"

A. That is correct, for your BC projects you need to ensure you jQuery is in compatabilty mode and the below example is the shorthand version of the Dom Ready Decleration.

 

 

$j(function()
{
     // do stuff when DOM is ready
});

 

Useful Links

 

http://docs.jquery.com/Main_Page

 

The jQuery website offers the best source of reference documentation for all the features of jQuery along with some great examples.

http://docs.jquery.com/Tutorials

The jQuery Website offers some great tutorials.

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips. aspx25 Excelenet jQuery Tips
http://marcgrabanski.com/articles/jquery-essentials-slideshowjQuery Essentials by Marc Grabanski.
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designersjQuery Tutorials for Designers.
http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-begi nners-video-series/jQuery for Beginners

 

Important Note

 

jQuery is always evolving and if you choose to use the latest version of jQuery please keep up to date with the changes made.
As an example in 1.7 .live() has been depreciated for the .on() event handler.

 

Created by Liam Dilley from Pretty