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按钮传递给客户端函数;如果函数返回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

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

我可以告诉您，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
   });

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

2 个答案: