handle jQuery widget close method

Question

I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:

Adds a mask dialog for hiding the user screen. Adds a close "button" which is a div with a handler for click event Displaying the dialog to the user

When I click the close div I can remove the widget instance with the following command -

$(this).parent().remove();

I do not find a way to hide the screen masking div I create in the _create method.

Code for the create and close methods follows -

_create: function () {
            var handle = this;
            if (this.options.Height == 0) this.options.Height = this.element.height();
            if (this.options.Width == 0) this.options.Width = this.element.width();
            $(document.body).css({ margin: 0, padding: 0 });
            this.wrapper = $("<div class='wrapperClass'>").css({
                'height': this.options.Height,
                'width': this.options.Width,
                'position': 'absolute',
                'left': '50%',
                'margin-left': -1 * this.options.Width / 2,
                'top': '50%',
                'margin-top': -1 * this.options.Height / 2,
                'border': '3px solid red',
                'border-radius': this.options.Radius,
                'z-index': this.options.Zindex
            });
            //create the screen masking background 
            this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
            $('body').append(this.maskScreen);
            this.element.css('display', 'block');
            this.wrapper.html(this.element);
            $('body').append(this.wrapper);
            if (this.options.addClose) this._addClose();
        },
        _addClose: function () {
            this.closeButton = $('<div />')
            //add close class
            .addClass("closeClass").css("z-index", this.options.Zindex + 1);
            this.closeButton.on("click", function () {

                $(this).parent().remove();

            });
            this.wrapper.append(this.closeButton);
        },

How can I reference the screen masking div I created in the _create() method?

I have added a class for the screen masking div and then I remove it with $('.myMask').remove() Is there way for referencing the closing div through the widget object ? — Shai, Jan 05 '15 at 14:33
UM, `$(this).parent().remove();` is deleting the element, not removing it. You really should be using "destroy" `$(foo).myWidget("destroy");` — epascarello, Jan 05 '15 at 14:34
I need to remove/destroy the widget from this.closeButton method, how can I reference the widget from this.closeButton click event ??? — Shai, Jan 05 '15 at 14:41
@Shai That's because you're calling it inside a click handler. Use `.proxy` or save an external reference (eg. `var that = this; ... that.maskScreen.remove();` ) — blgt, Jan 05 '15 at 15:05
@blgt I tried the following - var handle = this (in the _create method) and in the button click handler it does not recognize handle, I also tried $.proxy(dlg,"_destroy") and I get a response it does not recognize dlg, Is there an example I can browse for that issue ? — Shai, Jan 06 '15 at 08:03
@Shai See [**this question**](http://stackoverflow.com/questions/4886632/). Don't put it in `_create`, put it in `_addClose` (the fn context where you want it to be available) — blgt, Jan 06 '15 at 09:38

score 0 · Answer 1 · answered Jan 05 '15 at 14:36

0

You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.

In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.

If you can post a working jsFiddle, I will show you the actual code.

answered Jan 05 '15 at 14:36

A. Rama

903
8
18

I asked for a **working** jsFiddle, one where, at least, the button could be clicked. That is *not* working. Look here at the source of the demo: http://jqueryui.com/widget/ – A. Rama Jan 05 '15 at 15:02
The button works in my VS2013... I think I understand the link you sent me, I still can't figure how can I **refer/destroy** the widget from a click event of a newly created div – Shai Jan 05 '15 at 15:07
The idea is that you have an instance of the widget on a dom element. That instance can be referred to with, in your jsFiddle case, `var mywdgt = $("#myobject").dlg()` and destroyed calling the destroy method on it `mywdgt.destroy()`. http://api.jqueryui.com/jQuery.widget/#method-destroy which in turn will call the previously declared `_destroy()` function. – A. Rama Jan 05 '15 at 16:18
Lets say the widget has a button with a method bind to it's click event, how can I destroy the widget from the button click event ? – Shai Jan 06 '15 at 07:53

handle jQuery widget close method

1 Answers1