CRUD with php/mysql

[Peter StoevKeymaster]

Hi rittchy,

In your code you pointed out that your resourceId is “calendar”. Such does not exist in the Data source and you receive an error because of that wrong setting.

Here is the modified example where the resourceId is set to something which exists in the data source:

$(document).ready(function () {

    // prepare the data
    var source =
    {
        dataType: "json",
        dataFields: [
            { name: 'id', type: 'string' },
            { name: 'status', type: 'string' },
            { name: 'about', type: 'string' },
            { name: 'address', type: 'string' },
            { name: 'company', type: 'string'},
            { name: 'location', type: 'string' },
            { name: 'name', type: 'string' },
            { name: 'style', type: 'string' },
            { name: 'calendar', type: 'string' },
            //{ name: 'start', type: 'date', format: "yyyy-MM-dd HH:mm" },
            //{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" }
            { name: 'start', type: 'date' },
            { name: 'end', type: 'date' }
        ],
        id: 'id',
        url: 'https://www.jqwidgets.com/jquery-widgets-demo/demos/sampledata/appointments.txt'
    };
    var adapter = new $.jqx.dataAdapter(source);
    $("#scheduler").on('bindingComplete', function (event) {
        var args = event.args;
        console.log("bindingComplete is raised");
    });
 //   adapter.dataBind();
 source.async = false;
var resourceAdapter = new $.jqx.dataAdapter(source);
resourceAdapter.dataBind();
    $("#scheduler").jqxScheduler({
        date: new $.jqx.date(2015, 11, 23),
        width: '100%',
        height: 700,
        source: adapter,
        showLegend: true,
        ready: function () {
            //$("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
        },
        resources:
        {
            colorScheme: "scheme05",
            dataField: "status",
            orientation: "horizontal",
            resourceColumnWidth: "auto",
            source: resourceAdapter.records
        },
        appointmentDataFields:
        {
            from: "start",
            to: "end",
            id: "id",
            description: "about",
            location: "address",
            subject: "name",
            style: "style",
            status: "status",
            resourceId: "status"
        },
        view: 'weekView',
        views:
        [
            'dayView',
            'weekView',
            'monthView'
        ]
    });
            $("#scheduler").on('appointmentDelete', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                console.log("appointmentDelete is raised");
            });

            $("#scheduler").on('appointmentAdd', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                console.log("appointmentAdd is raised");
            });

            $("#scheduler").on('appointmentDoubleClick', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                // appointment fields
                // originalData - the bound data.
                // from - jqxDate object which returns when appointment starts.
                // to - jqxDate objet which returns when appointment ends.
                // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                // resourceId - String which returns the appointment's resouzeId
                // hidden - Boolean which returns whether the appointment is visible.
                // allDay - Boolean which returns whether the appointment is allDay Appointment.
                // resiable - Boolean which returns whether the appointment is resiable Appointment.
                // draggable - Boolean which returns whether the appointment is resiable Appointment.
                // id - String or Number which returns the appointment's ID.
                // subject - String which returns the appointment's subject.
                // location - String which returns the appointment's location.
                // description - String which returns the appointment's description.
                // tooltip - String which returns the appointment's tooltip.

                $("#log").html("appointmentDoubleClick is raised");
            });

            $("#scheduler").on('cellClick', function (event) {
                var args = event.args;
                var cell = args.cell;
               
                console.log("cellClick is raised");
            });

            $("#scheduler").on('cellDoubleClick', function (event) {
                var args = event.args;
                var cell = args.cell;
               
                console.log("cellDoubleClick is raised");
            });
            
            $("#scheduler").on('contextMenuOpen', function (event) {
                var args = event.args;
                var menu = args.menu;
                var appointment = args.appointment;
               
                console.log("contextMenuOpen is raised");
            });
            
            $("#scheduler").on('contextMenuClose', function (event) {
                var args = event.args;
                var menu = args.menu;
                var appointment = args.appointment;
               
                console.log("contextMenuClose is raised");
            });
            
            $("#scheduler").on('contextMenuItemClick', function (event) {
                var args = event.args;
                var menu = args.menu;
                var appointment = args.appointment;
                var item = args.item;
               
                console.log("contextMenuItemClick is raised");
            });
            
            $("#scheduler").on('contextMenuCreate', function (event) {
                var args = event.args;
                var menu = args.menu;
                var appointment = args.appointment;
                var item = args.item;
               
                console.log("contextMenuCreate is raised");
            });
            
            $("#scheduler").on('editRecurrenceDialogOpen', function (event) {
                var args = event.args;
                var dialog = args.dialog;
                var appointment = args.appointment;
               
                console.log("editRecurrenceDialogOpen is raised");
            });
            
            $("#scheduler").on('editRecurrenceDialogClose', function (event) {
                var args = event.args;
                var dialog = args.dialog;
                var appointment = args.appointment;
               
                console.log("editRecurrenceDialogClose is raised");
            });
            
           $("#scheduler").on('editDialogCreate', function (event) {
                var args = event.args;
                var dialog = args.dialog;
                var appointment = args.appointment;
                var fields = args.fields;
                
                console.log("editDialogCreate is raised");
            });
            
            $("#scheduler").on('editDialogOpen', function (event) {
                var args = event.args;
                var dialog = args.dialog;
                var appointment = args.appointment;
                var fields = args.fields;
                
                console.log("editDialogOpen is raised");
            });
            
           $("#scheduler").on('editDialogClose', function (event) {
                var args = event.args;
                var dialog = args.dialog;
                var appointment = args.appointment;
                var fields = args.fields;
                
                console.log("editDialogClose is raised");
            });
            
            
            $("#scheduler").on('appointmentChange', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                // appointment fields
                // originalData - the bound data.
                // from - jqxDate object which returns when appointment starts.
                // to - jqxDate objet which returns when appointment ends.
                // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                // resourceId - String which returns the appointment's resouzeId
                // hidden - Boolean which returns whether the appointment is visible.
                // allDay - Boolean which returns whether the appointment is allDay Appointment.
                // resiable - Boolean which returns whether the appointment is resiable Appointment.
                // draggable - Boolean which returns whether the appointment is resiable Appointment.
                // id - String or Number which returns the appointment's ID.
                // subject - String which returns the appointment's subject.
                // location - String which returns the appointment's location.
                // description - String which returns the appointment's description.
                // tooltip - String which returns the appointment's tooltip.

                console.log("appointmentChange is raised");
            });    
            
                $("#scheduler").on('appointmentClick', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                // appointment fields
                // originalData - the bound data.
                // from - jqxDate object which returns when appointment starts.
                // to - jqxDate objet which returns when appointment ends.
                // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                // resourceId - String which returns the appointment's resouzeId
                // hidden - Boolean which returns whether the appointment is visible.
                // allDay - Boolean which returns whether the appointment is allDay Appointment.
                // resiable - Boolean which returns whether the appointment is resiable Appointment.
                // draggable - Boolean which returns whether the appointment is resiable Appointment.
                // id - String or Number which returns the appointment's ID.
                // subject - String which returns the appointment's subject.
                // location - String which returns the appointment's location.
                // description - String which returns the appointment's description.
                // tooltip - String which returns the appointment's tooltip.

                console.log("appointmentClick is raised");
            });    
            
                $("#scheduler").on('appointmentDoubleClick', function (event) {
                var args = event.args;
                var appointment = args.appointment;
                // appointment fields
                // originalData - the bound data.
                // from - jqxDate object which returns when appointment starts.
                // to - jqxDate objet which returns when appointment ends.
                // status - String which returns the appointment's status("busy", "tentative", "outOfOffice", "free", "").
                // resourceId - String which returns the appointment's resouzeId
                // hidden - Boolean which returns whether the appointment is visible.
                // allDay - Boolean which returns whether the appointment is allDay Appointment.
                // resiable - Boolean which returns whether the appointment is resiable Appointment.
                // draggable - Boolean which returns whether the appointment is resiable Appointment.
                // id - String or Number which returns the appointment's ID.
                // subject - String which returns the appointment's subject.
                // location - String which returns the appointment's location.
                // description - String which returns the appointment's description.
                // tooltip - String which returns the appointment's tooltip.

                console.log("appointmentDoubleClick is raised");
            });    
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

