Question

I’m looking to create a generic confirmation box that can be used by multiple widgets easily, but I’m running into problems with scope and was hoping for a clearer way of doing what I’m trying to do.

Currently I have the following –

(function() {      var global = this;     global.confirmationBox = function() {     config = {         container: '<div>',         message:''     }     return {         config: config,         render: function(caller) {             var jqContainer = $(config.container);             jqContainer.append(config.message);             jqContainer.dialog({                 buttons: {                     'Confirm': caller.confirm_action,                      Cancel: caller.cancel_action                 }             });         }     } } //end confirmationBox global.testWidget = function() {     return {         create_message: function(msg) {             var msg = confirmationBox();             msg.message = msg;             msg.render(this);         },         confirm_action: function() {             //Do approved actions here and close the confirmation box             //Currently not sure how to get the confirmation box at             //this point         },         cancel_action: function() {             //Close the confirmation box and register that action was              //cancelled with the widget. Like above, not sure how to get             //the confirmation box  back to close it         }     } }//end testWidget })(); //Create the widget and pop up a test message var widget = testWidget(); widget.create_message('You need to confirm this action to continue'); 

Currently I’m just looking to do something as simple as close the box from the within the widget, but I think I’ve wrapped my own brain in circles in terms of what knows what. Anyone want to help clear my befuddled brain?

Cheers, Sam

The resulting code:

I thought it might be useful for people who find this thread in later days looking for a solution to a similar problem to see the code that resulted from the helpful answers I got here.

As it turns out it was pretty simple in the end (as most of the frustrating mind-tangles are).

 /**  * Confirmation boxes are used to confirm a request by a user such as  * wanting to delete an item  */  global.confirmationBox = function() {     self = this;     config = {         container: '<div>',         message: '',      }     return {         set_config:config,         render_message: function(caller) {             var jqContainer = $(config.container);             jqContainer.attr('id', 'confirmation-dialog');             jqContainer.append(config.message);             jqContainer.dialog({                buttons: {                    'Confirm': function() {                        caller.confirm_action(this);                     },                    Cancel: function() {                        caller.cancel_action(this);                    }                }            });         }     }  } // end confirmationBox   global.testWidget = function() {     return {         create_message: function(msg) {             var msg = confirmationBox();             msg.message = msg;             msg.render(this);         },         confirm_action: function(box) {             alert('Success');             $(box).dialog('close');          },         cancel_action: function(box) {             alert('Cancelled');             $(box).dialog('close');          }     } }//end testWidget 

Answer 1

You could pass jqContainer to the confirm/cancel functions.

Alternately, assign jqContainer as a property of caller. Since the confirm/cancel functions are called as methods of caller, they will have access to it via this. But that limits you to tracking one dialog per widget.