Pass array of properties to the jquery dialog

Question

CreateTemplate, OpenTemplate and many other Jquery dialog setups use most time the same settings but there are exceptions for the height and width.

Is it possible to pass the jquery .dialog() function sort of an array with all key/value settings so I can easily always pass this array?

   $(document).ready(function () {


        // I would like to setup here sort of an array with properties and values
        // as basis for each click-handler

            /************************* Open template ****************************/
            $('#OpenTemplate').click(function (e) {
                e.preventDefault();
                var link = this;

                $('#MyDialog').dialog({
                    open: function (e) { $(this).load($(link).attr('href')); },
                    title: link.innerHTML,
                    autoOpen: true,
                    modal: true,
                    show: 'fade',
                    hide: 'fade',
                    width: 250,
                    height: 200,
                    buttons:
                    { 
                        "OK": function () { openTemplate($(this), $('form', this)); },
                        "Cancel": function () { $(this).dialog("close"); }
                    }
                });
            });

            /************************* Create template ****************************/
            $('#CreateTemplate').click(function (e) {
                e.preventDefault();
                var link = this;

                $('#MyDialog').dialog({
                    open: function (e) { $(this).load($(link).attr('href')); },
                    title: link.innerHTML,
                    autoOpen: true,
                    modal: true,
                    show: 'fade',
                    hide: 'fade',
                    width: 250,
                    height: 200,
                    buttons:
                    {
                        "OK": function () { createTemplate($(this), $('form', this)); },
                        "Cancel": function () { $(this).dialog("close"); }
                    }
                });
            });

    });

I would suggest overriding the default options. http://stackoverflow.com/questions/2287045/override-jqueryui-dialog-default-options — Kevin B, Oct 02 '12 at 18:45

Bill Pond · Accepted Answer · 2012-10-02T20:53:37.330

0

I would try to just doing something like this:

var dialogObject = { title: 'Title', width: 250 };
$('#CreateTemplate').dialog(dialogObject);

This object can contain all the values you know will be the same throughout all your dialog boxes. If you then want to change the height, you can alter an existing dialog by doing something like this:

$('#dialog-confirm').attr('height', '250');

If you need to add buttons to the dialogObject:

var dialogObject = { 
     title: 'Title', 
     width: 250,
     buttons: { 
     "Ok": function() 
      { 
        $(this).dialog("close"); 
      } 
    }   
};

edited Oct 02 '12 at 20:53

answered Oct 02 '12 at 20:03

Bill Pond

60
1
7

how would you set the buttons array for example the "OK" to a new function? – Elisabeth Oct 02 '12 at 20:44
The object is only taking what is inside the usual list of attributes and putting the list into the brackets. I made an edit to my post at top. I am trying to learn the syntax for this site. Let me keep on trying to fix it! – Bill Pond Oct 02 '12 at 20:49
your last comment has code tag failures? Do I miss some code from yu? – Elisabeth Oct 02 '12 at 20:50
Let me know if that code works. Just replace the buttons attribute that you want to use with mine. I just put a dummy one there to show how it works. – Bill Pond Oct 02 '12 at 20:57

Pass array of properties to the jquery dialog

1 Answers1