Thank you their functioning resources.

I have another question about resources:
I have a JSON file containing resources with 2 fields {env_id, env_label }
I have a JSON file containing the appointment with multiple fields including fields { env_id }
I would like to make a bind both sources because when agenda items the resources do not exist.
How this is possible and how to assign the bind on the label (env_label) and the data on the value(id_env) ??

Thank you

[ritttchyParticipant]

Here is the solution to change a dropdownlist in the dialog box:

editDialogCreate: function (dialog, fields, editAppointment) {
fields.repeat.hide();
fields.repeatContainer.hide();
fields.allDayContainer.hide();
fields.statusContainer.hide();
fields.timeZoneContainer.hide();
fields.colorContainer.hide();
fields.subjectLabel.html(“Title”);
fields.locationLabel.html(“Where”);
fields.fromLabel.html(“Start”);
fields.toLabel.html(“End”);
fields.resourceLabel.html(“Environnement”);

var dropDownList = “#”+fields.resource[0].id
$(dropDownList).jqxDropDownList({
source: mySchedulerRessourceAdapter, selectedIndex: 0, width: ‘100%’, height: ’25px’,
displayMember: ‘env_label’,
valueMember: ‘id_env’
});

// add custom print button.
printButton = $(“<button style=’margin-left: 5px; float:right;’>Print</button>”);
fields.buttons.append(printButton);
printButton.jqxButton({ theme: this.theme });
printButton.click(function () { });
},
editDialogOpen: function (dialog, fields, editAppointment) {

var dropDownList = “#”+fields.resource[0].id
$(dropDownList).jqxDropDownList({
source: mySchedulerRessourceAdapter, selectedIndex: 0, width: ‘100%’, height: ’25px’,
displayMember: ‘env_label’,
valueMember: ‘id_env’
});

if (!editAppointment && printButton) {
printButton.jqxButton({ disabled: true });
}
else if (editAppointment && printButton) {
printButton.jqxButton({ disabled: false });
}
},
editDialogClose: function (dialog, fields, editAppointment) { },
editDialogKeyDown: function (dialog, fields, editAppointment, event) { },

