Show and Hide Dialog Footer Content with JQuery
<p>I am using the JQuery <a href="http://jqueryui.com/demos/dialog/" rel="nofollow">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>
