title: How can I move creation of a dialog into an external function in jQuery UI?
body: <p>I have the following code:</p>
  
  <pre><code>$('#commonDialog').dialog({
              autoOpen: false,
              modal: true,
              resizable: false,
              draggable: true,
              height: 'auto',
              width: 875,
              buttons: {
                  "Submit": function () {
                      tinyMCE.triggerSave();
                      $("#update-message").html('');
                      $("#menuForm").submit();
                  },
                  "Cancel": function () {
                      $(this).dialog("close");
                  }
              },
              open: function (event, ui) {
                  tinyMCE.init(window.tinyMCEOptions);
                  $('.ui-dialog-buttonpane').
                      find('button:contains("Submit")').button({ icons: { primary: 'ui-icon-plus'} });
                  $('.ui-dialog-buttonpane').
                      find('button:contains("Cancel")').button({ icons: { primary: 'ui-icon-cancel'} });
                  $(":input[type='checkbox']").wijcheckbox();
                  $("#dialog_type").wijdropdown();
                  $("#dialog_select").wijdropdown();
                  $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
              }
          });
  </code></pre>
  
  <p>Now the code is on my web page but I want to use the same code for another page. How can I move all of this code into another function so I can place it in an external file and share it? </p>
  
  <p>Ideally what I would like to do is just have the following on each page:</p>
  
  <pre><code>$('#commonDialog').createCommonDialog()
  </code></pre>