get the div object that holds a jquery widget from inside the widget

Question

I have the following code:

<div id="widHolder"></div>
<script type="text/javascript" language="javascript">
    $('#widHolder').widgetName({
        optionOne: false,
        optionTwo: 1,
        onComplete: function (holder) { 
            // ... do something here with the 'widHolder' object such as $(holder).addClass(x,y) 
        }
    });
</script>

Within the widget itself, the onComplete method will be called immediately after the full initialization of the widget. I want the code within the widget to reference the object that the widget is linked to (in this case, the div with the id 'widHolder').

My goal is to be able to quickly and easily reference the holding object by creating the oncomplete function as listed above. The code in the widget itself will just be to call the onComplete function passing the holder (which I need to get) as a parameter.

Here is the code sample of the jQuery UI Widget plugin

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...

            if(this.options.onComplete)
                this.options.onComplete( I_WANT_TO_SEND_THE_DOM_ELEMENT_HERE );
        },
    }
})

Can we have a link to the page you are using this on, or see more code. Despite how long the code may be, it's harder to interpret what's going on than it would be to understand the code. — mowwwalker, Jan 23 '12 at 03:10

Jonathan · Accepted Answer · 2012-01-23T03:19:30.757

The jQuery UI Widget Factory makes the element available via:

this.element from with the plugin.

For more information, please take a look here: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

Does that better answer your question?

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...

            if(this.options.onComplete)
                this.options.onComplete( this.element );
        },
    }
})

Side note - if you create another closure inside your plugin, you will need to save a reference to this. For instance:

(function ($) {
    $.widget("ui.widgetName", {
        options: {
            // ... other options that can be set
            onComplete: undefined
        },

        // called on the initialization of the widget
        _init: function () {
            // do initialization functions...
            var self = this;
            $.each(an_array_or_something_obj, function(){
                //here this will refer to the current element of the an_array_or_something_obj
                //self will refer to the jQuery UI widget
            });
            if(this.options.onComplete)
                this.options.onComplete( this.element );
        },
    }
})

It's my understanding that if I use "this" within the widget then I am referring to the widget itself. I've used this many, many times throughout the widget, but that's not what i'm trying to do here. Here, I don't want to return the widget itself, but rather the container that the widget is linked to. I'm sure that i could use something like, "this.container" but I don't know what that syntax is. — Adam, Jan 23 '12 at 02:08
To answer your question - this is a jQuery UI plugin. I'd rather not post the full plugin code as it is quite extensive and this is just a small update to the full plugin. — Adam, Jan 23 '12 at 02:12
@Adam - jQuery UI handles some basic plumbing for you, such as setting a property `element` to reference the DOM element that the widget was called on. I added it to your example and edited my answer above. — Jonathan, Jan 23 '12 at 03:10
Hey - thanks... going through the code last night I found this as well. "this.element" is just what I needed. — Adam, Jan 24 '12 at 20:13

score 0 · Answer 2 · answered Jan 23 '12 at 02:31

0

Use this.offsetParent if, as in your example, the holder is the direct parent of the widget.

answered Jan 23 '12 at 02:31

mowwwalker

16,634
25
104
157

I tried this.offsetParent and $(this).offsetParent but neither worked. I put these in the spot above that says I_WANT_TO_SEND_THE_DOM_ELEMENT_HERE. I've updated the question to include a sample of the plugin code. Perhaps I'm doing something wrong - let me know if I'm missing something. – Adam Jan 23 '12 at 02:49
@Adam, Sorry, the scope of `this` always eludes me in javascript. Try `console.log(this)` to see what it's referring to. – mowwwalker Jan 23 '12 at 02:54
@Walkerneo - this always refers to the closure. So, in Adam's case, the jQuery UI Widget. In a normal jQuery plugin, this, in the `init` method will refer to the jQuery object that the plugin was called on. – Jonathan Jan 23 '12 at 03:15
@Jonathan, Actually, `this` is referring to the object being passed as the second argument. Unless that's what you meant, though I can't tell. – mowwwalker Jan 23 '12 at 03:16
@Walkerneo The second argument to `$.widget();`? That is correct. The first argument is the namespace of the widget, the second is the widget itself. We are talking about the same object. – Jonathan Jan 23 '12 at 03:23

get the div object that holds a jquery widget from inside the widget

2 Answers2