Redefining a jQuery dialog button

Question

In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.

Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.

So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?

My code so far:

function OverrideDialogButtonCallbacks(sDialogInstance) {
  oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
  console.log(oButtons); // logs the buttons correctly

  if(sDialogInstance == 'TestInstance') {
    oButtons.Save = function() {
      alert('A new callback has been assigned.');
      // code for ajax-post will come here.
    }
  }
}

Answer 1

$('#dialog').dialog({
'buttons' : {
    'Save' : {
        id:"btn-save", // provide the id, if you want to apply a callback based on id selector
        click: function() {
           //
        },
    },
}
});

Did you try this? to override button's callback based on the need.

Answer 2

No need to re-assign at all. Try this.

function OverrideDialogButtonCallbacks(dialogSelector) {
    var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
                    .find("button:contains('Save')");

    button.unbind("click").on("click", function() {
        alert("save overriden!");
    });
}

Call it like OverrideDialogButtonCallbacks("#dialog");

Working fiddle: http://jsfiddle.net/codovations/yzfVT/

Answer 3

You can get the buttons using $(..).dialog('option', 'buttons') . This returns an array of objects that you can then rewire by searching through them and adjusting the click event:

// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };

See this fiddle for an example: http://jsfiddle.net/z4TTH/2/

If necessary, you can check the text of the button using button[i].text .

---

UPDATE:

The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:

// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };

$('#dialog').dialog('option', 'buttons', buttons);

See this fiddle: http://jsfiddle.net/z4TTH/3/

Answer 4

Can you try binding your new function code with Click event of Save?

if(sDialogInstance == 'TestInstance') {
            $('#'+savebtn_id).click(function() {
              alert('A new callback has been assigned.');
              // code for ajax-post will come here.
            });
    }