FullCalendar eventDrop not saving changes [solved]

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Hey, Im new to Jquery and Ajax and Im trying to implement eventDrop callback with no success.

After event dragging and dropping, fullcalendar doesn’t save changes.
Here’s the code

<?= yii2fullcalendar\yii2fullcalendar::widget([
            'events' => $events,
            'id' => 'calendar',
            'options' => [
                      'lang' => 'es',
                    ],
            'clientOptions' => [
                    'selectable' => false,
                    'editable' => true,
                    'droppable' => true,
                    'header' => [
                        'left' => 'prev,next,today',
                        'center' => 'title',
                        'right' => 'month,agendaWeek,agendaDay,listDay',
                        ],
                'minTime' => '08:00',
                'maxTime' => '21:00',
                'height' => 'auto',
                'eventColor' => function($events){
                    foreach ($events as $ev){
                        $color = $ev->color;
                    }
                    return $color;
                },
                'eventClick' => new JsExpression($JsEventClick),
                'eventDrop' => new JsExpression($JsEventDrop),
                    ],
                        
            ]);
        ?>

<?php
            $JsEventDrop = 'function(event) {
                    $("#calendario-id").val(event.id);
                    $("#calendario-titulo").val(event.title);
                    $("#calendario-fecha_inicio").val(event.start);
                    $("#calendario-fecha_termino").val(event.end);
                    $("#calendario-color").val(event.color);
                    var event_data = {
                        id: $("#calendario-id").val(),
                        title: $("#calendario-titulo").val(),
                        descripcion: $("#calendario-descripcion").val(),
                        start: $("#calendario-fecha_inicio").val(),
                        end: $("#calendario-fecha_termino").val(),
                        color: $"#calendario-color").val(),
                    };
                    $.ajax({
                        type: "POST",
                        url: "index.php?r=calendario/update&id=" + event.id,
                        data: event_data,
                    });
                }'
        ?>

Any help would be appreciated

[samdark (Alexander Makarov)]

Is data submitted? Do you get a request? What is the response?

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I get following error:
“Uncaught SyntaxError: Unexpected string”
And calendar doesn’t display.
I’m not getting any request or response.

[samdark (Alexander Makarov)]

“Uncaught SyntaxError: Unexpected string” means there’s something wrong with PHP syntax. Each error points to a file and line and I think your case should not be different so open that file and fix syntax.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

yes, it points to calendario/index.php:181 but there is no line 181

[samdark (Alexander Makarov)]

Then what’s erroring is not that index.php but another one.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

The error was in this line

color: $"#calendario-color").val(),

Now the calendar is displayed but when I drop the event it doesn’t update.

[samdark (Alexander Makarov)]

Then we’re back to initial questions.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I’ve changed code to this

$JsEventDrop = 'function(event) {
                    var event_data = {
                        id: event.id,
                        title: event.title,
                        descripcion: event.descripcion,
                        start: $.fullCalendar.formatDate(event.start, "yyyy-MM-dd"),
                        end: $.fullCalendar.formatDate(event.end, "yyyy-MM-dd"),
                       
                    };
                    console.log(event_data.start, event_data.end);
                    $.ajax({
                        type: "POST",
                        url: "index.php?r=calendario/update&id=" + event.id,
                        data: event_data,
                        success: function(json) {
                            //alert("Updated Successfully");
                        }
                    });
                }'

and Im getting request and response:
jquery.js:9600 XHR finished loading: GET “http://localhost:8080/sie/web/index.php?r=calendario%2Findex”.
send @ jquery.js:9600
ajax @ jquery.js:9206
jQuery.(anonymous function) @ jquery.js:9355
(anonymous) @ createEvent.js:11
mightThrow @ jquery.js:3534
process @ jquery.js:3602
setTimeout (async)
(anonymous) @ jquery.js:3640
fire @ jquery.js:3268
fireWith @ jquery.js:3398
fire @ jquery.js:3406
fire @ jquery.js:3268
fireWith @ jquery.js:3398
ready @ jquery.js:3878
completed @ jquery.js:3888
index.php?r=calendario%2Findex:178
yyyy-03-sá yyyy-03-sá
jquery.js:9600 XHR finished loading: POST “http://localhost:8080/sie/web/index.php?r=calendario/update&id=23”.

[samdark (Alexander Makarov)]

OK. It seems it submits something to what looks correct address. Now check “Network” tab of browser’s debugger and see request/response details: if correct data was submitted and what was in response.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I believe you mean this:

General

1. Request URL:
   http://localhost:8080/sie/web/index.php?r=calendario/update&id=23
2. Request Method:
   POST
3. Status Code:
   200 OK
4. Remote Address:
   [::1]:8080
5. Referrer Policy:
   no-referrer-when-downgrade

Response Headers view source

1. Cache-Control:
   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
2. Connection:
   Keep-Alive
3. Content-Type:
   text/html; charset=UTF-8
4. Date:
   Thu, 04 Apr 2019 14:25:26 GMT
5. Expires:
   Thu, 19 Nov 1981 08:52:00 GMT
