Refresh Lightbox with temporary appointments

Scheduler Javascript
#1

Hi there Scheduler folks,

there is some tricky thing I want to do. I have two custom forms for my lightbox, lets say #my_form_1 and #my_form_2. On default, I load #my_form_1 for a new appointment.

But now the challenge: I want to give the user the possibility to change the appointment type after he has created a new event (while lightbox is open). So I built in a dropdown box to change the appointment type, which requires other fields and the other custom form. So the dropdown has to switch the custom form to #my_form_2, but I want to keep entries like Start, End, Title, etc. already inserted in #my_form_1.

I tried to save temp id to somewhere, and close / reopen lightbox with endLightbox and startLightbox., but did not succeed. I need to reload the lightbox for the same tempid with another lightbox.

Anybody has done sonmething like this before? Any Ideas?

Jensovic

#2

Hello,
if you use details form that is defined via scheduler.config.lightbox.sections config, the more or less generic way to redraw it on the fly may look like following:[code]//store possible configurations somewhere
var configs = {
type1: [
{name:“description”, height:43, map_to:“text”, type:“textarea” , focus:true},
{name:“subject”, height:20, type:“select”, options: subject, map_to:“subject” },
{name:“time”, height:72, type:“time”, map_to:“auto” }
],
type2: [
{name:“description”, height:43, map_to:“text”, type:“textarea” , focus:true},
{name:“time”, height:72, type:“time”, map_to:“auto” }
]
};
//function to switch lightbox configuration and redraw the form
function switchLightbox(type){
if(configs[type]){
var box_visible = scheduler.getState().lightbox_id;
if(box_visible){
scheduler.hide_lightbox();
}

	scheduler.config.lightbox.sections = configs[type];

	scheduler.resetLightbox();
	if(box_visible){
		scheduler.showLightbox(box_visible);
	}
}

};[/code]
Then it can be called as switchLightbox(‘type1’);
If you need to preserve selected values, you can collect them from the form via scheduler.formSection(section).getValue method, and assign to the new form via .setValuescheduler.formSection(controlName).getValue(); //and scheduler.formSection(controlName).setValue();
docs.dhtmlx.com/scheduler/api__s … ction.html

However, the ‘time’ and the ‘recurrence’ controls might need some custom approach.

If you define custom html form, the approach may be similar except for the ‘.formSection’ part.
You must have been implemented a way to assign event values to the form when it’s opened, and the way retreive values from the form when it’s saved. So, before closing lightbox of one type, you can collect the values, and apply them after new lightbox is opened

#3

You’re correct. Thank you!

I didn’t even have to care about config, because I load the custom form via ajax, so hideLightbox -> resetLightbox -> showLightbox solved the issue. The form reloads perfectly, width init Start/End Time filled in.

Now the only problem are the text and date values already entered or changed.
I really like to transport them to the other form.
Can I store values in a temp_id without saving the event to the database?

Jensovic

#4

Hello,

I’m not quite understand why it is so, and where the problem starts.
Since you use custom form which you’ve implemented, you have a full control of it’s code.
So the expected sequence for changing form type might be following (it is the same as with the default lightbox):

  1. Collect values from form. Put into some variable, do not update the edited event.
  2. Close the form without saving the changes. it must be the same logic as in case user clicks cancel.
  3. Open the form of the required type for the same event. It will be opened with an old values.
  4. Manually set values that were retrieved in (1) into the inputs of the new form.

All of this shouldn’t have side effects on the edited event, and shouldn’t modify the event in progress.