jqxMenu pollutes global DOM

[stephanParticipant]

Hi,

I found out about this accidentally: creating a jqxMenu pollutes the global DOM by creating gloabl DOM objects at the end of the “body”.

On the one hand this is of course not forbidden, but on the other hand it is rather bad practise and promotes a high probability of memory leaks in an application. My request to the jQWidgets team is: could you code jqxMenu without creating DOM objects outside the scope of the DOM object that gets converted into the jqxMenu ?

An attempt to explain why I consider it bad practice:
My own application creates jqxMenus dynamically, with dynamic content. I implicitly assumed that the DOM scope of a jqxMenu is limited to the DOM object that I convert into the jqxMenu, ie. the ‘div’ and anything underneath. Thus when creating new content I simply replace existing content in the DOM with new content by using jQuery “.html()” function. When debugging I found out that at the end of the “body” something like 20 jqxMenu leftovers had already accumulated because I was not aware of how jqxMenu appends global stuff to the “body”.

When researching the problem I found that there is a “.destroy()” function defined for jqxMenu. Yet having to call this is quite difficult. DOM content gets replace by defining new DOM content, often without knowing what is inside the DOM area that you are replacing. If such replacements requrie detailed knowledge about the peculiarities of the content that you are replacing it becomes a task that is very difficult or impossible to code.

In my particular case I am coding a library layer that creates dynamic content within DOM parent objects specified by an applicaton layer. Yet I do not have control over those parent objects. The application layer might decide to replace or remove those parent objects. If I have place jQWidgets object in there that poisened the global DOM the memory leak happens.

CONCLUSION:
There migth be (complex) ways to avoid the potential memory leaks caused by jqxMenu, but the simplest solution would be to not have jqxMenu poison the global DOM at all. To instead have jqxMenu create helper objects underneath the parent object that it gets created from.

Regards,
Stephan

[Peter StoevKeymaster]

Hi Stephan,

The “destroy” method removes the Menu, all event handlers and all HTML Elements created by the Menu.. It is easy enough to call this method – $(“#menu”).jqxMenu(‘destroy’). That is the way how the widget should work and how it will most probably work in the future, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[MickaGauMember]

Hello
i also use jqxmenu on datagrid displayed in a dialog box.
On the beforeclose event of the dialog, i do a destroy

$(".openDialogBtn, .openDialogLink").live("click", function (e) {
		//Below code will prevent default action from occuring when openDialog anchor is clicked
		e.preventDefault();
		//This is the actual implementation of the dailog
		$("<div></div>")
		//To the div created for dialog we will add class named dialog
		//this is done so that we can refer to the dialog later
		//we will see this in a short while why it is important
					.addClass("dialogMGA")
		//add attribute add id attribute
		//note id attribute is assigned the same value as data_dialog_id
		//attribute in openDialog anchor
					.attr("id", $(this).attr("data_dialog_id"))
		//below code appends this div to body
					.appendTo("body")
		//below code describes the attribute for the dialog
					.dialog({
						//below code assigns title to the dialog
						//here we use same title as data_dialog_title attribute
						//in openDialog anchor tag
						title: $(this).attr("data_dialog_title"),
						width: $(this).attr("data_dialog_Width"),
						height: $(this).attr("data_dialog_Height"),
						//this will append code to close the dialog
						//and also put close cross(x) in dialog
						//we press ESC key in keyboard will also close dialog
						close: function () {
							$(this).remove();
						},
						beforeClose: function( event, ui ) {
											$('.jqxGridMGADlg').jqxGrid('destroy');
											$('.ctxMenuDlgMGA').jqxMenu('destroy');},
						//below code defines that the dialog is modal dialog
						modal: $(this).attr("dialog_Modal")
					})
		//below code says take href from openDialog anchor
		//which is ActionURL and load it to the modal dialog
					.load($(this).attr("href"));
	});

I checked and the code is effectively called but i still have div with class => jqx-menu-wrapper
As you see i also use a jqxgrid with a column ddl type
$(‘.jqxGridMGADlg’).jqxGrid(‘destroy’);

After destroy, i still have

<div id="listBoxdropdownlisteditorjqxgridDTSaisirarret" style="overflow: hidden; background-color: transparent; border: medium none; position: absolute; display: none; width: 193px; height: 225px;">

Is there something i do wrong?

Thank you.

PS i use 3.0.2, firefox 23.0.1, aspnet mvc 4.0 vs2010

[Peter StoevKeymaster]

Hi MickaGau,

If there is something not destroyed after calling the Grid’s destroy we will check it and if we confirm it, we will add a work item. As far as I see, the element pointed in your post is from DropDownList.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[MickaGauMember]

Hi Peter,
you are right, I use a custom cell editor based on a ddl for the datagrid.
Find below the js to create grid and his contextual menu. Don’t know if it can help.

	$("#jqxgridDT").jqxGrid(
                {
                	width: 500,
                	source: dataAdapter,
                	editable: true,
                	theme: 'ui-sunny',
                	columnsresize: true,
                	editmode: 'click',
                	autoheight: true,
                	altrows: true,
                	columns: [
                      { text: '@Resource.Txt_DT_Entry', dataField: '@Resource.Txt_DT_Entry', displayfield: 'DTCID', align: 'center', width: 170, columntype: 'dropdownlist', cellclassname: cellclass,
                      	createeditor: function (row, value, editor) {
                      		editor.jqxDropDownList({ source: ddlDTContentAdapter, displayMember: 'DTCode', valueMember: 'DTCID', autoOpen: true });
                      	},
                      	// update the editor's value before saving it.
                      	cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                      		// return the old value, if the new value is empty.
                      		if (newvalue == "") return oldvalue;
                      	}
                      },
											{ text: '@Resource.txt_DurationMinutes', dataField: '@Resource.txt_DurationMinutes', columntype: 'numberinput', align: 'center', width: 75, cellclassname: cellclass,
												createeditor: function (row, cellvalue, editor) {
													editor.jqxNumberInput({ decimalDigits: 0, digits: 3, spinButtons: false });
												}
											},
                      { text: '@Resource.Txt_ProdMstr_STime', dataField: '@Resource.Txt_ProdMstr_STime', align: 'center', width: 70, cellclassname: cellclass,
                      	validation: function (cell, value) {
                      		if (getCookie("_culture") == "fr-FR")
                      			return /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
                      		else
                      			return /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);
                      	}
                      },
                      { text: '@Resource.Txt_ProdMstr_ETime', dataField: '@Resource.Txt_ProdMstr_ETime', align: 'center', width: 70, cellclassname: cellclass,
                      	validation: function (cell, value) {
                      		if (getCookie("_culture") == "fr-FR")
                      			return /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
                      		else
                      			return /^(0?[1-9]|1[012])(:[0-5]\d) [APap][mM]$/.test(value);
                      	}
                      }
                    ]
                });
		$("#addrowbutton, #deleterowbutton").jqxButton({ theme: 'ui-sunny' });
		$("#addrowbutton").on('click', function () {
			var commit = $("#jqxgridDT").jqxGrid('addrow', null, {});
		});
		$("#deleterowbutton").on('click', function () {
			var selectedrowindex = $("#jqxgridDT").jqxGrid('getselectedrowindex');
			var rowscount = $("#jqxgridDT").jqxGrid('getdatainformation').rowscount;
			if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
				var id = $("#jqxgridDT").jqxGrid('getrowid', selectedrowindex);
				var commit = $("#jqxgridDT").jqxGrid('deleterow', id);
			}
		});
		// create context menu
		var contextMenuDT = $("#GridContextMenuDT").jqxMenu({ width: 200, height: 60, autoOpenPopup: false, mode: 'popup', theme: 'ui-sunny' });
		$("#jqxgridDT").on('contextmenu', function () {
			return false;
		});
		// handle context menu clicks.
		$("#GridContextMenuDT").on('itemclick', function (event) {
			var args = event.args;
			var rowindex = $("#jqxgridDT").jqxGrid('getselectedrowindex');
			var rowvalue = $('#jqxgridDT').jqxGrid('getrowdata', rowindex);
			if ($.trim($(args).html()).indexOf("Dlg_DTAdd") >= 0)
				var commit = $("#jqxgridDT").jqxGrid('addrow', null, {});
			else if ($.trim($(args).html()).indexOf("Dlg_DTDelete") >= 0) {
				var rowid = $("#jqxgridDT").jqxGrid('getrowid', rowindex);
				$("#jqxgridDT").jqxGrid('deleterow', rowid);
			}
		});
		$("#jqxgridDT").on('rowclick', function (event) {
			if (event.args.rightclick) {
				$("#jqxgridDT").jqxGrid('selectrow', event.args.rowindex);
				var scrollTop = $(window).scrollTop();
				var scrollLeft = $(window).scrollLeft();
				contextMenuDT.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
				return false;
			}
		});

