Question

我需要在页面上发生事件时呈现jQuery UI对话框。

该对话框具有以下设置。

var opt = {
    autoOpen: false,
    modal: true,
    width: 1000,
    height: 650,
    title: 'Title Here'
};

按下按钮时，以下代码运行。（连同其他500条线路）

 $("#dlgInfo").dialog(opt).dialog("open");

到目前为止，Chrome和Firefox都很好。 IE除外根本不呈现对话框。研究表明，IE有点急于渲染盒子并失败。解决方案是将打开的代码包装在setTimeout函数中。

setTimeout(function () {
    $("#dlgInfo").dialog(opt).dialog("open");
}, 500);

成功，对话框现在在所有浏览器中打开，但由于某种原因，我在chrome中松开了Model属性。我不知道为什么......

编辑...

我开始认为JSON调用搞砸了。看起来似乎正在设置Modal选项，但是当JSON对象呈现给页面时，它会导致模态方面消失。

以下是JSON代码的示例。

$('#clientResults').empty();
$.ajax({
    type: "GET",
    url: "http://" + window.location.hostname + window.location.pathname + "handlers/clients.ashx?" + $("#searchfield").val(),
    async: true,
    dataType: "json",
    success: function (data) {
    $('#clientResults').append('<a id="Clients"><h1>Clients (' + data.Clients.length + ') - Click client name to view client matters.</h1></a>');
    if (data.Clients.length > 0) {
        $('#clientResults').append('<table id="clientTable" class="Results clients"><thead><tr><th>Group Entity</th><th>Client Name</th><th>Client Code</th><th>Status</th><th>Type</th><th>Office</th><th>Active</th><th>Responsible Billing Partner</th><th>Open Date</th><th>Close Date</th></tr></thead><tbody></tbody></table>');
         for (var i = data.Clients.length; i--;) {
             $('#clientTable > tbody:last').append('<tr id = "' + data.Clients[i].Group + $.trim(data.Clients[i].ClientCode) + '" onclick="addDetails(this.rowIndex);"><td>' + data.Clients[i].Group + '</td><td>' + data.Clients[i].ClientName + '</td><td>' + data.Clients[i].ClientCode + '</td><td>' + data.Clients[i].Status + '</td><td>' + data.Clients[i].entity_type + '</td><td>' + data.Clients[i].Office + '</td><td>' + data.Clients[i].Active + '</td><td>' + data.Clients[i].RespBillEmpl + '</td><td>' + data.Clients[i].OpenDate + '</td><td>' + data.Clients[i].CloseDate + '</td></tr>');
                }
               $("#clientTable").tablesorter();
            }
        },
        failure: function () {
            $('#clientResults').empty();
            $('#clientResults').append('<a id="Clients"><h1>Clients</h1></a>');
            $('#clientResults').append('An error has occoured getting the client data. Please contact Service Desk on ext 5555. Thanks');
        }
    });

#ClientResults是一个空div标签。

Answer 1

这可能是一个链条问题。你能尝试将它分成两个这样的语句吗？

$("#dlgInfo").dialog(opt);
$("#dlgInfo").dialog("open");

如果这不起作用那么可能是这个吗？

$("#dlgInfo").dialog(opt);

setTimeout(function(){

    $("#dlgInfo").dialog("open");

}, 1);

它也可能是范围问题。如果您记录opt对象，是否得到了预期的结果？

console.log(opt);
$("#dlgInfo").dialog(opt);
$("#dlgInfo").dialog("open");

jQuery UI对话框模式选项不能与setTimeout一起使用

1 个答案: