access object created by constructor using jquery

Question

i have a jquery function that creates a dialog box from a regular javascript function for every element selected . one of the options i want to implement is to add buttons to the dialog box. these buttons would have the felxibility of having any function assigned to them.

my problem is how to access the box in which the buttons are created on an onclick event or so of the button itself

here is how i create the dialog box:

$('.box').dialogbox({  buttons: { 'click': function () {
    $(self).css({background:'red',border:'2px solid black'}) 
}, } });

in this case i used $(self) to access the box itself knowing it isnt the right way. but that's the part i need to fix.

self by the way is declared as a private variable for the function dialogbox which is invloked by the $.dialogbox jquery function in this fashion :

newBox = new dialogbox ( content)

ps. i apologize about not probably being more clear . please ask me questions if u need more info

thank you

Answer 1

At the point where $.dialogbox() is called, we don't have anything that references an individual dialog box element/object. $('.box') references the collection of dialogs on the page, and this inside the click handler references the button.

One approach would be to locate the dialog as an ancestor of the button. jQuery's closest() gets you the nearest ancestor of an element that matches a selector. For example:

$('.box').dialogbox({
    buttons: { 'click': function() {
        self = $(this).closest('.box');
        self.css({
            background: 'red',
            border: '2px solid black'
        });
    }}
 });

Some thoughts:

• Unlike this, self doesn't have any predefined meaning in javascript or jQuery. It's just a variable name. If you use it, you have to assign it a value.

• The use of self may be a bit misleading in this context -- does it refer to the dialog or the button? You might want to name it dialog or similar.

• Also note that if you are using the jQueryUI dialog box, you probably intended to write .dialog() (see ref), not .dialogbox().

Answer 2

I believe the issue you're describing is the same as one I asked here just the other day: how to refer to an object that is out of scope due to nesting of functions (and in particular, jQuery's habit of overriding the value of this.

The solution that was offered to me and that I found the most useful was to use the Prototype library's Function.bind to call functions within a particular context that you can specify.

For the details on how it works, check out my question: http://stackoverflow.com/questions/2025789/preserving-a-reference-to-this-in-javascript-prototype-functions

Answer 3

after the great feedback i got , I wanted to implement this option widely using jquery here is my solution:

$.fn.bindFunction = function(fn) {

fn.apply(this);

};

the way u would call it is

$(this).bindFunction(fn).

I hope this helps those jquery users out there