变量值不在对话框内更新

时间:2013-06-05 20:00:58

标签: javascript jquery jquery-ui

我有以下简单的对话框:

function confirmDialog(message, title) {


var returnvalue;

if ($("#confirmDialog").length == 0)
    $('body').append('<div id="confirmDialog"></div>');

var dlg = $("#confirmDialog")
    .html(message)
    .dialog({
        autoOpen: false,
        minHeight: 50,
        title: title,
        show: {
            effect: "explode",
            duration: 250
        },
        hide: {
            effect: "explode",
            duration: 250
        },

        buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { returnvalue = true; $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { returnvalue = false; $("#confirmDialog").dialog("close"); }
            }
        },
        modal: true
    });
$('#confirmDialog').dialog("open");
return returnvalue;
}

非常简单的实施。我的问题是,当我运行脚本时,最后,当它返回变量returnvalueundefined,意思是,它没有将它设置为true或{{1取决于单击了哪个按钮。

我尝试将其设置为false,但无论我点击哪个按钮,它都不会获得不同的值。

任何帮助表示赞赏!!谢谢!

编辑:

我相信我注意到为什么变量没有设置。我从另一个对话框中的var returnvalue = false;事件调用此对话框,在用户单击父对话框的“保存”按钮后,弹出此对话框。现在,由于它包含在一个函数中,它不会等待我的输入,这意味着它没有“看到”我单击“确定”或“取消”。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:2)

jQuery对话框不像内置的javascript confirm()函数那样阻止执行。我可以建议两种可能的解决方案:

  1. 将“ok”和“取消”回调传递到confirmDialog功能。
  2. 让您的confirmDialog函数返回一个单击按钮后解析的promise对象,并让调用函数等待解析。
  3. 我更喜欢选项2。

答案 1 :(得分:1)

我会让按钮单击在关闭对话框之前触发事件,然后我会在父进程中监听该事件。

  • 父对话框打开
  • 用户点击保存
  • 打开确认对话框
  • 用户关闭确认对话框
  • 确认对话框根据
  • 触发“ok”或“cancelled”事件
  • 父对话框正在侦听“确定”或“已取消”事件
  • 父对话框会做出相应的反应

确认对话框按钮

buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { $(this).trigger("ok"); $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { $(this).trigger("cancel"); $("#confirmDialog").dialog("close"); }
            }
        }

父对话框,或document.ready()

$("#confirmDialog").on({
    "ok":function(event,ui){ 
      //save work
    },
    "cancel":function(event,ui){
      // cancel work
     }
    },null,null);