I created an entirely custom form for my Scheduler Lightbox. It’s all working fine… except when I try to save my events. If I use the default Lightbox, I can see that the DataProcessor works fine and communicates with the database. But with my custom form, DataProcessor doesn’t register a change (I guess) and so it doesn’t update the database.
Here is my scheduler configuration code, including the showLightbox function and DataProcessor initialization:
[code] // Calendar Configuration
scheduler.config.xml_date="%Y-%m-%d %H:%i"; // set dhtmlxScheduler to accept MySQL DateTime format dates
scheduler.config.start_on_monday = false;
// Configure Lightbox (Input form)
var html = function(id) { return document.getElementById(id); }; //just a helper function
scheduler.showLightbox = function(id) {
var ev = scheduler.getEvent(id);
//console.log(ev);
var winRequestForm = null;
form = createRequestForm(winRequestForm,ev);
toolbar = createRequestToolbar(winRequestForm);
scheduler.startLightbox(id, html("divRequest"));
populateRequestForm(form,ev);
};
scheduler.load("vacationrequest_processor.php?task=getrequests_calendar"); // load data into calendar
scheduler.init("divCalendar",new Date(),"month"); // Display Calendar
// Calendar DataProcessor
var dpCalendar = new dataProcessor("vacationrequest_processor.php?task=getrequests_calendar");
dpCalendar.init(scheduler);
[/code]
The function that creates the form:
[code]function createRequestForm(container,event){
var valuesHours = [
{text:“12:”, value:“00”},
{text:“1:”, value:“01”},
{text:“2:”, value:“02”},
{text:“3:”, value:“03”},
{text:“4:”, value:“04”},
{text:“5:”, value:“05”},
{text:“6:”, value:“06”},
{text:“7:”, value:“07”},
{text:“8:”, value:“08”},
{text:“9:”, value:“09”},
{text:“10:”, value:“10”},
{text:“11:”, value:“11”}
];
var valuesMinutes = [
{text:“00”, value:“00”},
{text:“15”, value:“15”},
{text:“30”, value:“30”},
{text:“45”, value:“45”}
]
var formStruct = [
{type:“settings”, offsetLeft: 10},
{type:“hidden”, name:“RequestID”},
{type:“block”, offsetLeft:0, list:[
{type:“block”, offsetLeft:0, list:[
{type:“select”,name:“EmployeeID”,label:“Name”,offsetLeft:0,connector:"/HR/employees_processor.php?task=fillselect_employee&employeeid=" + currentUser[“EmployeeID”] + “&role=” + activeRole},
{type:“newcolumn”},
{type:“select”,name:“RequestStatus”,label:“Status”,disabled:true,options:[
{text:“Not Submitted”, value:0},
{text:“Awaiting Approval”, value:1},
{text:“Approved”, value:2},
{text:“Denied”, value:3},
{text:“Taken”, value:4},
{text:“Canceled”, value:5}
]}
]},
{type:“block”, offsetLeft:0, list:[
{type:“calendar”,name:“StartDate”,label:“Date(s)”,dateFormat:"%Y-%m-%d",weekStart:7,inputWidth:80},
{type:“newcolumn”},
{type:“calendar”,name:“ReturnDate”,label:"-",dateFormat:"%Y-%m-%d",weekStart:7,inputWidth:80,note:{text:“optional”},hidden:true}
]}
]},
{type:“select”,name:“RequestType”,label:“Request Type”,required:true,options:[
{text: “”, value: “”},
{text: “Vacation”, value:1, list:[
{type:“select”,name:“VacationHours”,label:“Total # Hours”,options:[
{text: “”, value: 0},
{text: “2”, value: 2},
{text: “4”, value: 4},
{text: “8”, value: 8},
{text: “5 (nights)”, value: 5},
{text: “10 (nights)”, value: 10}
]}
]},
{text: “Vacation Sick”, value:2, list:[
{type:“select”,name:“SickHours”,label:"# Hours",options:[
{text: “”, value: 0},
{text: “2”, value: 2},
{text: “4”, value: 4},
{text: “8”, value: 8},
{text: “5 (nights)”, value: 5},
{text: “10 (nights)”, value: 10}
]}
]},
{text: “Floating Holiday”, value:3},
{text: “Change of Scheduled Hours”, value: 4, list:[
{type:“block”, offsetLeft:0, list:[
{type:“fieldset”, label:“Reason”,offsetLeft:0,list:[
{type:“settings”, position:“label-right”},
{type:“radio”, name:“Reason”, label:“Personal Business”, value:“personal”,checked:true},
{type:“radio”, name:“Reason”, label:“Medical”, value:“medical”}
]},
{type:“newcolumn”},
{type:“fieldset”, label:“Core/Overtime Hours”,list:[
{type:“settings”, position:“label-right”},
{type:“radio”, name:“CoreHourChange”, label:“Core”, value:“1”, checked:true},
{type:“radio”, name:“CoreHourChange”, label:“Overtime”, value:“0”}
]}
]},
{type:“block”,name:“LeaveTime”,offsetLeft:0,hidden:true,list:[
{type:“select”,name:“LeaveTimeHours”,label:“Time Leaving”,offsetLeft:0,options:valuesHours},
{type:“newcolumn”},
{type:“select”,name:“LeaveTimeMinutes”,offsetLeft:0,options:valuesMinutes},
{type:“newcolumn”},
{type:“select”,name:“LeaveTimeAMPM”,options:[
{text:“am”, value:“am”},
{text:“pm”, value:“pm”}
]}
]},
{type:“block”,name:“ArriveTime”,offsetLeft:0,list:[
{type:“select”,name:“ArriveTimeHours”,label:“Time Arriving”,offsetLeft:0,options:valuesHours},
{type:“newcolumn”},
{type:“select”,name:“ArriveTimeMinutes”,offsetLeft:0, options:valuesMinutes},
{type:“newcolumn”},
{type:“select”,name:“ArriveTimeAMPM”,options:[
{text:“am”, value:“am”},
{text:“pm”, value:“pm”}
]}
]},
{type:“input”, name:“ChangeHours”, label:“Total Hours”},
{type:“newcolumn”},
{type:“fieldset”,label:“Change Type”,list:[
{type:“settings”, position:“label-right”},
{type:“radio”,name:“ChangeType”,label:“Late Arrival”,value:“arrival”,checked:true},
{type:“radio”,name:“ChangeType”,label:“Leaving Early”,value:“leaving”},
{type:“radio”,name:“ChangeType”,label:“Out/In”,value:“outin”}
]}
]}
]},
{type:“hidden”, name:“LastChangedBy”},
{type:“block”, list:[
{type:“button”, name:“btnSave”, value:“Save”},
{type:“newcolumn”},
{type:“button”, name:“btnClose”, value:“Close”},
]}
];
var divRequestForm = document.getElementById("divRequestForm");
divRequestForm.innerHTML = "";
var formRequest = new dhtmlXForm("divRequestForm",formStruct);
//var formRequest = container.attachForm(formStruct);
formRequest.attachEvent("onButtonClick", function(id) {
switch(id) {
case "btnClose":
scheduler.endLightbox(false,document.getElementById("divRequest"));
//scheduler.endLightbox(false);
//container.close();
break;
case "btnSave":
saveRequestForm(formRequest,event);
break;
}
});
formRequest.attachEvent("onChange", function(id, value, checked) {
switch(id) {
case "ChangeType":
showTimeInOut(formRequest,value);
break;
case "RequestType":
changeRequestType(formRequest,value);
//resizeRequestForm(winRequestForm,formRequest.getItemValue("RequestType"));
break;
}
});
return formRequest;
}[/code]
And the function that saves the form:
[code]function saveRequestForm(form,event) {
//var ev = scheduler.getEvent(form.getItemValue(“RequestID”));
var initials = “”;
var url = “/hr/employees_processor.php?task=getEmployeeInitialsByID&employeeid=” + form.getItemValue(“EmployeeID”);
ajaxResponse = dhtmlxAjax.getSync(url); //server call to get initials
if (ajaxResponse.xmlDoc.responseText!=“error”) { initials = ajaxResponse.xmlDoc.responseText; }
//alert(ajaxResponse.responseText);
event.EmployeeID = form.getItemValue("EmployeeID");
event.RequestType = form.getItemValue("RequestType");
event.ChangeType = null;
event.Reason = null;
event.CoreHourChange = null;
event.CurrentUserID = currentUser.EmployeeID;
switch (event.RequestType) {
case "1": // Vacation
if (form.getItemValue("ReturnDate")=="") { form.setItemValue("ReturnDate",new Date(form.getItemValue("StartDate"))); } // set equal to Start Date if blank
event.start_date = new Date(form.getItemValue("StartDate"));
event.end_date = new Date(form.getItemValue("ReturnDate"));
event.end_date.setDate(event.end_date.getDate() + 1); // store as day after last day for display purposes
event.end_date.setHours(0); event.end_date.setMinutes(0); event.end_date.setSeconds(0); // set Time elements to midnight
alert(event.end_date);
event.TotalHours = form.getItemValue("VacationHours");
event.text = initials + " - Vacation (" + event.TotalHours + " hours)";
break;
case "2":
event.start_date = new Date(form.getItemValue("StartDate"));
event.end_date = new Date(); // initialize variable as date object
event.end_date.setDate(event.start_date.getDate() + 1); // store as day after last day for display purposes
event.TotalHours = form.getItemValue("SickHours");
event.text = initials + " - Sick (" + event.TotalHours + " hours)";
break;
case "3":
event.start_date = new Date(form.getItemValue("StartDate"));
event.end_date = new Date(); // initialize variable as date object
event.end_date.setDate(event.start_date.getDate() + 1); // store as day after last day for display purposes
event.TotalHours = null;
event.text = initials + " - Floating Holiday";
break;
case "4":
event.start_date = new Date(form.getItemValue("StartDate"));
event.end_date = new Date(form.getItemValue("StartDate"));
event.TotalHours = form.getItemValue("ChangeHours");
event.Reason = form.getItemValue("Reason");
event.CoreHourChange = form.getItemValue("CoreHourChange");
event.ChangeType = form.getItemValue("ChangeType");
console.log(form.getItemValue("StartDate"));
switch(event.ChangeType) {
case "arrival":
if (form.getItemValue("ArriveTimeAMPM") == "pm") { event.start_date.setHours(parseInt(form.getItemValue("ArriveTimeHours")) + 12); }
else { event.start_date.setHours(form.getItemValue("ArriveTimeHours")); }
event.start_date.setMinutes(form.getItemValue("ArriveTimeMinutes"));
event.end_date = event.start_date; // set end date same as start date, since it's mostly irrelevant
event.text = initials + " - Arrive " + event.start_date.toLocaleTimeString();
break;
case "leaving":
if (form.getItemValue("LeaveTimeAMPM") == "pm") { event.start_date.setHours(parseInt(form.getItemValue("LeaveTimeHours")) + 12); }
else { event.start_date.setHours(form.getItemValue("LeaveTimeHours")); }
event.start_date.setMinutes(form.getItemValue("LeaveTimeMinutes"));
event.end_date = event.start_date; // set end date same as start date, since it's mostly irrelevant
event.text = initials + " - Leaive " + event.start_date.toLocaleTimeString();
break;
case "outin":
if (form.getItemValue("LeaveTimeAMPM") == "pm") { event.start_date.setHours(parseInt(form.getItemValue("LeaveTimeHours")) + 12); }
else { event.start_date.setHours(form.getItemValue("LeaveTimeHours")); }
event.start_date.setMinutes(form.getItemValue("LeaveTimeMinutes"));
if (form.getItemValue("ArriveTimeAMPM") == "pm") { event.end_date.setHours(parseInt(form.getItemValue("ArriveTimeHours")) + 12); }
else { event.end_date.setHours(form.getItemValue("ArriveTimeHours")); }
event.end_date.setMinutes(form.getItemValue("ArriveTimeMinutes"));
event.text = initials + " - Out " + event.start_date.toLocaleTimeString() + "-" + event.end_date.toLocaleTimeString();
break;
}
break;
}
//console.log(ev); // For troubleshooting
scheduler.updateEvent(event.id);
}[/code]
Obviously there are other functions that populate the form data from the database, but as those seem to be working fine, I didn’t include them. Can you see any reason why the DataProcessor wouldn’t even attempt to update the database?