how can I customize jquery widget by passing arguments and overriding my own callback?

Question

I am very new to jquery and recently tailored the jquery combobox as per my needs. However, I need to reuse this component in other places on my site. I essentially need to pass in some arguments and a callback function which should be called for handling certain events in jquery. I'm struggling with the syntax and trying to find jquery-way of doing things:

To give you a sample, here is the source of combobox -> input -> autocomplete -> source:

(Created a working jsfiddle for reference)

source: function( request, response ) {
    // implements retrieving and filtering data from the select
    var term = request.term;
    var prefixLength = 2;
    if (term.length >= prefixLength) {
        var abbreviation = term.substring(0, prefixLength);

        if(!(abbreviation.toLowerCase() in cache)){
            cache[abbreviation.toLowerCase()] = 1;

            $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: abbreviation
                },
                type: "GET",
                success: function(data) {
                    if(!data || !data.cities || !data.cities.length){
                        // response(["No matches for " + term]);
                        return;
                    } 
                    updateOptions(select, data.cities);
                    response(filterOptionsForResponse(select, term));
                    return;
                }
            });
        }
    }

    response(filterOptionsForResponse(select, term));
}

Here updateOptions(...), filterOptionsForResponse(select, term) are simple javascript functions.

In order to reuse, I need to specify a callback to handle source for every instance of combobox that I create.

Can someone point me in the right direction on how to do this ?

score 8 · Accepted Answer · answered Jun 01 '12 at 06:48

8

The only useful widget factory documentation is in the wiki and that says:

Properties:
[...]
this.options
The options currently being used for the plugin configuration. On instantiation, any options provided by the user will automatically be merged with any default values

So if you needed to supply a callback function for source, then you'd say this:

$("#searchbox").combobox({
    source: function(request, response) { /* ... */ }
});

and then inside your plugin, look at this.options.source:

$.widget("ui.combobox", {
    options: {
        // Default options go here...
    },
    _create: function() {
        //...
        input = $("<input>").appendTo(wrapper).val(value).addClass("ui-state-default").autocomplete({
            source: this.options.source,
            //...

You don't have to include the default options but it almost always makes sense to do so (even if you just use it for documentation purposes).

answered Jun 01 '12 at 06:48

mu is too short

426,620
70
833
800

1

This didn't work :( Maybe, I did something wrong. To test it out, I was trying to pass prefixLength as an argument, but in my source function, it is undefined. Scroll to source function and below ajax call in http://jsfiddle.net/HsKbK/ – brainydexter Jun 01 '12 at 07:12
@brainydexter: I don't see any `this.options` in there, no `prefixLength` either. – mu is too short Jun 01 '12 at 07:23
jsfiddle didn't save my changes, am repeating the changes now and will save it again! – brainydexter Jun 01 '12 at 07:27
@brainydexter: You just have a `this` problem, `this` outside the `source` callback isn't the same as `this` inside the callback: http://jsfiddle.net/ambiguous/B4sLV/ – mu is too short Jun 01 '12 at 07:33
Is there any way to access the variables from combobx in the callback ? For e.g. variable `cache` is a member variable of combobx and I'd like to access it in the `source` callback. http://jsfiddle.net/HsKbK/4/ – brainydexter Jun 01 '12 at 08:14
I got it working this way: http://jsfiddle.net/HsKbK/5/ I'm not sure if this is the recommended way to implement it! I'd appreciate your thoughts. – brainydexter Jun 01 '12 at 08:29
1

@brainydexter: Your `self.options.sourceFn(request, response, cache, select)` approach looks reasonable. I'd recommend that you use `_this` or `that` instead of `self` as the variable name though, the existence of [`window.self`](https://developer.mozilla.org/en/DOM/window.self) makes `self` a little error prone. – mu is too short Jun 01 '12 at 17:49
Thanks for the tip, will refactor. – brainydexter Jun 02 '12 at 07:55

how can I customize jquery widget by passing arguments and overriding my own callback?

1 Answers1