Accessing .selector within a JQuery UI Widget

Question

I'm working on a plugin using the ui widget factory. With a basic JQuery plugin, I can access the selector used by doing something like this...

$.fn.pluginname = function(){
    var thisWorks = this.selector;
};

However, when I use the widget factory, the selected element is accessed through the 'this.element' property, and 'this.element.selector' does not work the same way as in my first example. Anyone have a nice way around this? I'm looking through the widget factory source code on GitHub, but I haven't been able to find anything yet.

DarthJDG · Accepted Answer · 2011-05-26 00:27:34Z

5

+50

The trick is that after the widget factory has completed creating your widget, it is essentially just a normal plugin afterwards. That means you can further extend it.

The idea is to save the original function, replace it with a custom function and make it pass the selector through. This code can be anywhere after the widget factory and before you use your object the first time. Just put it in your plugin file after calling $.widget().

The name of the widget in this example is test.

// Save the original factory function in a variable
var testFactory = $.fn.test;

// Replace the function with our own implementation
$.fn.test = function(obj){
    // Add the selector property to the options
    $.extend(obj, { selector: this.selector });

    // Run the original factory function with proper context and arguments
    return testFactory.apply(this,arguments);
};

This makes sure that this.selector is passed through as a named option. Now you can access it anywhere within your factory by referencing this.options.selector.

As an added plus, we didn't need to hack any jQuery UI code.

answered May 26, 2011 at 0:27

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brandon Joyce Over a year ago

Fantastic. Never thought of doing it that way. I need to play around with the arguments for what I'm doing, but it seems like it will work just fine. Thanks!

CoryDorning Over a year ago

How would I do this if I'm just modifying (duckpunching) one of the widgets methods, for instance the tooltip's close method and need to access the original selector. Is this possible? Here's a non-working example: jsfiddle.net/corydorning/9grH5

CoryDorning Over a year ago

Was able to figure it out using the principles above, although i had to overwrite the options of the prototype for the widget i was patching. Gist is here: gist.github.com/4445666

A. Wheatman · Accepted Answer · 2014-12-18 17:14:20Z

Just my couple cents... here is working JSFiddle example based on DarthJDG's answer... Probably someone will need it.

$(function () {
    $.widget("test.testwidget", {
        _create: function () {
            this.element.text('Selector: ' + this.options.selector)
        },
    });
}(jQuery));

// Save the original factory function in a variable
var testFactory = $.fn.testwidget;

// Replace the function with our own implementation
$.fn.testwidget = function(obj){
    // Add the selector property to the options
    $.extend(obj, { selector: this.selector });

    // Run the original factory function with proper context and arguments
    return testFactory.apply(this,arguments);
};

$(document).ready(function() {
    $('#test').testwidget({});
    $('.test').testwidget({});
});

Andy B · Accepted Answer · 2012-04-13 00:23:39Z

-1

It is also possible to simply use

this.selector =  '#'+this.element.attr('id');

usually in the _create method. Of course this requires each instance of your widget to have a unique id which it usually should anyway.

answered Apr 13, 2012 at 0:23

Andy B

1801 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

Accessing .selector within a JQuery UI Widget

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related