为什么我的 jQuery-ui 模态对话框不显示两个自定义按钮？

Question

我有一个通用的 Javascript 函数，用于显示带有两个按钮的 jQuery-ui 模式对话框——本质上是“继续”和“取消”，尽管文本有所不同。我在我的应用程序的三个地方调用它。发生的事情是只显示第二个按钮，即“取消”按钮。这是函数：（String.Format 是我一直使用的一个外部函数，因为 Javascript 没有内置函数 - 我知道这不是问题。）

function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
  //add the dialog div to the page
  $('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
  //create the dialog
  $('#theDialog').dialog({
    width: 400,
    height: "auto",
    modal: true,
    resizable: false,
    draggable: false,
    close: function (event, ui) {
      $('body').find('#theDialog').remove();
      $('body').find('#theDialog').destroy();
    },
    buttons: [
    {
      text: continueText,
      click: function () {
        $(this).dialog('close');
        return true;
      },
      text: cancelText,
      click: function () {
        $(this).dialog('close');
        return false;
      }
    }]
  });

  return false;
}

这里有一个 sn-p 显示我是如何称呼它的：

if(CheckFormDataChanged() {
  var changeTitle = "Data has been changed";
  var changeText = "You have updated information on this form. Are you sure you wish to continue without saving?";
  var changeContinue = "Yes, continue without saving";
  var changeCancel = "No, let me save";
  if (DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)) {
    if (obj) obj.click();
    return true;
  }
}

我的函数（或调用）有什么问题？

更新：这是我现在正在使用的。我意识到在其中一个模式对话框中我不需要取消按钮，只需要一个确认按钮：

function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
  var def = new $.Deferred();
  //add the dialog div to the page
  $('body').append(String.Format("<div id='theDialog' title='{0}'><p>{1}</p></div>", titleText, bodyText));
  //create the button array for the dialog
  var buttonArray = [];
  buttonArray.push({ text: continueText, click: function () { $(this).dialog('close'); def.resolve(); } });
  if (!suppressCancel) {
    buttonArray.push({ text: cancelText, click: function () { $(this).dialog('close'); def.reject(); } });
  }
  //create the dialog
  $('#theDialog').dialog({

    ... dialog options ...

    close: function (event, ui) { $('body').find('#theDialog').remove(); },
    buttons: buttonArray
  });
  return def.promise();
}

及用法：

DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
  .done(function () { if (obj) obj.click(); return true; })
  .fail(function () { return false; });

只是为了给你一些上下文，obj 是一个传递给客户端函数的 ASP.Net 按钮；如果函数返回true，则触发服务器端的OnClick事件；如果为假，则不是。在这种情况下，服务器端 OnClick 前进到 TabContainer 中的下一个选项卡（除其他外）。发生的事情是它无论如何都会移动到下一个选项卡，即使我在 fail() 函数中返回 false。

Answer 1

您的花括号已关闭：

[{
    text: continueText,
    click: function () {
        $(this).dialog('close');
        return true;
    }
}, {
    text: cancelText,
    click: function () {
        $(this).dialog('close');
        return false;
    }
}]

正如你所拥有的，你的按钮数组中只有一个对象。

Answer 2

我还不知道为什么按钮不显示EDIT，啊，是的，我可以，缺少一个大括号。

我可以告诉你，你的 return 行根本行不通。

显示对话框，您的函数立即返回，继续处理，因此click 回调返回值被完全忽略。

你可以做的是返回一个承诺：

function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
    var def = $.Deferred();
    ...
    buttons: [
    {
        text: continueText,
        click: function () {
            $(this).dialog('close');
            def.resolve();
        }
    },   
    {    // ah - here's your button bug - a missing brace
        text: cancelText,
        click: function () {
            $(this).dialog('close');
            def.reject();
        }
    }

    ...

    return def.promise();
}

有用法：

DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel)
   .done(function() {
       // continue was clicked
   }).fail(function() {
       // cancel was clicked
   });