Jquery confirmation box
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.
Steerpike
Globetrotting Australian currently in Sydney Manager of product teams Web developer Interactive architect
Updated on August 11, 2022Comments
-
Steerpike almost 2 years
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