Jquery cuadro de confirmación

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 el 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 estoy buscando hacer algo tan simple como cerca de la caja de la en el widget, pero creo que me he envuelto mi propio cerebro en los círculos en términos de qué sabe qué. ¿Alguien quiere ayudar a aclarar mi cerebro aturdido?

Saludos, Sam

El código resultante:

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

Como resultado, 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.

De forma alternativa, 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 del this. Pero eso te limita a rastrear un diálogo por widget.

Answer 2

intentar 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 (confirm_action, cancel_action) como miembros privados de su objeto. Pero deberían poder acceder al alcance externo de su objeto principal.