Question

我在jQuery UI对话框中有一个由AJAX加载的jqGrid。除了没有关闭的Dialog之外，一切正常。当我点击两个按钮时，它会到达警报，但对话框没有被关闭。

buttons: {
    'Confirm': function() {
        alert('OK Confirm');
        $('#test-grid').dialog('close');
    },
    'Cancelar': function() {
        alert('OK Cancel');
        $(this).dialog('close');
    }
}

我尝试使用$('#test-grid').dialog('close')和$(this).dialog('close')，但没有人工作。如果我删除AJAX加载的jqGrid，一切正常。 Firefox和Chrome上的错误控制台为空。

我正在加载jqGrid页面：

$('#test-grid').load('/grid').dialog('open');

任何人都可以帮助我吗？

更新

我尝试使用AJAX加载一个简单的HTML代码段，问题仍然存在。

Answer 1

问题是对load的调用干扰了打开对话框的调用。您可以通过将AJAX内容加载到test-grid的子元素中来解决此问题。例如：

 $('#test-grid-child').load('/grid');
 $('#test-grid').dialog('open');

<小时/> 更新

我刚刚阅读了docs for load并对此进行了更多考虑。发生的事情是，当执行代码$('#test-grid').load('/grid').dialog('open');时，会启动AJAX请求并立即创建对话框。但是一旦load的AJAX请求完成，jQuery就会返回并覆盖#test-grid的内容。这解释了无法关闭对话框的原因，因为底层标记已从对话框对象下面修改出来。

将数据检索到子元素可以消除此问题，因为load和dialog现在每个都操纵DOM的不同部分。

请注意，如果AJAX请求需要很长时间才能完成，您可能需要考虑实现complete函数来向用户提供反馈 - 可能通过显示微调器直到数据准备就绪。例如：

$('#test-grid-child').load('ajax/test.html', function() {
  alert('Load was performed.'); // Perform any necessary UI action here
});

无论如何，有更多的信息比您可能需要的更多，但我只是想更新这个问题，而在我的脑海中仍然是新鲜的......

由AJAX加载的jqGrid的jQuery UI对话框没有关闭

1 个答案: