Boîte de confirmation Jquery

Question

Je cherche à créer une boîte de confirmation générique qui peut être facilement utilisée par plusieurs widgets, mais je rencontre des problèmes de portée et espérais une façon plus claire de faire ce que j'essaie de faire .

Actuellement, je donne les résultats 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 suis à la recherche de faire quelque chose d'aussi simple que près de la boîte du intérieur du widget, mais je pense que je l'ai enveloppé mon propre cerveau dans les milieux en termes de ce qui sait quoi. Quelqu'un veut-il aider à effacer mon cerveau troublé?

Cheers, Sam

Le code résultant:

Je pensais que ce serait peut-être utile pour les personnes qui trouvent ce fil dans les jours plus tard à la recherche d'une solution à un problème similaire à voir le code résulté des réponses utiles que j'ai eu ici. En fin de compte, c'était assez simple à la fin (comme la plupart des enchevêtrements frustrants sont).

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

Alternativement, affectez jqContainer en tant que propriété de l'appelant. Puisque les fonctions de confirmation/annulation sont appelées comme méthodes de l'appelant, elles y auront accès via this. Mais cela vous limite à suivre une boîte de dialogue par widget.

Answer 2

Essayez quelque chose comme ceci:

(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 callbacks (confirm_action, cancel_action) en tant que membres privés de votre objet. Mais ils devraient être en mesure d'accéder à la portée externe de votre objet principal.