Question

I have the following code that I apply when the document is ready:

$(document).ready(function () {

      $('#updateDialog').dialog({
          autoOpen: false,
          width: 400,
          resizable: false,
          modal: true,
          buttons: {
              "Update": function () {
                  $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
                  $("#updateReferenceForm").submit();
              },
              "Cancel": function () {
                  $(this).dialog("close");
              }
          }
      });

  });

Is there a way that I can take the actions of this code and move it to a function. Then just have a one line call to this function inside my $(document).ready(function () {

Answer 1

Yes it’s very simple:

function foo()
{
       $('#updateDialog').dialog({
      autoOpen: false,
      width: 400,
      resizable: false,
      modal: true,
      buttons: {
          "Update": function () {
              $("#update-message").html(''); //make sure there is nothing on the message before we continue                         
              $("#updateReferenceForm").submit();
          },
          "Cancel": function () {
              $(this).dialog("close");
          }
      }
  });      
}

// First way:
$(function(){
    foo();
});

// Second way:
$(document).ready(function () {
    foo()
});

// Mathias Bynens version to save conflicts with global vars.
(function() {
     var foo = function() { /* do something */};
     $(foo); 
 }()
 );