如何在ajax响应后更新jQuery对话框

问题描述：

我想在接收到ajax响应后更新jQuery对话框。如何在ajax响应后更新jQuery对话框

这里是我的定义

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();

和Ajax发送之前：

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

而且一旦收到Ajax响应我尝试以下操作：

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

....但没有发生...... 有什么想法？

是不是有一个简单的hide（）或close（）方法来关闭对话框？ – 2010-03-30 08:12:05

我想要做的是添加一个OK按钮到已经可见的模式对话框中 – bogumbiker 2010-03-30 08:41:40

答

我认为你不能以这种方式修改现有的对话框。要完成您面临的任务，只需在第一个通话中包含按钮，但立即隐藏它。一旦ajax请求完成，只需取消隐藏按钮。为了正确的视觉体验只是使用隐藏/显示整个按钮窗格：

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();

在事件处理程序的AJAX完全只是

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

可选方案，您可以提供一个宽松的标识符动画不隐藏进程。

如何在ajax响应后更新jQuery对话框

相关推荐