[ritttchyParticipant]

Hello,

Creating a RDV works but when opening the dialog box every appointment disappear.

Thank you

[Peter StoevKeymaster]

Hi ritttchy,

Sorry, I don’t know what RDV is and I can’t reproduce the explained behavior.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

Sorry a RDV is an appointement !

[Peter StoevKeymaster]

Hi ritttchy,

The method for adding an appointment called addAppointment works well. Example: https://www.jseditor.io/?key=jqxscheduler-addappointment. When you call the method and use it in the way shown in the documentation, you will get the desired results.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

I found the problem appointments disappear. This is fixed.

I have a new problem on the appointmentChange event. When I change the appointment, I have a message Uncaught TypeError: Can not read property ‘dateData’ of undefined
Object {from: “2015-10-21 3:00:00 p.m.,” to: “2015-10-21 4:30:00 p.m.” id “2430-27-16-19-16” subject: “rffrf “description:” “…}

Thx

[Peter StoevKeymaster]

Hi ritttchy,

Glad to know it! I would suggest you to provide more information in your posts if you would like someone to have a chance to help you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

OK,

I make an appointment with appointmentAdd event: OK
$ (“# scheduler”). it (‘appointmentAdd’, function (event) {
                console.log (‘appointmentAdd — —‘);
                var args = event.args;
                var = args.appointment appointment;
               Â
                appointment.from = new $ .jqx.date (appointment.from) .toString ();
                appointment.to = new $ .jqx.date (appointment.to) .toString ();
                var data = “insert = true &” + $ .param (appointment);
$ .ajax ({
                    dataType: ‘json’,
                    url: ‘{{url (‘ ritttchy_webmonitor_env_event_create ‘)}}’,
                    data: data,
                    the type: “POST”
                    success: function (response) {
                        //console.log(response)
                        // You Will get response from your php page (what you print or echo)

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log (textStatus, errorThrown);
                    }
                });
});

