JQuery Bestätigungsfeld

Question

Ich suche ein allgemeines Bestätigungsfeld zu erstellen, die leicht durch mehrere Widgets verwendet werden kann, aber ich Probleme mit Rahmen laufe und habe gehofft, für eine klarere Art und Weise zu tun, was ich tun werde versuchen.

Zur Zeit habe ich die folgenden -

(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');

Zur Zeit suche ich gerade innerhalb des Widgets von der etwas so einfach wie nah die Box zu tun, aber ich denke, ich mein eigenes Gehirn in Kreisen in Bezug auf den eingewickelt habe, was weiß, was. Wer möchte, dass meine verwirrten Gehirn klar helfen?

Cheers, Sam

Der resultierende Code:

dachte ich, es für die Menschen nützlich sein könnten, die später Tage in diesem Thread finden eine Lösung für ein ähnliches Problem suchen, den Code zu sehen, die von den hilfreichen Antworten führte ich hier.

Es stellt sich heraus, dass es am Ende ziemlich einfach war (wie die meisten der frustrierend Geist-Verwicklungen sind).

 /**
 * 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

Sie jqContainer zum bestätigen passieren könnte / stornieren Funktionen.

Alternativ zuweisen jqContainer als Eigenschaft des Anrufers. Da die confirm / cancel Funktionen als Methoden der Anrufer genannt werden, werden sie Zugang durch this haben. Aber das schränkt Sie Tracking einen Dialog pro Widget.

Answer 2

Versuchen Sie etwas wie folgt aus:

(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');

Wenn das nicht funktioniert, versuchen Sie Ihre Rückrufe definieren (confirm_action, cancel_action) als private Mitglieder des Objekts. Aber sie sollten den äußeren Umfang des Hauptobjekts zugreifen können.