为什么我的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;
}

这是显示我如何称呼它的片段：

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 Button； 如果函数返回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
   });