Help with JavaScript scope

Question

I fear I may be losing my marbles today, because I don't know how to do what I want to. I want a custom prompt that I can call from any of my other JavaScript functions. I don't know how to get this work, even though it feels like I've done it a hundred times.

Here is an example

var modal = function() {

    var prompt = function(msg) {
        // custom prompt builder here... let's return hard coded for example's sake
        return true;
    };

}();

var items = function() {
    var init = function() {

        $('.delete').click(function() {
            var confirm = modal.prompt('Are you sure you wanna delete that pal?');
        });

    };    


    $(document).ready(init);    
}();

What I want to be able to do is call the prompt method of modal, and get a return value based on the user input. Now this, I can do, but I am having problems calling the inner method. I want to group these together because I will probably have a custom modal alert() too.

Please don't suggest the built in JavaScript OK/Cancel as I gotta do this custom.

Many thanks!

Answer 1

Have you tried:

var modal = {
    prompt : function(msg) {
           return true;
         }
};

and then you can cal it like:

modal.prompt();

Answer 2

From the way you call modal.prompt, it appears you want the anonymous function to return an object that will be stored in modal:

var modal = (function() {
    // various private fields & methods here
    ...
    // the public interface
    var self = {
        prompt: function(msg) {
            // custom prompt builder here... let's return hard coded for example's sake
            return true;
        }
    };
    return self;
})();

Answer 3

I strongly recommend anyone who is going to make a habit of writing javascript code read and understand this http://www.jibbering.com/faq/faq_notes/closures.html.

It's critically important.

Answer 4

For your first issue, the prompt function, is declared as a variable within your modal object, you can't access it because you aren't actually exposing it publicly:

var modal = (function() {
  var privateMethod1 = function () {/*...*/},
      privateVar = 'foo';

  function privateMethod2() {
    //...
  }

  return { // public members
    prompt: function (msg) {
      // custom prompt builder here... let's return hard coded for example's sake
      return true;
    }
  };
})();

Now for the following issue:

What I want to be able to do is call the prompt method of modal, and get a return value based on the user input.

The user input is an asynchronous action, I would recommend you to use a callback based model, the built-in JavaScript OK/Cancel window.prompt can actually return a value, because it stops the code execution and waits for the user input.

var modal = (function() {
    return {
      prompt: function(msg, okCallback, cancelCallback) {
        // ...

        $('#okButton').click(function () {
          // internal actions here, like closing the dialog, cleanup, etc...
          okCallback(); // execute the ok callback
        });

        $('#cancelButton').click(function () {
          // ...
          cancelCallback(); // execute the cancel callback
        });
      }
    };
})();