Resources for Learning About jQuery Functions and a Note About Callbacks

September 7, 2009 No comments

Though it’s still using 1.2.6 (with current jQuery at 1.3.2), visualjquery.com has always been a favorite of mine for it’s simple and elegant layout. Some of the functions leave some documentation to be desired but after working with jQuery for a while, you begin to develop a taste for what is needed. Unfortunately, next to this issue and despite it’s strong layout, there is one other thing this application that takes this application down from strongest candidate. It cannot look into the future and as such, some functions are outright missing.

The jquery API is a somewhat familiar interface, featuring the latest version, the freshest functions and some decent documentation. Another in-depth (but outdated) resource is the old api-browser. Of course, there exists the Main Wiki Documentation, which also provides Alternative Resources. I think I’ll find myself using http://api.jquery.com/ most often despite it lacking the multi-panel style selection. It integrates it’s documentation with jsbin.com for testing / playing with code which is a nice touch.

Now a note about callbacks while we’re on the subject of jQuery. I find myself using them quite often, with ajax specifically. Understanding how to nest functions in jQuery allows you to do more things in terms of user or application response. When using ajax, you’ll often want to fade out content, do some processing, report the data back and have it fade back in nicely rather than a quick blink that can cause discomfort for a user. If you aren’t familiar with a callback, it’s a function that’s executed when the current function finishes.

Below I will break down this common scenario.

You have your HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="my_ajax.js" type="text/javascript"></script>
<style>
#ajax_loader {
  display:block;
  height:90px;
  width:90px;
  background:url('http://imgur.com/KW8ZD.gif') no-repeat 0 0;
}
</style>
</head>
<body>
  <div id="ajax_loader"></div>
  <div id="ajax_content"></div>
  <a href="#" id="my_link">click me</a>
</body>
</html>

your php (or whatever language returning the data file) (my_page.php)

<? echo "hi, I was loaded with ajax!"; ?>

and your javascript (my_ajax.js) that glues them together

// $(function() is shorthand for $(document).ready(function () {
$(function() {
    $("#ajax_loader").hide();
    $("#my_link").click(function() {
        $("#ajax_loader").fadeIn();
        $("#ajax_content").fadeOut();
        $("#content").load("my_page.php",function() {
          $("#ajax_loader").fadeOut();
          $("#ajax_content").fadeIn();
        });
    });
});

Here we can clearly see how all functions are nested into one root, the document ready function. We go two more deep here, using the click event and then the load callback. Many functions allow for callbacks, search the documentation for the best way you think you should be nesting them. I hope this helps to clarify some of the basics in AJAX using jQuery, good luck.

Share and Enjoy: