caixa de confirmação jQuery
-
20-08-2019 - |
Pergunta
Eu estou olhando para criar uma caixa de confirmação genérico que pode ser usado por vários widgets facilmente, mas eu estou correndo em problemas com escopo e estava esperando por uma maneira mais clara de fazer o que estou tentando fazer.
Atualmente tenho o seguinte -
(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');
Atualmente estou olhando apenas para fazer algo tão simples como perto a caixa do dentro do widget, mas eu acho que eu envolvi meu próprio cérebro em círculos em termos do que sabe o quê. Quem quiser ajudar a limpar meu cérebro confuso?
Cheers, Sam
O código resultante:
Eu pensei que poderia ser útil para pessoas que acham esta discussão em dias posteriores à procura de uma solução para um problema semelhante para ver o código que resultou das respostas votos cheguei aqui.
Como se vê que era muito simples no final (como a maioria dos frustrantes mente-emaranhados são).
/**
* 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
Solução
Você poderia passar jqContainer ao confirmar / cancelar funções.
Como alternativa, jqContainer atribuir como uma propriedade do chamador. Desde a confirmação funções são chamados como métodos de chamada / cancelar, eles terão acesso a ele através this
. Mas que limita a rastrear um diálogo per widget.
Outras dicas
Tente algo parecido com isto:
(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');
Se isso não funcionar, tente definir suas chamadas de retorno (confirm_action, cancel_action) como membros particulares de seu objeto. Mas eles devem ser capazes de acessar o escopo externo de seu objeto principal.