Question

我有一个触发弹出窗口的按钮，如下所示。我从服务器端提取一些信息以在弹出窗口中显示它。问题是在服务器端提取信息需要一段时间，我的对话框打开为空，然后在1-2秒后显示信息。这太烦人了。有没有办法只在服务器端信息准备好时显示对话框？

function openPopup(id)
    {
        $("#divPopup").dialog({
            resizable: true,
            height: 200,
            width: 300,
            modal: true,
            title: 'Popup Title',
            buttons: {
                OK: function () {                        
                    //TODO
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            open: function (event, ui) {
                // Can I hide the dialog popup before the info is ready?
                populateInfo(id);
                addDialogBGConfirm($(this).parent().css('z-index') - 1);
            },
            close: function (event, ui) {
                removeDialogBGConfirm();
            }
        });
    }

    function populateInfo(id)
    {
        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: window.location.href + "/GetServerSideInfo",
            data: "{'profileId': '" + id + "'}",
            dataType: 'json',
            success: function (res) {
                // populate popup controls based on server side info
                $('.pname').text(res.d[0]);
                // ...                         

            },
            error: function (data, textStatus) {
                alert('Error in calling method');
            }
        });
    }

Answer 1

您可以尝试在Promise附近包裹openPopup(id)。

例如，如果您在本地获取文件并在加载后使用它，它应该看起来像

$.get("data/file.txt").then(useFile);

useFile是处理file.txt内容的函数。

有关详情，请查看http://www.html5rocks.com/en/tutorials/es6/promises/

Answer 2

我设法通过在弹出窗口中显示加载动画来解决这个问题，就像@yogi建议的那样。这只是在我的弹出HTML中创建一个加载div，然后在$ .ajax成功方法的末尾添加以下内容：

 $('.loading').css("display", "none"); // loading animation div
 $('.InfoSection').css("display", "block"); // real content

如何在打开事件之前隐藏jquery对话框？

2 个答案: