Blog 
Jul
27
2010
Getting Started with jQuery & BC
If you've always wanted to take the user experience of your BC sites to the next level but have been scared by the thought of dipping your toes into the world of JavaScript, then jQuery might just be for you.
jQuery is a popular JavaScript library that simplifies document manipulation, animation and AJAX interactions - letting you do more, with less coding.
What's even better is that jQuery plays nice with the BC platform, allowing you to easily implement advanced front-end functionality, improving the user experience of your sites and speeding up your development process.
In this post, I'll show you how to get started with jQuery, how to start using it on your BC sites and point you towards some handy how-to articles.
1. Getting to know jQuery
Before you dive in and begin using jQuery on your sites, it's important that you have a basic understanding of how jQuery works. If you're well versed in HTML and CSS, you should find the learning curve a little less steep and be on your way in no time.
To get you on the right track, here are some great "Getting Started" articles:
- Tutorial: Getting Started with jQuery (from the official jQuery website)
- jQuery for Complete Beginners: Part 1 (from 1st Web Designer)
- Getting Started with jQuery (from Six Revisions)
2. Including jQuery on your BC sites
Including the jQuery library on your site is as easy as referencing a hosted copy of the .js file inside the head of your page. For this example, we'll reference a copy of jQuery stored inside the "/js/" folder of our site:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
Because of BC's great site-wide template system, we can easily use jQuery on all of our pages by including the above code in the head of our site's default template.
In terms of hosting jQuery, you have a couple of options to choose from:
1. Host the library yourself
If you'd feel safer hosting the library yourself, you can simply download the latest version at http://jquery.com/ and upload it to a directory on your BC site. For example, many designers host the .js file inside the /js/ directory.
2. Reference an externally hosted version
A number of large enterprises provide hosted copies of jQuery on their existing CDN networks, which are available for public use. For example, Google host a copy that you can easily reference on your site. To use an externally hosted copy, simply replace the "src=" attribute of your script tag with the URL of the version you'd like to include. For example, http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js references a "minified" copy of jQuery version 1.4.2
If you'd like to include the latest version of jQuery hosted on jQuery's own CDN, you can use: http://code.jquery.com/jquery-latest.min.js
One of the key advantages of using Google's CDN hosted copy of jQuery is that as many websites across the web reference it, the library will be already cached on many of your visitors local machines - this greatly reduces load times, as they'll already have a local copy downloaded when they visit your site.
3. Using jQuery with BC
Once you're up to speed with the jQuery basics and have included the library in your site-wide template, you're ready to go.
To help get you started, we've written a bunch of great tutorials that show you how to enhance BC's built-in features with a little bit of jQuery magic:
- Submitting Web Forms using AJAX and jQuery
- Adding Alphabetical Navigation to Web App Lists using jQuery
- Allowing customers to submit Web App items without being logged in
It's always great to see new and exciting integrations of jQuery with BC - if you've recently completed a jQuery implementation, we'd love to see it in action! Feel free to share your BC + jQuery creations over on the Community Forums or in the comments of this post.
Leave Comments
Follow us on Twitter (@adobebc)
Recent Posts
- Updated order and cart management in R172
- R172.0.2 - System Update including fixes on order management, photo galleries popups and other bug fixes
- Help us build a better support environment for Business Catalyst!
- Major DNS Upgrade and Service Maintenance on February 8
- Tune in for Episode 15 of the BC podcast!
- Moving towards better support
- R172 - Extended Business Catalyst V3 Beta, Improved Code Editor, Security updates and bug fixes
- Important Security Policy Updates for CRM Users - Effective February 8th
- Start the year on the right track: 25% discount on partnership plans
- Upcoming SEO improvements
Copyright 2004 - 2012 Business Catalyst
Firstly, it's worth noting that including jQuery from an external source in your site-wide template, as alluded to in the blog post, will cause a mixed / insecure content warning on the Online Shop checkout page - because the page protocol is https but the protocol for the script http.
There's a good post here on how to set the protocol dynamically: http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi
Also last time I checked the use of the default $() for jQuery appeared to conflict with the prototype library used by BC for the gallery + product poplet light boxes.
I normally use jQuery with BC in noConflict mode by including the following in my template JS:
var $j = jQuery.noConflict();
var jQuery = $j; //Useful for some plugins that expect the jQuery vairable.
Please correct me if I am mistaken on either of these points, or if not I hope it's useful for some of you.
If you do a google search for "jquery stops working after postback" I think the pages that come up are on track to finding the solution but I have spent hours working on it with no luck.
Has anyone dealt with this problem before or willing to help me out?
@Chris - thanks for this great information and handy article! You're absolutely correct - switching jQuery over to noconflict mode should help out with any conflict you find in regards to the BC included libraries.
@Brian - do you have jQuery in noconflict mode as Chris suggested? Give it a try and see if that fixes the issue you're experiencing. Otherwise, jump on to the Community Forums where I'm sure a community member will be willing to help out.
Jackson.
The way it works, is when the document is loaded, jQuery will apply those functions to the elements that are in there WHEN THE PAGE IS LOADED THE FIRS TIME (i.e. picture it as jquery adding an attribute to the elements it wants to work with). Any elements with the same name added AFTER the page has loaded, will not have those click events (won't have those special attributes). SO: you need to either make the click functions variable functions I.E.:
var click_tab = function() {
};
$('#tab').bind('click',click_tab); <-- this will bind it to the elements on the page at the time as well, but if you put it after an ajax call, it will bind that click function to those new elements too.
and put that inside the 'success' code of the AJAX function,
OR do $('#tab').live('click',function() {
...
});
'live' means any element regardless of whether it was on the page or not at document ready state.
To Jackson, yes putting it noConflict() helps to come extent but as Brian pointed out when using the shopping cart and product groupings using any javascript I have found seems to fail as soon as the product is changed.
Currently it is one of my biggest qualms with BC.
Brian I have had no luck in any fashion figuring a solution out for this. I even have a connection trying to help me get a solution that is connected to one of the original founders of BC who is still with the company even with the Adobe buy out.
In the end, my thought is BC should custom right the javascript necessary to do what they do in a way that conflicts with no library (in other words don't use prototype). From what I understand we can't tie into the prototype they use anyway. So why not make it more usable?