Opened 9 years ago

Last modified 6 years ago

#10667 open bug

Draggable: $.ui.ddmanager.current not released on draggable _destroy

Reported by: eshcharc Owned by:
Priority: minor Milestone: none
Component: ui.draggable Version: 1.11.1
Keywords: Cc:
Blocked by: Blocking:

Description

In the days of client side frameworks and SPAs, considerations need to be made regarding client side page switch and optimizations and cleaning of assets.

When we examined and profiled our SPA on a page switch scenario, we've noticed that a jQuery-UI plugin is holding a whole element tree. A further examination led us to a draggable and the "global" $.ui.ddmanager.current.

It seems that when a draggable is being destryed via _destroy, $.ui.ddmanager.current which is linked to this draggable, is not taken care of and keep a reference to the draggable and all of its tree elements. When a client side framework is involved, that makes it worse.

That can quite easily be treated.

Change History (4)

comment:1 Changed 8 years ago by Scott González

Component: ui.coreui.draggable

comment:2 Changed 8 years ago by tj.vantoll

Status: newopen
Summary: $.ui.ddmanager.current not released on draggable _destroyDraggable: $.ui.ddmanager.current not released on draggable _destroy

comment:3 Changed 8 years ago by merildev

Same problem here.

I use Backbone for my SPA, when the view which contains the draggable element is closed, the DOM tree should be deleted. However, I can see a leak and my view appears as a detached DOM tree with some references in the JS code (jQuery UI).

Quick and dirty solution: If I do a 'delete $.ui.ddmanager.current;' when the view is closed, the reference is removed and the garbage collector is able to delete the DOM nodes.

Last edited 8 years ago by merildev (previous) (diff)

comment:4 Changed 6 years ago by Eli Flanagan

I have observed this in an ember.js application (v2.12.2). The feature in question was too complex to easily reproduce in ember-twiddle. The workaround mentioned by merildev did not work for us. Instead I had to add following function and invoke after the user initiated the state that caused the orphaned widget element:

function garbageCollectWidget() {
	try {
		const el = jQuery.ui.ddmanager.current.element;
		el.off();
		el.remove();
		delete jQuery.ui.ddmanager.current.element;
	} catch (err) { } //eslint-disable-line no-empty
}

Note: See TracTickets for help on using tickets.