And below is the div which is appended at the body and not remoived once the destroy method is called

<div id="menuWrapperGridContextMenuDT" class="jqx-menu-wrapper" style="z-index:20000; border: none; background-color: transparent; padding: 0px; margin: 0px; position: absolute; top: 0; left: 0; display: block; visibility: visible;">

Let me know if you need more info
Thanks

Best regards
Mickael

[adronParticipant]

Hello guys. I confirm this bug !
it shows in sortable jqxgrid.

If in dataAdapter i have something like this:
var source ={localdata: data, datatype: “array”, …
$(“#jqxgrid”).jqxGrid({sortable: true, source: dataAdapter, …
and then if i do dataAdapter.dataBind(); i have many empty divs in html body:

each time when i do dataAdapter.dataBind() i have +1 empty div !

It seems that bug in jqxgrid.js and function initmenu. code this.gridmenu.jqxMenu(“destroy”); does not call jqxmenu.js function destroy.

As example you can open http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/sorting.htm?arctic
and then in js console do $(“#jqxgrid”).jqxGrid(“source”).dataBind();
Each time you run this command will add another empty div.

[Peter StoevKeymaster]

Hi adron,

To update the Grid’s data, please use the Grid’s API and especially the “updatebounddata”. To destroy the Grid, you should use its “destroy” method and removes all DOM elements used by the Grid and related HTML Elements. However, you are right, there is an issue with that demo when you dynamically re-bind the Grid without destroying it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[adronParticipant]

if i do $(“#jqxgrid”).jqxGrid(“updatebounddata”) instead of $(“#jqxgrid”).jqxGrid(“source”).dataBind() i have the same problem with the extra divs.
And if then i do $(“#jqxgrid”).jqxGrid(“destroy”) – all extra DIVS will continue to exist.

[Peter StoevKeymaster]

Hi adron,

Let me try again. If you dynamically update the Grid data without destroying it and your Grid is with enabled sorting/filtering, you will unfortunately get an extra Menu DIV tag in the present version. The solution for you if you want to dynamically update data is to “destroy” the Grid and initialize it from a new DIV tag.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts