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.