drewww/leak_test.html

## leak_test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<!-- Combo-handled YUI CSS files: -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/button/assets/skins/sam/button.css&2.8.1/build/datatable/assets/skins/sam/datatable.css">
	<!-- Combo-handled YUI JS files: -->
	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/element/element-min.js&2.8.1/build/button/button-min.js&2.8.1/build/datasource/datasource-min.js&2.8.1/build/datatable/datatable-min.js"></script>


<script type="text/javascript" charset="utf-8">
	YAHOO.util.Event.onDOMReady(init);

	function init() {
		console.log("Initializing DataSource and DataTable.");

		// Create a trivial data source for our table. Sticking with
		// a local source for convenience.
		dataSource = new YAHOO.util.LocalDataSource(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40"]);

		// Trivial schema.
		dataSource.responseSchema = {fields:["id"]};

		// Set up the columns, with the offending formatter.
		var columns = [{
			key:"id",
			label:"id",
			formatter: function(elCell, oRecord, oColumn, oData) {

				// The loop adds more buttons to each row to
				// accelerate the leak.
				for(i=0; i<5; i++) {

					// Adding buttons is what causes the leak;
					// if you comment out the button creation,
					// there won't be any leak. This is true in my
					// larger (and much more elaborate) app.
					var button = new YAHOO.widget.Button({
						container:elCell,
						type: "push",
					});

					// If I destroy the button after creating it,
					// memory won't leak. This is the solution
					// I've settled on in my application; I keep
					// traack of all my button objects and destroy
					// them each when reloading the DataTable.
					// But I wonder if this represents a deeper bug
					// in the way DataTables refresh? Or perhaps
					// there are circular references between buttons
					// and their DOM elements?

					// Uncomment to stop the leak.
					// button.destroy();
				}
				}}];

		// Create the data table.
		dataTable = new YAHOO.widget.DataTable("dataTable",
			columns, dataSource, {
				initialLoad: true,
				sortedBy: {key:"id"}
			});

		// Turn on refreshing. One second interval
		// to leak as fast as possible. On data return,
		// reinit the table.
		dataSource.setInterval(1000, null, {
			success:refresh,
			failure:function() {alert("update failed")},
			scope:dataTable,
			});
 	}

	function refresh(o, response) {
		console.log("Updating dataTable.");
		this.onDataReturnInitializeTable(o, response);
	}

</script>


</head>
<body class="yui-skin-sam" id="test">
<div id="dataTable"></div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>

	<!-- Combo-handled YUI CSS files: -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/button/assets/skins/sam/button.css&2.8.1/build/datatable/assets/skins/sam/datatable.css">
	<!-- Combo-handled YUI JS files: -->
	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/element/element-min.js&2.8.1/build/button/button-min.js&2.8.1/build/datasource/datasource-min.js&2.8.1/build/datatable/datatable-min.js"></script>


	<script type="text/javascript" charset="utf-8">
	YAHOO.util.Event.onDOMReady(init);

	function init() {
	console.log("Initializing DataSource and DataTable.");

	// Create a trivial data source for our table. Sticking with
	// a local source for convenience.
	dataSource = new YAHOO.util.LocalDataSource(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40"]);

	// Trivial schema.
	dataSource.responseSchema = {fields:["id"]};

	// Set up the columns, with the offending formatter.
	var columns = [{
	key:"id",
	label:"id",
	formatter: function(elCell, oRecord, oColumn, oData) {

	// The loop adds more buttons to each row to
	// accelerate the leak.
	for(i=0; i<5; i++) {

	// Adding buttons is what causes the leak;
	// if you comment out the button creation,
	// there won't be any leak. This is true in my
	// larger (and much more elaborate) app.
	var button = new YAHOO.widget.Button({
	container:elCell,
	type: "push",
	});

	// If I destroy the button after creating it,
	// memory won't leak. This is the solution
	// I've settled on in my application; I keep
	// traack of all my button objects and destroy
	// them each when reloading the DataTable.
	// But I wonder if this represents a deeper bug
	// in the way DataTables refresh? Or perhaps
	// there are circular references between buttons
	// and their DOM elements?

	// Uncomment to stop the leak.
	// button.destroy();
	}
	}}];

	// Create the data table.
	dataTable = new YAHOO.widget.DataTable("dataTable",
	columns, dataSource, {
	initialLoad: true,
	sortedBy: {key:"id"}
	});

	// Turn on refreshing. One second interval
	// to leak as fast as possible. On data return,
	// reinit the table.
	dataSource.setInterval(1000, null, {
	success:refresh,
	failure:function() {alert("update failed")},
	scope:dataTable,
	});
	}

	function refresh(o, response) {
	console.log("Updating dataTable.");
	this.onDataReturnInitializeTable(o, response);
	}

	</script>


	</head>
	<body class="yui-skin-sam" id="test">
	<div id="dataTable"></div>
	</body>
	</html>