6. Keep-Alive:
   timeout=5, max=100
7. Pragma:
   no-cache
8. Server:
   Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3
9. Set-Cookie:
   _identity=9d138a60d60cde1f2c9200a10e5cf075ff7c179dbb553c0df80d53f25cf40888a%3A2%3A%7Bi%3A0%3Bs%3A9%3A%22_identity%22%3Bi%3A1%3Bs%3A216%3A%22%5B136%2C%22f8d7963fa3d032aaefd4cd6f7791f23af9b19fe64f114e21277dfdc54b8136706809e6fc5ab0b916cd647b8a7ddfd71335ae9b7fb3bd8169b1c856bc0c8bd71551b2be407a28b819137ba03cfa953465ea132f709ee24c28d49c481b460df023d1e30e1d%22%2C2592000%5D%22%3B%7D; expires=Sat, 04-May-2019 14:25:26 GMT; Max-Age=2592000; path=/; httponly
10. Transfer-Encoding:
    chunked
11. X-Powered-By:
    PHP/5.6.3

Request Headers view source

1. Accept:
   3./*
2. Accept-Encoding:
   gzip, deflate, br
3. Accept-Language:
   es-ES,es;q=0.9,en;q=0.8
4. Connection:
   keep-alive
5. Content-Length:
   85
6. Content-Type:
   application/x-www-form-urlencoded; charset=UTF-8
7. Cookie:
   PHPSESSID=k47cls8rv7u0gb088pfn6oofa0; _identity=9d138a60d60cde1f2c9200a10e5cf075ff7c179dbb553c0df80d53f25cf40888a%3A2%3A%7Bi%3A0%3Bs%3A9%3A%22_identity%22%3Bi%3A1%3Bs%3A216%3A%22%5B136%2C%22f8d7963fa3d032aaefd4cd6f7791f23af9b19fe64f114e21277dfdc54b8136706809e6fc5ab0b916cd647b8a7ddfd71335ae9b7fb3bd8169b1c856bc0c8bd71551b2be407a28b819137ba03cfa953465ea132f709ee24c28d49c481b460df023d1e30e1d%22%2C2592000%5D%22%3B%7D; _csrf=849cfce2047c6cf71ef21148ab12b2a2977a08a87196c9547b91b6deb413a46da%3A2%3A%7Bi%3A0%3Bs%3A5%3A%22_csrf%22%3Bi%3A1%3Bs%3A32%3A%22sxOlCWM_9IMqnN-QwylqGWL3gABdyPLz%22%3B%7D
8. Host:
   localhost:8080
9. Origin:
   http://localhost:8080
10. Referer:
    http://localhost:8080/sie/web/index.php?r=calendario%2Findex
11. User-Agent:
    Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
12. X-CSRF-Token:
    2utsULWo14K7wYt45YDg1ZLL7tXkFlEM4PVNHURxlqCpkyM89v-a3YKIxgmLzs2E5bKCpKNBHT-HtA95PSHa2g==
13. X-Requested-With:
    XMLHttpRequest

Query String Parameters view source view URL encoded

1. r:
   calendario/update
2. id:
   23
3. Form Dataview sourceview URL encoded
4. id:
   23
5. titulo:
   Reunion con proveedores
6. fecha_inicio:
   2019-03-01
7. fecha_termino:
   2019-03-01

[samdark (Alexander Makarov)]

Looks correct. It submits POST to http://localhost:8080/sie/web/index.php?r=calendario/update&id=23 and the response is 200 so if you still have a problem then you aren’t handling form data in http://localhost:8080/sie/web/index.php?r=calendario/update&id=23.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I solved this thanks to you @samdark
I wasn’t receiving the parameters in the controller so I changed it to

CalendarioController

public function actionUpdate($id, $titulo, $fecha_inicio, $fecha_termino)
    {
        
        $model = $this->findModel($id);
        $model->titulo = $titulo;
        $model->fecha_inicio = $fecha_inicio;
        $model->fecha_termino = $fecha_termino;
        $model->save();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->render('update', [
            'model' => $model,
        ]);
    }

and the button in the view

<?= Html::a('Actualizar', ['update', 
            'id' => $model->id, 
            'titulo' => $model->titulo,
            'fecha_inicio' => $model->fecha_inicio,
            'fecha_termino' => $model->fecha_termino,
                ], ['class' => 'btn btn-primary']) ?>

and JsExpression

$JsEventDrop = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        titulo: event.title,
                        fecha_inicio: $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"),
                        fecha_termino: $.fullCalendar.formatDate(event.end, "YYYY-MM-DD"),
                    };
                    if (!confirm("¿Está seguro que desea modificar la fecha de inicio?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update&id=" + event_data.id + 
                            "&titulo=" + event_data.titulo + "&fecha_inicio=" + event_data.fecha_inicio
                            + "&fecha_termino=" + event_data.fecha_termino,
                            data: event_data,
                            success: function(json) {
                                alert("Fecha modificada correctamente");
                            }
                        });
                    }
                }'

I really thank you my friend, you always help me.