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?
1
-
1It's hard to say much without an example. I would consider inserting the primary key of the record being edited -- in edit mode -- and then have the server code handle the absence (or presence) of that field.Wayne– Wayne2010-08-17 02:22:59 +00:00Commented Aug 17, 2010 at 2:22
Add a comment
|
2 Answers
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!!
4 Comments
hersh
@ D Hoerster -- in Firebug, I get error of "mode is not defined".
David Hoerster
Where are you defining mode? In my example, it was just pseudo-code -- I'm assuming that you know somehow what action the user is taking (whether it's a create or an edit action). Based on that, you then branch into the appropriate section of code to add your button(s). Sorry if that wasn't clear. How do you know if the user is trying to create something new or edit an existing item?
hersh
I'm using fullcalendar to pop up the modal ... so on fullcalendar's dayClick which is a callback, that would add an event ... on fullcalendar's eventClick, also a callback, this would edit and event.
David Hoerster
So if you want both event handlers to funnel through a single function to create the dialog, you could refactor the dialog creation logic into a separate function (e.g.
createDialog) which takes a mode parameter. In your dayClick handler, you'd call createDialog("new");, and in your eventClick handler, you'd call createDialog("edit");. I edited my pseudo-code above to represent this.There is another simple solution to do that :
Just create your dialog box as usually, give the two (or more) buttons a "keyword" (here "open_key" and "cancel_key"), then, just after initialization, set the text of these HTML elements using a little jQuery trick :contains().
Sample code below (pp_loca is my function to get a localized string, but pp_loca could not be used in the "buttons {...}" option...
$( "#dialog_open_from_server" ).dialog({
resizable: false,
height: "auto",
width: 600,
modal: true,
buttons: {
"open_key": function() {
$( this ).dialog( "close" );
},
"cancel_key": function() {
$( this ).dialog( "close" );
}
}
});
$('.ui-button:contains("open_key")').html(pp_loca('ITF_26'));
$('.ui-button:contains("cancel_key")').html(pp_loca('ITF_27'));
