title: Why won't my jQuery-ui modal dialog display two custom buttons?
body: <p>I have a generic Javascript function for displaying a jQuery-ui modal dialog with two buttons -- essentially "Continue" and "Cancel", though the text varies. I'm calling it in three places in my application. What's happening is that only the second button, the "Cancel" button is being displayed. Here's the function: (String.Format is an external function I always use since Javascript doesn't have one built-in - I know it isn't the problem.)</p>
  
  <pre><code>function DisplayModalDialog(titleText, bodyText, continueText, cancelText) {
    //add the dialog div to the page
    $('body').append(String.Format("&lt;div id='theDialog' title='{0}'&gt;&lt;p&gt;{1}&lt;/p&gt;&lt;/div&gt;", 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;
  }
  </code></pre>
  
  <p>And here's a snippet showing how I'm calling it:</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>What's wrong with my function (or the call)?</p>
  
  <p><strong>UPDATE</strong>: Here's what I'm working with now. I realized that on one of the modal dialogs I didn't need a cancel button, just an acknowledge button:</p>
  
  <pre><code>function DisplayModalDialog(titleText, bodyText, continueText, cancelText, suppressCancel) {
    var def = new $.Deferred();
    //add the dialog div to the page
    $('body').append(String.Format("&lt;div id='theDialog' title='{0}'&gt;&lt;p&gt;{1}&lt;/p&gt;&lt;/div&gt;", 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();
  }
  </code></pre>
  
  <p>And the usage:</p>
  
  <pre><code>DisplayModalDialog(changeTitle, changeText, changeContinue, changeCancel, false)
    .done(function () { if (obj) obj.click(); return true; })
    .fail(function () { return false; });
  </code></pre>
  
  <p>Just to give you some context, <code>obj</code> is an ASP.Net Button being passed to the client-side function; if the function returns true, the server-side OnClick event is triggered; if false, it isn't. In this case, the server-side OnClick advances to the next tab in a TabContainer (among other things). What's happening is that it's moving to the next tab anyway, even though I'm returning false in the <code>fail()</code> function.</p>