Show and Hide Dialog Footer Content with JQuery

Question

Hello,

I am using the JQuery Dialog UI component. This dialog is defined like the following:

<div id="confirmDialog" title="Are you sure?">
  Are you sure you want to delete this?
</div>

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:

$(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('<div id=\'P1W\'>Please wait</div>');
    }
  });      
});

function okPress() {
  // Disable buttons
  // Show P1W
}

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.

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?

Answer 1

First of all, you could simply find the third button using

open: function(e, ui){
      $(this).find('.ui-button:nth-child(3)').replaceWith('<div id=\'P1W\'>Please wait</div>').hide();
}

The .hide() function will hide your added content immediately.

In okPress, you'd do

$('#P1W').show();

to show the content.

I'm not sure about this, but you might be able to disable the buttons using $("#confirmDialog").dialog("disable");.