title: Show and Hide Dialog Footer Content with JQuery
body: <p>I am using the JQuery <a href="http://jqueryui.com/demos/dialog/" rel="nofollow noreferrer">Dialog UI component</a>. This dialog is defined like the following:</p>
  
  <pre><code>&lt;div id="confirmDialog" title="Are you sure?"&gt;
    Are you sure you want to delete this?
  &lt;/div&gt;
  </code></pre>
  
  <p>When I create this dialog, I am adding some content in the footer next to the buttons. I want this content to be hidden when the dialog is initially displayed. Then, when a user clicks "OK", I want to show the content and disable the buttons. In an attempt to do this, I'm currently doing the following:</p>
  
  <pre><code>$(document).ready(function () {
    $("#confirmDialog").dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Cancel: function () { $(this).dialog('close'); },
        'OK': okPress,
        'P' : function() {}
      },
      open: function(e, ui){
        $(e.target).parent().find('span').filter(function(){
          return $(this).text() === 'P';
        }).parent().replaceWith('&lt;div id=\'P1W\'&gt;Please wait&lt;/div&gt;');
      }
    });      
  });
  
  function okPress() {
    // Disable buttons
    // Show P1W
  }
  </code></pre>
  
  <p>I have no idea how to 1) Hide the footer content initially. 2) Show the footer content when okPress is reached 3) Disable the buttons in the dialog.</p>
  
  <p>In short, I guess I'm not sure how to interact with the footer contents of a JQuery Dialog. Can somebody please help me with this? </p>