How to update jQuery dialog after ajax response

I would like to update jQuery dialog aft开发者_如何学JAVAer receiving ajax response.

Here is my definition

  var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
.dialog({      
  modal: true,
  width: 160,
  autoOpen: false,
  resizable: false,
  draggable: false,
});

$dialog.siblings(".ui-dialog-titlebar").hide(); 

and before ajax send:

$dialog.dialog('open').dialog('option', 'height', 50);

And once receiving ajax response I am trying following:

jQuery('.ui-dialog-content').dialog('option', 'buttons', 
                            { "Ok": function() { jQuery(this).dialog('close'); } } );

....but nothing happens...... any idea?

I think you cannot modify an existing dialog in this way. To accomplish the task you're faced with just include the button in the first call, but immediately hide it. Once the ajax request has finished just unhide the button. For a proper visual experience just use hide/unhide the whole button pane:

var $dialog = jQuery('<div>Wait</div>') .html('Sending your message...<img src="../images/AjaxWait.gif" style="float: left; padding-left: 50px;"/>')
  .dialog({      
    modal: true,
    width: 160,
    autoOpen: false,
    resizable: false,
    draggable: false,
    buttons: { "Ok": function() { jQuery(this).dialog('close'); }
  })
;

// hide buttons
$dialog.children('.ui-dialog-buttonpane').hide();

In the event handler for ajax complete just do

// unhide buttons
$dialog.children('.ui-dialog-buttonpane').show();

Optionally you may provide an easing identifier to animate the unhiding process.