Boîte de confirmation Jquery

Question

Je cherche à créer une boîte de confirmation générique pouvant être utilisée facilement par plusieurs widgets, mais je rencontre des problèmes de portée et espérais trouver un moyen plus clair de faire ce que j'essayais de faire.

Actuellement, j'ai les éléments suivants -

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

Actuellement, je cherche seulement à faire quelque chose d'aussi simple que de fermer la boîte de dialogue à l'intérieur du widget, mais je pense avoir mis mon propre cerveau dans des cercles en termes de savoir quoi. Quelqu'un veut aider à nettoyer mon cerveau confus?

Salut, Sam

Le code résultant:

J'ai pensé que cela pourrait être utile aux personnes qui trouveraient ce fil dans les jours à la recherche d'une solution à un problème similaire de voir le code résultant des réponses utiles que j'ai obtenues ici.

Il s’est avéré que c’était assez simple à la fin (comme la plupart des démêlés frustrants).

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

Vous pouvez transmettre jqContainer aux fonctions de confirmation / annulation.

Vous pouvez également affecter jqContainer en tant que propriété de l'appelant. Comme les fonctions confirmation / annulation sont appelées comme méthodes d’appelant, elles y auront accès via this. Mais cela vous limite à suivre un dialogue par widget.

Answer 2

Essayez quelque chose comme ça:

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

Si cela ne fonctionne pas, essayez de définir vos rappels (confirm_action, cancel_action) en tant que membres privés de votre objet. Mais ils devraient pouvoir accéder à la portée externe de votre objet principal.