Home > Javascript, jQuery > Using callbacks from plugins and other javascript objects.

Using callbacks from plugins and other javascript objects.

May 7th, 2009
Goto comments Leave a comment

Now that we’ve seen how to implement callbacks from our plugins, lets take a look at what we can do with them. I previously touched on the jQuery Plugin Development pattern subject and built a quick tabs plugin that featured callbacks (you can see a demo here), now lets start taking advantage of them.

 

First, lets setup our tabs.

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium aliquet risus a tristique. Proin pellentesque, urna sit amet vestibulum mollis, leo magna placerat ligula, ac tincidunt urna libero in nisi. Quisque blandit lorem id libero pulvinar vel viverra urna consequat. Sed nisl nibh, condimentum vel tincidunt in, bibendum id magna. Pellentesque eleifend est sed odio sollicitudin ultricies. Morbi porta metus nec nulla imperdiet pulvinar. Sed tincidunt augue id dui consectetur eleifend. Sed sit amet eros sit amet est viverra tristique. Quisque lorem tellus, faucibus sed vulputate nec, malesuada ac libero. Nulla facilisi. Morbi tincidunt sagittis enim, in viverra lorem mollis eget. In hac habitasse platea dictumst. Vivamus nec fermentum neque. Nulla facilisi.

Now that we have the tabs setup, lets add in some magic. We need to create an options hash that will contain our callbacks for beforeLoad, onload, and afterLoad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var options = { 
                tab0 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
                tab1 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
                tab2 : { 
                            beforeLoad : '', 
                            onload : '', 
                            afterload : '', 
                        },  
            };

Now that we have the basic structure, lets add in some functionality. For this, we will create a loadItem object with a couple of functions that will help us along. You could just add the functionality straight to the options hash, however managing that can be a bit difficult and if you ever have to edit the options later on, it may be easier to just have a seconday object to do the heavy lifting.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var loadItem = new function() {
    this.createLoading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).html($('<div class="loading"><img src="http://trulyevil.com/images/loading.gif" /></div>')).show();
        return true;
    };  
    this.get = function(tabs, url){
        $.get(url, function(data) { loadItem.loadData(tabs, data)
});
        return true;
    };  
    this.loadData = function(tabs, data){
        $('.tab' + tabs.getCurrentTab()).html(data);
    };  
    this.afterloading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).show();
        return true;
    };  
};

Notice that each of the functions that will be called return a true value. If we return “false” for any one of the functions the callbacks will stop. Now all we need to do is to update the options hash with the calls to these functions and we will have a true progressivly enhanced tabs widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var options = { 
                tab0 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab1 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab2 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
            };

Notice how we pass “this” into each of the functions. Because of the way we setup the callbacks function for tabs, it applys the tabs object to the function that is being called. It allows us to call tabs.getCurrentTab() and have it return the current tab we are working with.

Now, all we need to do is to add the following to the bottom of our page to complete the tabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var loadItem = new function() {
    this.createLoading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).html($('<div class="loading"><img src="http://trulyevil.com/images/loading.gif" /></div>')).show();
        return true;
    };  
    this.get = function(tabs, url){
        $.get(url, function(data) { loadItem.loadData(tabs, data) }); 
        return true;
    };  
    this.loadData = function(tabs, data){
        $('.tab' + tabs.getCurrentTab()).html(data);
    };  
    this.afterloading = function(tabs){
        $('.tab' + tabs.getCurrentTab()).show();
        return true;
    };  
};  
 
var options = { 
                tab0 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab1 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
                tab2 : { 
                            beforeLoad : function() { return loadItem.createLoading(this) },
                            onload : function() { return loadItem.get(this, "/scripts/get.cgi?url=www.google.com") },
                            afterload : function() { return loadItem.afterloading(this) }
                        },  
            };  
$(document).ready(function() {
        $('div.tabs').tabs(options);
});

You can see the demo of this here.

Bookmark and Share
Author: jcfant Categories: Javascript, jQuery Tags: ,
  1. No comments yet.
  1. No trackbacks yet.