1
\$\begingroup\$

The goal of the code is to

  • initialize a Dialog with settings
    • make sure the object is reusable
  • Setup the options to reuse the code

I'm not quite sure if this is overkill, or I am going about this problem in the entirely wrong way. Any input would be appreciated.

var myDialog = myDialog || (function() {

  var options = {
    title: 'Attention',
    msg: 'Message Here',
    focusOn: ''
  }

    function show(opts) {

      options = $.extend({}, options, opts);

      $('<p>' + options.msg + '</p>').dialog({
        title: options.title,
        modal: true,
        draggable: false,
        show: {
          effect: "fade",
          duration: 500
        },
        hide: {
          effect: "fade",
          duration: 200
        },
        buttons: {
          'Close': function() {
            $(this).dialog("close");
          }
        },
        close: function() {
          if (options.focusOn.length !== 0) {
            $(options.focusOn).focus()
          }
          $(this).dialog("destroy");
        }
      });
    }

    function updateOptions(opts) {
      options = $.extend({}, options, opts);
    }

  return {
    fire: show,
    options: updateOptions
  };

}());

myDialog.fire({
  msg: 'Hello there',
  focusOn: '#test'
});
\$\endgroup\$
1
\$\begingroup\$

It is already a good attempt at making better-looking code. Just a few improvement:

  1. Declare all private functions one-by-one with declaring that individual just like you declare your variable (see jQuery code).

  2. There is no need for the updateOptions() method; we don't need it.

var myDialog = myDialog || (function () {

    var options = {
        title: 'Attention',
        msg: 'Message Here',
        focusOn: ''
    }

    var show = function(opts) {
            options = $.extend({}, options, opts);
            $('<p>' + options.msg + '</p>').dialog({
                title: options.title,
                modal: true,
                draggable: false,
                show: {
                    effect: "fade",
                    duration: 500
                },
                hide: {
                    effect: "fade",
                    duration: 200
                },
                buttons: {
                    'Close': function() {
                        $(this).dialog("close");
                    }
                },
                close: function() {
                    if (options.focusOn.length !== 0) {
                        $(options.focusOn).focus();
                    }
                    $(this).dialog("destroy");
                }
            });
        },

        updateOptions = function(opts) {
            options = $.extend({}, options, opts);
        };

    return {
        fire: show,
        options: updateOptions
    };

}());
\$\endgroup\$
  • \$\begingroup\$ Is this a correct approach, or is there a better way to 'initialize' .dialog()? Additionally, could you please point me to where you mean by 'see jquery code'. \$\endgroup\$ – Brett Santore Jul 30 '14 at 12:36
  • \$\begingroup\$ this is right way to use to it , jquery.com/download look into any of the version , you will find out how they are using \$\endgroup\$ – paritosh Jul 30 '14 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.