Add Additional Buttons

Question

I have a scenario where i have a standard set of buttons to be available within the jQuery Dialog box but based on other conditions, I need to add additional buttons.

Good news is that I wont need to Add/Remove buttons, just Add. These buttons will effectively trigger a PostBack, forcing a refresh of the page content.

$(divSearch).dialog('option', 'buttons',
    {   // @buttons
        "Add": function (evt) {
            $(btnAdd).click();

            // Close
            $(this).dialog("close");
        },
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
);

$(divSearch).dialog('option', 'buttons',
    {   // @buttons
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        },
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
);

Question

How do I have a common Dialog Init and then come back later and add the unique set of buttons for the scenarios?

Answer 1

This is discussed under the API documentation: http://api.jqueryui.com/dialog/#option-buttons

$( ".selector" ).dialog( "option", "buttons", 
  [
    {
      text: "Ok",
      icon: "ui-icon-heart",
      click: function() {
        $( this ).dialog( "close" );
      }

      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
);

Your example was missing the Array. Applied to your example, this would be:

$(divSearch).dialog('option', 'buttons', [
  {
    text: "Add",
    click: function () {
      $(btnAdd).click();
      $(this).dialog("close");
    }
  },
    text: "Cancel",
    click:function () {
      $(this).dialog("close");
    }
  }
]);

$(divSearch).dialog('option', 'buttons', [
  {
    text: "Search",
    click: function () {
      $(btnSubmit).click();
      $(this).dialog("close");
    }
  },
  {
    text: "Cancel",
    click: function () {
      $(this).dialog("close");
    }
  }
]);

Hope that helps. You could also apply all the buttons and .show() or .hide() the ones you need.

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    buttons: [{
      text: "Add",
      id: "ui-btn-add",
      class: "add",
      click: function() {
        $(btnAdd).click();
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }, {
      text: "Search",
      id: "ui-btn-search",
      class: "search",
      click: function() {
        $(btnSubmit).click();
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $("#ui-btn-add, #ui-btn-search").hide();
        $(this).dialog("close");
      }
    }]
  });
  $("#ui-btn-add, #ui-btn-search").hide();
  $("button[id*='opener']").click(function() {
    console.log($(this));
    if ($(this).hasClass("add")) {
      $("#ui-btn-add").show();
    } else {
      $("#ui-btn-search").show();
    }
    $("#dialog").dialog("open");
  });
});

Working Example: https://jsfiddle.net/Twisty/dow48098/

Answer 2

Solution

Ref: https://stackoverflow.com/a/19175417/659246

// Setup standard settings for Dialog
InitDialog(divSearch, 315
    , { // @buttons
        "Cancel": function (evt) {
            $(this).dialog("close");
        }
    }
    , function (evt) {  // @open
        $(this).parent().appendTo("form");
    });

// In a Function...Far, Far, Away from the Document.Ready
var btns = $(divSearch).dialog('option', 'buttons');
$(divSearch).dialog('option', 'buttons'
    , $.extend({}, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    }, btns)
);

I used $.extend to get my desired result.

Explanation

capture the existing Buttons:

var btns = $(divSearch).dialog('option', 'buttons');

Pending on your need, I need to add a button in front of the standard set:

$(divSearch).dialog('option', 'buttons'
    , $.extend({}, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    }, btns)
);

If you don't care on the order, then simply do this:

$(divSearch).dialog('option', 'buttons'
    , $.extend(btns, {
        "Search": function (evt) {
            $(btnSubmit).click();

            // Close
            $(this).dialog("close");
        }
    })
);

If you need to Add, Subtract, or Change the button(s) object, then you can do it through the btns variable.