editDialogOpen – fill input fields

[EricKParticipant]

Hello to all.
Using the following code. Would this be the correct way to fill in fields on the dialog window.

editDialogOpen: function (dialog, fields, editAppointment) {
                    
                    setTimeout( function(){
                        if(typeof _selrow=='object'){
                        fields.subject.val(_selrow.companyname);
                        fields.location.val(_selrow.loc_number);
                        fields.description.val(_selrow.statusname);
                        }
                    });
                    
                },

When I use this method, it does fill in the input fields and saves the appointment.
But it gives me an error when I move the mouse over the new appointment.

jqxscheduler.js:7 Uncaught TypeError: Cannot read property ‘jqxAppointment’ of undefined

If I perform a normal add appointment and manually fill in the fields. It works correctly.

Any suggestions would be greatly appreciated.

Eric

[EricKParticipant]

The problem is in another area of code.
The scheduler data is from a php mysql. In the process of updating the data to the database the following causes the error.
set the appointment ID

$(“#scheduler”).on(‘appointmentAdd’, function (event) {
var args = event.args;
var appointment = args.appointment;
…..
$.ajax({
…..
success: function (data, status, xhr) {
$(‘#scheduler’).jqxScheduler(‘setAppointmentProperty’, appointment.id, ‘id’, ‘d’+data[0].activityid);
)

});
});

Can I set the appointment id this way? If I do not set the id and let the scheduler set it then it works correctly.
I need to be able to set the id.

Eric

[HristoParticipant]

Hello EricK,

Appropriate way is to use inner methods.
* case (add new appointment)
If you would like to add new appointment could use addAppointment method of the Scheduler.
This method has one parameter that is object and inner you could set desirable “id”.

* case (edit appointment)
Could use beforeLoadComplete: function (records) { // Change id } callback in the DataAdapter.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[EricKParticipant]

Thank you Hriso for the response.
I tried the *case(add new appointment) method.

$(‘#scheduler’).jqxScheduler(‘setAppointmentProperty’, appointment.id, ‘id’, new key value);

I have added a sample to the js editor. Please add a new appointment and move your mouse over the new appointment.

https://www.jseditor.io/?key=jqxscheduler-change-appointment-id

[HristoParticipant]

Hello EricK,

Please Save again your example but before this check Everyone (turned on) from menu item Share.
(because now this example is unavailable)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[EricKParticipant]

The sample is now shared with everyone.

Eric King

[EricKParticipant]

Please check source if this line actually works?
If it does please give me an example.

$(‘#scheduler’).jqxScheduler(‘setAppointmentProperty’, appointment.id, ‘id’, new key value);

Do you have another way of setting the appointment id? Other than changing the jqxdataadapter.

Any help would be appreciated.
Thanks,
Eric

[HristoParticipant]

Hello EricK,

There is not another appropriate way to change the ID. Could you explain what you want to achieve to give you some suggestion.
Also from conceptual view it is not correct to change the id of an item that exist.
Please, take a look this example:
https://www.jseditor.io/?key=jqxscheduler-edit-change-appointment-id

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[wzjackParticipant]

Hi Hristo,

I am experiencing the same problem. Based on your previous example. https://www.jseditor.io/?key=jqxscheduler-edit-change-appointment-id

It works fine after changing the appointment.id = ‘d9’; But when you drag the appointment to change the date or time range, it automatically change the id from ‘d9’ back to the original auto generated id EX: ‘2716-26-25-17-23’

Any thought?

Thanks

[wzjackParticipant]

FYI: Basically this is what I want to achieve.

allow user to add a new appointment by clicking the save button in the dialog, then do ajax call in the ‘appointmentAdd’ method and return a ID and assign it back to the appointment that just created, so it can be used for editing and deleting etc.

Since the method “appointmentAdd” is the only place it triggers when user click the save button, the ajax call has to be placed under this method, and no matter the call is failed or success, it creates the appointment anyway.

Any suggestion on where should I place my ajax call?

My thought of another solution is to use the method “addAppointment” with overwriting the save button when dialog open, then do the ajax call, if success then do the “addAppointment”.

Thoughts? suggestions?

Thanks you so much JQwidget team, keep up the good work.

[HristoParticipant]

Hello wzjack,

Thank you for this feedback.
There are and another options to bind the event – as cellClick, appointmentClick and more that you could find in our API Documentation.
Also I would like to suggest you one topic from our forum, that could be useful:
http://www.jqwidgets.com/community/topic/need-help-customizing-the-appointment-dialog/#post-82541
You could try to create some dropdownlist with possible appointments that could add.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[wzjackParticipant]

Hi

I found the solution by looking at the source code. The problem is that when you hover an appointment, it gets the element from appointmentsByKey from the scheduler obj.

The solution is the change the key to the new ID of that element. and it should work.

EX:

$(“#scheduler”).on(‘appointmentAdd’, function (event) {
var args = event.args;
var appointment = args.appointment;

var new_key = ‘d9’;
var old_key = appointment.id;

if (old_key !== new_key) {
Object.defineProperty(appointment.jqxAppointment.scheduler.appointmentsByKey, new_key,
Object.getOwnPropertyDescriptor(appointment.jqxAppointment.scheduler.appointmentsByKey, old_key));
delete appointment.jqxAppointment.scheduler.appointmentsByKey[old_key];
}

appointment.id = appointment.jqxAppointment.id = appointment.originalData.ID = ‘d9’;

console.log(“appointmentAdd is raised”);
});

Hope it helps.

[Author]

Posts