fullcalendar.js: Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

Question

I've implemented a scheduler on customer's ASP.NET WebForms site using fullcalendar.js and scheduler.js plugin. It's working like a charm on my local machine but when I deploy it to the other one - either customer's or mine - it throwing a generic "Cannot read property 'ownerDocument' of undefined" error.

Here's a stack trace:

getScrollParent (fullcalendar.js:302)
queryBoundingRect (fullcalendar.js:2419)
build (fullcalendar.js:2236)
d.internalApiVersion.r.prepareHits (scheduler.min.js:8)
computeCoords (fullcalendar.js:3066)
handleInteractionStart (fullcalendar.js:3025)
startInteraction (fullcalendar.js:2520)
dayMousedown (fullcalendar.js:3656)
(anonymous function) (fullcalendar.js:3597)
dispatch (jquery.min.js:3)
q.handle (jquery.min.js:3)

Here's the line throwing a error:

return position === 'fixed' || !scrollParent.length ? $(el[0].ownerDocument || document) : scrollParent;

The things I've done so far:

1. Check the files on both systems - all the files are exactly the same.
2. Update fullcalendar to version 3 (by replacing the 2.9.1 files with new ones)
3. Run it on the IISExpress and IIS
4. Use non-minified version of the fullcalendar.

The result is the error above.

here's the event I'm trying to handle:

            select: function(start, end, jsEvent, view, resource) {

            $.ajax({
                url: '/WebServices/WineLocationTaskService.asmx/GetUsersByWineLocation',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                datatype: 'json',
                data: JSON.stringify({
                    locationID: '<%= App.Context.Data.Location.ParentLocation %>'
                }),

                success: function(data) {

                    var json = $.parseJSON(data.d);
                    var users = [];
                    $.each(json, function(i, field) {

                        //var option = $('<option value="' + field.id + '">' + field.name + '</option>');
                        //$('#users').append(option);
                        users.push({
                            id: field.id,
                            text: field.name
                        });
                    });

                    $('#users').select2({ data: users, multiple: true, width: "100%" });
                },
                error: function() {
                    alert('there was an error while fetching events!');
                }
            });
            $("#startDate").text(start.format());
            $("#endDate").text(end.format());
            $("#resourceID").val(resource.id);

            $("#dialog2").dialog('open');
        },

On the back-end I call the ASMX service with the result of code 200 - I can see the response data as valid json.

Can this be a result of possible different IIS modules-handlers settings? I'm using exactly the same web.confing on both working and not working sites.

Answer 1

body .fc {
  overflow:auto;
}

add this Found on github