1

我正在使用 JQuery $.dialog()，我在其中打开一个带有 OK 和 Cancel 按钮的对话框。

我原以为当对话框打开时，代码会停止，然后在用户选择“确定”或“取消”时首先继续。

这是我的完整源代码 http://pastebin.com/uw7bvtn7

我遇到问题的部分位于第 127-151 行。

$("#dialog:ui-dialog").dialog("destroy");

$("#dialog-confirm").dialog({
    resizable: false,
    height: 600,
    modal: true,
    open: function() {
    $(this).children('div.dialog-text').replaceWith("<h3><b>Users</b></h3>" + makeDialogTable(users) + "<h3><b>Owners</b></h3>" + makeDialogTable(owners));
    },
    
    buttons: {
    "Okay": function() {
        $(this).dialog("close");
    },
    
    Cancel: function() {
        is_okay = 0;
        $(this).dialog("close");
    }
    } // buttons
    
}); // dialog


alert(is_okay);

代码现在所做的是首先显示对话框，然后显示alert(is_okay)顶部。

我想要的是，当用户按下 OK 或 Cancel 时，代码首先会继续。

那怎么可能呢？

4

9 回答 9

3

您可以将附加代码放在“确定”和“取消”按钮功能中。例如：

"Okay": function() {
    $(this).dialog("close");
    alert(is_okay);
},
于 2011-05-17T14:05:33.797 回答
2

这不能以“好”的方式完成，而且我强烈建议不要那样做。

您所描述的是一个完全阻塞的模态窗口/对话框，这对于 Web 应用程序来说简直太棒了。您已经使用modal标志创建了对话框，因此当对话框打开时，用户实际上无法在您的站点上执行任何操作，但 UI 保持响应。

同样，实际上没有办法“保持”代码执行。由于 Javascript 和 UI 更新共享同一个线程，因此朝这个方向的任何方法都会冻结UI线程。

很长一段时间以来，开发人员推动 Javascript 越来越非阻塞（浏览器中的 Javascript 实际上总是遵循这条路线，这是非常好的事情）。这个想法在后端的 nodeJS 中得到了重生。所以，你在这里逆流而上，不要这样做。

无论您尝试在那里解决什么问题，都尝试以不同的方式思考。想想功能，使用回调和事件，想想……ECMAscript！:p

于 2011-05-17T14:06:36.990 回答
2

代码确实按顺序执行。的工作$("#dialog-confirm").dialog()是弹出一个对话框。alert(is_okay)在它上面的行被执行之前不会执行。但是Okay并且Cancel是事件监听器。

"Okay": function() {
    $(this).dialog("close");
}

上面的代码将事件侦听器分配给事件。这就是它所做的一切，它不执行那些函数，它只是将这些函数分配给事件调用。

我建议阅读一些有关事件和事件侦听器的内容。如果您打算认真使用 JQuery，它将为您省去很多困惑。

于 2011-05-17T14:16:47.630 回答
1 
$("#dialog-confirm").dialog({  ... 
close :(event, ui) { alert(is_okay);}
})

或者您可以稍后绑定函数：

$( "#dialog-confirm" ).bind( "dialogclose", function(event, ui) {
   alert(is_okay);
});

代码不会像 那样停止并继续alert，但只有在对话框关闭时才会显示消息。

于 2011-05-17T14:07:17.373 回答
1

只需将打开对话框后的所有代码放入一个函数中，然后从对话框回调函数中调用该函数以进行确定/取消。

function doTheRest(args) {
    alert(args);
}

// snippet from dialog options
"Okay": function() {
    $(this).dialog("close");
    doTheRest(1);
},

"Cancel": function() {
    $(this).dialog("close");
    doTheRest(0);
}
于 2011-05-17T14:07:50.157 回答
1

浏览器使用基于事件的异步编程模型，其中许多事情可以（并且确实）同时发生。这就是样式转换（滚动或淡入淡出等动画）的工作方式。

您的示例显示一个对话框，然后引发警报。它不能“等待”用户单击按钮，因为这样做会阻止浏览器执行任何其他操作。

因此，您需要重构您的代码，以便在与操作关联的回调中单击“确定”或“取消”按钮时执行所需的任何操作。

换句话说，您需要：

buttons: {
  "Okay": function() { // this function is called when a user clicks the Okay button
    // do whatever work is required here
  }
}
于 2011-05-17T14:10:22.360 回答
0

在 JavaScript 中没有直接的“等待”方法——异步事件通常通过回调来处理。这意味着您需要根据事件而不是顺序代码来考虑您的程序。而不是您当前的代码：

$("#dialog-confirm").dialog({
  ...
});

alert(is_okay);
// rest of code

您需要将“其余代码”部分包装到它自己的函数中，然后从对话框的 OK/Cancel 回调中调用它：

$("#dialog-confirm").dialog({
    ...

    buttons: {
    "Okay": function() {
        $(this).dialog("close");
        what_happens_if_okay();
    },

    Cancel: function() {
        $(this).dialog("close");
        what_happens_if_not_okay();
    }
    } // buttons

}); // dialog
于 2011-05-17T14:07:04.723 回答
0

因此，如果我理解正确，您希望 aalert显示选项 OK 和 Cancel 并且Dialog除非点击 OK 否则不会出现。

而不是使用另一个alert为什么不尝试使用另一个dialog带有 Ok 和 Cancel 的呢？

在您的 html 中执行以下操作：

<div id = "hiddenDialogElements">
  <button id = "Ok" onclick = "confirm(true)">OK</button>
  <button id = "Cancel" onclick = "confirm(false)">Cancel</button>
</div>

有了这个CSS：

#hiddenDialogElements
{
   display: none;
}

然后您可以在将创建dialog（您想要等待的地方）的事件上执行此操作：

$('#hiddenDialogElements').dialog({ //Code });

还有这个：

function confirm(ifOk)
{
    if(ifOk)
    {
        //Create Dialog
    }else {
        //Do nothing
    }
}
于 2011-05-17T14:13:21.390 回答
0

做这样的事情...

function MyAlert(Message, Title,FuncExecAfterOkPressed) {

$("<div>" + Message + "</div>").dialog({
    title: Title,
    dialogClass: "alert",
    width: "auto",
    modal:true,
    open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
    buttons: [
    {
        text: "Ok", click: function () {               
            $(this).dialog("close");
            if (FuncExecAfterOkPressed != null) {
                $.Callbacks().add(FuncExecAfterOkPressed).fire(null);
            }
        }
    }]
});

}

现在这样称呼

 MyAlert(data, "Duplicate", function () {
                            alert("I m moumit");
                            $("#Name").val("");
                        });

你需要的一件事是 JQueryUI 插件......享受吧。

于 2013-02-10T14:03:53.473 回答