I want to change this appointment with the appointmentChange event: KO
After changing I have a message in console: Uncaught TypeError: Can not read property ‘dateData’ of undefined
and the appointment not change.
$ (“# scheduler”). it (‘appointmentAdd’, function (event) {
                console.log (‘appointmentAdd — —‘);
                var args = event.args;
                var = args.appointment appointment;
               Â
                appointment.from = new $ .jqx.date (appointment.from) .toString ();
                appointment.to = new $ .jqx.date (appointment.to) .toString ();
                var data = “insert = true &” + $ .param (appointment);

                $ .ajax ({
                    dataType: ‘json’,
                    url: ‘{{url (‘ ritttchy_webmonitor_env_event_create ‘)}}’,
                    data: data,
                    the type: “POST”
                    success: function (response) {
                        //console.log(response)
                        // You Will get response from your php page (what you print or echo)

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log (textStatus, errorThrown);
                    }
                });
            });
          Â
           Â
            $ (‘# scheduler’). one (‘appointmentChange’, function (event) {
                console.log (‘appointmentChange — —‘);
                var args = event.args;
                var = args.appointment appointment;
                var id = appointment.id
                console.log (‘- departure -‘)
                console.log (appointment)
                

                from $ var = new .jqx.date ($ (‘# scheduler’) jqxScheduler (‘getAppointmentProperty’ appointment.id ‘from’)). toString ().
                to $ var = new .jqx.date ($ (‘# scheduler’) jqxScheduler (‘getAppointmentProperty’ appointment.id, ‘to’)). toString ().
                resourceId var = $ (‘# scheduler’) jqxScheduler (‘getAppointmentProperty’ appointment.id ‘resourceId.’);
                var subject = $ (‘# scheduler’) jqxScheduler (‘getAppointmentProperty’ appointment.id, ‘subject.’);
                var description = $ (‘# scheduler’) jqxScheduler (‘getAppointmentProperty’ appointment.id, ‘description’).
                console.log (‘from:’ + from + ‘/ to’ + to + ‘/ env_id:’ + resourceId)
               Â
       Â
                appointment.from = from;
                appointment.to = to;
                appointment.resourceId = resourceId;
                // var data = “update = true &” + $ .param (appointment);
                var data = appointment;
               Â
                console.log (‘- end -‘)
                console.log (appointment)
                //data.start = new $ .jqx.date (data.start) .toString ();
                //data.end = new $ .jqx.date (data.end) .toString ();
                // var data = “update = true &” + $ .param (data);
                //console.log(data);
                var url = {{path (“ritttchy_webmonitor_env_event_update ‘, {‘ id ‘:’ id ‘})}}’;
                url = url.replace (“id”, id);
                $ .ajax ({
                    dataType: ‘json’,
                    url: url,
                    data: data,
                    Type: “PUT”
                    success: function (response) {
                        //console.log(response)
                        // You Will get response from your php page (what you print or echo)

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log (textStatus, errorThrown);
                    }
                });
            });

[Peter StoevKeymaster]

Hi ritttchy,

You cannot change appointment properties using Syntax like: appointment.from = “…..”. var = args.appointment appointment; is another example of incorrect syntax.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

So what is the solution please ???

[Peter StoevKeymaster]

Hi ritttchy,

As I wrote: You cannot set appointment.from = …… If you want to send data to your server, then create a {} object and fill it with the properties you wish to send in the format you wish to receive them in the server code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[ritttchyParticipant]

Thx i change my variable data=…. by
var data = “insert=true&start=”+from+”&end=”+to+”&env_id=”+resourceId+”&subject=”+subject+”&description=”+description;

Now it works fine. I test all the components
Once development is complete, I’ll post my code for future encoders.
Your framework is really very good, I uilise lot of your tools in a future-oriented software saas.

[Author]

Posts