Gridstack resize error

[JanRuneHenriksen]

Subject of the issue

Gridstack resize error

Your environment

• 0.2.6
• Chrome

Steps to reproduce

Resizing browser with Chrome Toggle Device Toolbar from no resize to mobile (iphone) size

Expected behaviour

No errors should appear in console

Actual behaviour

Error appears in console:
jquery-3.2.1.js:273 Uncaught Error: cannot call methods on draggable prior to initialization; attempted to call method 'disable'
at Function.error (jquery-3.2.1.js:273)
at HTMLDivElement. (jquery-ui-1.10.2.custom.js:487)
at Function.each (jquery-3.2.1.js:362)
at jQuery.fn.init.each (jquery-3.2.1.js:157)
...

	error	@	jquery-3.2.1.js:273
	(anonymous)	@	jquery-ui-1.10.2.custom.js:487
	each	@	jquery-3.2.1.js:362
	each	@	jquery-3.2.1.js:157
	$.fn.(anonymous function)	@	jquery-ui-1.10.2.custom.js:483
	(anonymous)	@	gridstack.js:649
	arrayEach	@	lodash.js:537
	forEach	@	lodash.js:9359
	GridStack.onResizeHandler	@	gridstack.js:642
	dispatch	@	jquery-3.2.1.js:5206
	elemData.handle	@	jquery-3.2.1.js:5014

[radiolips]

Hey @JanRuneHenriksen . Could you provide a fiddle, or some more information, to help me work through this with you? I haven't seen this error before, but what you've pasted here isn't enough for me to get it tracked down. Are you able to make it happen with any of the gridstack demo pages?

[radiolips]

Closing due to inactivity. Please reopen with a response to the comment if you're still having issue.

[manueltimita]

Closing due to inactivity. Please reopen with a response to the comment if you're still having issue.

It is actually quite an insidious little bug. It occurs when one loads the jQueryUI libs (including gridstack.jQueryUI.js) but then instantiates GridStack with the options:

{
    staticGrid: true,
    disableDrag: true,
    disableResize: true
 }

If GridStack's method destroy() is called at a later stage, the error is caused inside JQueryUIGridStackDragDropPlugin.prototype.draggable because the draggable plugin has actually not been initialised, yet we are now trying to disable draggable on the element.

This situation is actually likely to happen in a single page app, where jQueryUI is enable on a route (e.g. where the admin builds a dashboard), and a static version of GridStack is on a different route (e.g. a preview of the grid being built). When navigating between these routes, the error is being thrown all the time if we call destroy on the GS instance.

Not a huge issue, and we fixed it by checking if el.data('ui-draggable') === true in JQueryUIGridStackDragDropPlugin.prototype.draggable. I thought of leaving this comment here in case it helps fixing the issue in the future.

I am not entirely sure that the fix above solves the problem without introducing any regression, hence not contributing it as a pull request.

[adumesny]

thank you @manueltimita I now have a much more robust fix in 2.0.3 and support for truly static grids (no JQ drag&drop initialization until needed) and @leontb99 for reminding me of this...