dhtmlx scheduler load select data for each y section id.

Scheduler Javascript
#1

I have professional list in my y section. while click on calender i got professional id.now i load the services of that professional in select(dropdown) according to selected professional id. but following two problems occur.

I fill the data(services) according to professional id but it fill on second time click on calender.(show empty select(dropdown) on first time).

After that when i click on save button on lightbox it throws the error (TypeError: e is null ..n(e,t)e.firstChild.value=t||""},get_value:function(e){return e.firstChild.value).

i am using the onEmptyClick method to open the lightbox because i have to open the lightbox on single click.

#2

Hello,

What kind of select control do you use? is it regular select docs.dhtmlx.com/scheduler/combo.html ? How do you load options into it?

The method scheduler.showLightbox takes event id as an argument, what do you provide there on empty click?

please provide some of your code, so we could understand the issue better.

#3

Here is my piece of code please review it…

scheduler.attachEvent(“onEmptyClick”, function(id, e) {
var action_data = scheduler.getActionData(e);
var event = {
start_date: action_data.date,
end_date: scheduler.date.add(action_data.date, 5, “minute”),
stylist_id: action_data.section
};
var eventId = scheduler.addEventNow(event);
scheduler.showLightbox(eventId);
// reload lightbox with multiple service for same professional //
var profId = event.stylist_id;
$.ajax({
type: “POST”,
dataType: ‘json’,
url: ‘loadMultipleServices’,
data: “prof_id=” + profId,
success: function(data) {
service_section = JSON.parse(data.services);
lightBoxWithAddedServices = scheduler.config.lightbox.sections = [
{name: “Event”, height: 30, map_to: “text”, type: “textarea”, focus: true},
{name: “Professionals”, height: 23, type: “select”, options: sections, map_to: “stylist_id”},
{name: “Clients”, height: 23, type: “select”, options: client_section, map_to: “client_id”},
{name: “Services”, height: 23, type: “select”, options: service_section, map_to: “service_id”},
{name: “Description”, height: 40, map_to: “description”, type: “textarea”, focus: true},
{name: “Owner”, height: 23, type: “textarea”, map_to: “owner_id”},
{name: “time”, height: 72, type: “time”, map_to: “auto”}
];
//scheduler.resetLightbox();
}
});
});

#4

The options are loaded after lightbox is shown, so they won’t be applied for that event. Try calling the lightbox from an ajax callback, when lightbox configuation is already updated [code]scheduler.attachEvent(“onEmptyClick”, function(id, e) {
var action_data = scheduler.getActionData(e);
var event = {
start_date: action_data.date,
end_date: scheduler.date.add(action_data.date, 5, “minute”),
stylist_id: action_data.section
};
var eventId = scheduler.addEventNow(event);

// reload lightbox with multiple service for same professional //
var profId = event.stylist_id;
$.ajax({
	type: "POST",
	dataType: 'json',
	url: 'loadMultipleServices',
	data: "prof_id=" + profId,
	success: function(data) {
		service_section = JSON.parse(data.services);
		lightBoxWithAddedServices = scheduler.config.lightbox.sections = [
			{name: "Event", height: 30, map_to: "text", type: "textarea", focus: true},
			{name: "Professionals", height: 23, type: "select", options: sections, map_to: "stylist_id"},
			{name: "Clients", height: 23, type: "select", options: client_section, map_to: "client_id"},
			{name: "Services", height: 23, type: "select", options: service_section, map_to: "service_id"},
			{name: "Description", height: 40, map_to: "description", type: "textarea", focus: true},
			{name: "Owner", height: 23, type: "textarea", map_to: "owner_id"},
			{name: "time", height: 72, type: "time", map_to: "auto"}
		];
		
		scheduler.resetLightbox();
		scheduler.showLightbox(eventId);
	}
});

});[/code]

#5

Thanx i try it but when i click on calender cell lightbox open and then automatically close. :frowning: