JQuery confirmation window

Question

I'm looking to create a general confirmation box that can be easily used by several widgets, but I ran into scope issues and was hoping for a clearer way to do what I'm trying to do.

I currently 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 just want to do something as simple as closing a window from a widget, but I think I wrapped my own brain in circles in terms of what it knows what. Does anyone want to help cleanse my puzzled brain?

Cheers, Sam

Received code:

I thought that it might be useful for people who next time will find this topic in search of a solution to a similar problem, to see the code resulting from the useful answers that I received here.

As it turned out, in the end it was pretty simple (as most disappointing mind-balls).

  /** * 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 can pass jqContainer in confirmation / cancel function.

Alternatively, assign jqContainer as the property of the caller. Since the confirm / cancel functions are called call methods, they will have access to it through this . But this limits the tracking of one dialog for each widget.

Answer 2

Try something like this:

 (function() { var global = this; /*****************This is new****************/ var jqContainer; global.confirmationBox = function() { config = { container: '<div>', message:'' } return { config: config, render: function(caller) { // store the container in the outer objects scope instead!!!! 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 /*******Hopefully, you would have access to jqContainer here now *****/ }, 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'); 

If this does not work, try defining your callbacks (confirm_action, cancel_action) as private members of your object. But they must have access to the outer area of ​​your main object.