Question

I have an issue where I’m reusing the dialog so I wouldnt have to duplicate the code. The issue I’m having is when I click an “Add New” button, I have as button “save” and “cancel”. The save button in the dialog handles saving the information. If I click the “Edit Existing” button to edit my information, I would like the “save” button to change to an “edit” button. Is this possible?

Answer 1

I think what you’re trying to do is, at runtime, change the text of the buttons depending on the user action. This discussion involving Richard Worth may help, and it’s what I’ve had to use in order to accomplish what you’re trying to do.

Basically, what you are trying to do isn’t possible by defining the buttons array as an object literal (inline in the dialog definition). What you should do is define your buttons array outside the dialog initialization; your array indexes can be your label text (as you’ll see in the message discussion example). Then, when you initialize the array, you just assign the buttons property to your buttons array.

In pseudo-code, you’ll do this:

function createDialog(mode) {  //mode=new for dayClick; edit for eventClick
  var myButtons = {};  //initialize the object to hold my buttons
  if (mode === "new") {
    myButtons["Save"] = function() {...}  //the function that does the save
  } else {
    myButtons["Edit"] = function() {...}  //the function that edits
  }
  myButtons["Cancel"] = function() {...} //common cancel function for either new or edit mode

  //other logic

  $("#dialogAddEdit").dialog({
    ...
    buttons: myButtons,  //assign the buttons property to your myButtons array object
    ...
  });
}

Hope this helps!!