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:
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.