Fullcalendar Event drop and ajax

Question

I'm currently working with the great Jquery plugin - Fullcalendar but I'm encountering a problem. I use the eventDrop listener and I want to send the event information using Ajax to my server side.

My code is the following :

eventDrop: function (event, dayDelta) {

                $.ajax({
                    url: ("/PSAdmin/RFCalendar/DragEvent"),
                    data: ({
                        type: event.className,
                        delta: dayDelta,
                        newDate: event.start,
                        newTitle: event.title
                    }),
                    type: "POST",
                    success: function (data) {
                        $('#calendar').empty();
                        loadCalendar();
                    },
                    error: function (xhr, status, error) {
                        alert("fail");
                    }
                });
}

My problem is that as soon as I try to send any variable contained into the event object, it doesn't work. For example sending only dayDelta to the server side works, but none of the event.something does.

If anyone stumbled on this problem before or if you have any idea what could cause the problem, please let me know.

Answer 1

Late answer but I hade a similiar problem with nothing getting sent to the server. Tried everything, caching aswell as using jquery to extend and copy the object.

What worked for me was looking at the headers, for the request. They always seemed to have the data.

I ended up with this code serverside. Not what I want but it could probably help somebody trying to tackle the same problem!

C#

[HttpGet]
    public void UpdateOrderData(object orderObj)
    {
        var obj = new
        {
            start = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[start]"]),
            end = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[end]"]),
            date = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[date]"]),
            resourceId = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[resourceId]"]),
            orderId = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[orderId]"]),
        };

        calendarUnitOfWork.CustomDataRepository.UpdateOrderData(obj);
    }

Javascript

 myModel.eventDrop = function(event, delta, revertFunc, jsEvent, ui, view ) 
 {
     calUOW.orderrepository.updateOrderData({
            start: event.start.format(),
            end: event.end.format(),
            date: event.start.format("YYYY-MM-DD"),
            resourceId: event.resourceId,
            orderId: event.orderId
        });
  }

Answer 2

So unfortunately, I couldn't figure out why the ajax query wasn't working properly and I had to do what i didn't want to do originally.

if (event.className == "holiday") {
                    var className = "holiday";
                }

                //build date
                var date = event.start.getMonth()+1 + "/" + event.start.getDate() + "/" + event.start.getFullYear();
                alert(date);

                $.ajax({
                    url: ("/PSAdmin/RFCalendar/DragEvent/"),
                    data: ({
                        className: className,
                        delta: dayDelta,
                        newDate: date,
                        newTitle: event.title
                    }),
                    type: "POST",
                    success: function (data) {
                        $('#calendar').empty();
                        loadCalendar();
                    },
                    error: function (xhr, status, error) {
                        alert("fail");
                    }
                });

It's ugly and time consuming but at least it works. I have other priorities to work on but if you have any clue about this problem, please let me know.

Thanks, Greg