Jquery-Bestätigungsfeld

Question

Ich möchte ein generisches Bestätigungsfeld erstellen, das von mehreren Widgets einfach verwendet werden kann, aber ich habe Probleme mit dem Bereich und hoffe auf eine klarere Vorgehensweise, was ich versuche zu tun .

Zur Zeit habe ich die folgend -

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

Derzeit bin ich nur etwas so einfach wie nah die Box aus dem innerhalb des Widgets zu tun suchen, aber ich denke, ich mein eigenes Gehirn in Kreisen eingewickelt habe in Bezug auf was weiß was. Wer möchte helfen, mein verwirrtes Gehirn zu klären?

Cheers, Sam

Der resultierende Code: later Tage in der Suche nach einer Lösung für ein ähnliches Problem

Ich dachte, es könnte für die Menschen nützlich sein, die diesen Thread finden Sie den Code zu sehen, dass resultierte aus den hilfreichen Antworten, die ich hier bekommen habe.

Wie sich herausstellte, war es am Ende ziemlich einfach (wie die meisten frustrierenden Gedankenverwicklungen sind).

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

Sie könnten jqContainer an die Funktionen zum Bestätigen/Abbrechen übergeben.

Alternativ weisen Sie jqContainer als Eigenschaft des Aufrufers zu. Da die Bestätigungs-/Abbruchfunktionen als Methoden des Aufrufers aufgerufen werden, haben sie über this Zugriff darauf. Das beschränkt Sie jedoch darauf, einen Dialog pro Widget zu verfolgen.

Answer 2

so etwas wie dieses Versuchen:

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

Wenn das nicht funktioniert, versuchen Sie Ihre Rückrufe (confirm_action, cancel_action) als private Mitglieder des Objekts definieren. Sie sollten jedoch in der Lage sein, auf den äußeren Bereich Ihres Hauptobjekts zuzugreifen.