javascript - registro - Cuadro de confirmación Jquery

onclick confirm para borrar un registro de la bd

Question

Estoy buscando crear un cuadro de confirmación genérico que pueda ser utilizado por múltiples widgets fácilmente, pero estoy teniendo problemas con el alcance y esperaba una forma más clara de hacer lo que estoy tratando de hacer.

Actualmente tengo lo siguiente:

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

Actualmente solo estoy buscando hacer algo tan simple como cerrar la caja desde dentro del widget, pero creo que he envuelto mi propio cerebro en círculos en términos de qué sabe qué. ¿Alguien quiere ayudar a limpiar mi cerebro confundido?

Saludos, Sam

El código resultante:

Pensé que podría ser útil para las personas que encuentran este hilo en días posteriores buscar una solución a un problema similar para ver el código que resultó de las útiles respuestas que obtuve aquí.

Resultó que al final fue bastante simple (como la mayoría de los enredos mentales frustrantes).

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

Podría pasar jqContainer a las funciones de confirmación / cancelación.

Alternativamente, asigne jqContainer como una propiedad de la persona que llama. Dado que las funciones de confirmación / cancelación se llaman como métodos de la persona que llama, tendrán acceso a ella a través de this . Pero eso te limita a rastrear un diálogo por widget.

Answer 2

Pruebe algo como esto:

(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 eso no funciona, intente definir sus devoluciones de llamada (confirmar_acción, cancelar_acción) como miembros privados de su objeto. Pero deberían poder acceder al alcance externo de su objeto principal.