Question

I have build a little function which returns a jQuery plugin applied to a certain element, as in the following example:

var initiate_shop = function(shop_navigation, options, callback) {

    var default_settings = {
        containerID     : "",
        first           : false,
        previous        : false,
        next            : false,
        last            : false,
        startPage       : 1,
        perPage         : 8,
        midRange        : 15,
        startRange      : 1,
        endRange        : 1,
        keyBrowse       : true,
        scrollBrowse    : false,
        pause           : 0,
        clickStop       : true,
        delay           : 50,
        direction       : "auto",
        animation       : "fadeInUp",
        fallback        : 400,
        minHeight       : true,
        callback        : function(pages, items){
            if(typeof callback == 'function') {
                callback.call(this);
            }
        }
    };

    var settings = $.extend(default_settings, options);

    return $(shop_navigation).jPages(settings);
};

My question would be, how could I use that initiate_shop function like this:

$("shop_navigation").initiate_shop( ... );

Instead of using it like this:

initiate_shop(shop_navigation, ... );

Also, how can I define arguments for the callback function, in my situation I have two objects as arguments for the callback function ?

Answer 1

Looks like you’re trying to create a jQuery plugin. Extend the $.fn object with your function, and you will be able to access your container with the this keyword from within the function.

$.fn.initiate_shop = function(options, callback) {
    ...
    return this.jPages(settings);
};

Note that your call $('shop_navigation') is not a valid selector, unless you’re looking for an element named shop_navigation. Did you intend to write $('#shop_navigation')?

The reason I’m asking is that you might equally well write

$('.shop_navigation').initiate_shop(options, callback);

It is up to your plugin to deal with supporting multiple elements being passed in this.

---

The way you’re currently calling your callback, using .call, is useful if you want to specify what the context, i.e. the this keyword, is in your callback function.

Consider that your callback looks like this:

var callback = function(pages, items) {
   console.log(this);
   console.log(pages);
   console.log(items);
};

If you don’t care what the this keyword is within your callback function, you could simply call the function as

callback(pages, items);

If you want to manually set the calling context, you may use .call or .apply. You can still pass arguments to the function:

// first argument defines calling context
// all others passed as arguments to function
callback.call(this, pages, items);

or

// first argument defines calling context
// second argument defines entire arguments collection
callback.apply(this, [pages, items]);

In your case, if callback variable will only ever be a function, or undefined, and you’re not adding any additional logic, as it is right now, you’d get away with just:

var default_settings = {
    ...
    callback: callback
};