Fixes #3388, added DataTableManager JS class used to initialize and set element ID for all DataTable in browser, instead of using report as element ID.

10 files changed, 201 insertions, 42 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 110d6c5280..1d965a06bf 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -91,6 +91,7 @@ class Piwik_CoreHome extends Piwik_Plugin
 		$jsFiles[] = "plugins/CoreHome/templates/autocomplete.js";
 		$jsFiles[] = "plugins/CoreHome/templates/sparkline.js";
 		$jsFiles[] = "plugins/CoreHome/templates/misc.js";
+		$jsFiles[] = "plugins/CoreHome/templates/datatable_manager.js";
 		$jsFiles[] = "plugins/CoreHome/templates/donate.js";
 		
 		$jsFiles[] = "plugins/CoreHome/templates/jqplot.js";
diff --git a/plugins/CoreHome/templates/cloud.tpl b/plugins/CoreHome/templates/cloud.tpl
index ed51f94e6f..efcfbeac5f 100644
--- a/plugins/CoreHome/templates/cloud.tpl
+++ b/plugins/CoreHome/templates/cloud.tpl
@@ -1,4 +1,4 @@
-<div id="{$properties.uniqueId}" class="dataTable">
+<div class="dataTable" data-report="{$properties.uniqueId}" data-params="{$javascriptVariablesToSet|@json_encode|escape:'html'}">
 	{if !empty($reportDocumentation) && $javascriptVariablesToSet.viewDataTable != 'tableGoals'}
 		<div class="reportDocumentation"><p>{$reportDocumentation}</p></div>
 	{/if}
diff --git a/plugins/CoreHome/templates/datatable.js b/plugins/CoreHome/templates/datatable.js
index 705cab4175..3ba0efde9a 100644
--- a/plugins/CoreHome/templates/datatable.js
+++ b/plugins/CoreHome/templates/datatable.js
@@ -134,7 +134,10 @@ dataTable.prototype =
 		}
 		if (typeof callbackSuccess == "undefined") 
 		{
-			callbackSuccess = self.dataTableLoaded;
+			callbackSuccess = function (response)
+			{
+				self.dataTableLoaded(response, self.workingDivId);
+			};
 		}
 		
 		if(displayLoading)
@@ -1767,8 +1770,12 @@ actionDataTable.prototype =
 		self.handleOffsetInformation(domElem);
 		if( self.workingDivId != undefined)
 		{
-			self.handleSearchBox(domElem, self.dataTableLoaded );
-			self.handleConfigurationBox(domElem, self.dataTableLoaded );
+			var dataTableLoadedProxy = function (response) {
+				self.dataTableLoaded(response, self.workingDivId);
+			};
+			
+			self.handleSearchBox(domElem, dataTableLoadedProxy);
+			self.handleConfigurationBox(domElem, dataTableLoadedProxy);
 		}
 		
 		self.handleColumnDocumentation(domElem);
diff --git a/plugins/CoreHome/templates/datatable.tpl b/plugins/CoreHome/templates/datatable.tpl
index b067446216..e596519e45 100644
--- a/plugins/CoreHome/templates/datatable.tpl
+++ b/plugins/CoreHome/templates/datatable.tpl
@@ -1,4 +1,4 @@
-<div id="{$properties.uniqueId}" class="dataTable">
+<div class="dataTable" data-report="{$properties.uniqueId}" data-params="{$javascriptVariablesToSet|@json_encode|escape:'html'}">
 	<div class="reportDocumentation">
 		{if !empty($reportDocumentation)}<p>{$reportDocumentation}</p>{/if}
 		{if isset($properties.metadata.archived_date)}<span class='helpDate'>{$properties.metadata.archived_date}</span>{/if}
diff --git a/plugins/CoreHome/templates/datatable_actions.tpl b/plugins/CoreHome/templates/datatable_actions.tpl
index 147e91cbe1..f9a48cf17e 100644
--- a/plugins/CoreHome/templates/datatable_actions.tpl
+++ b/plugins/CoreHome/templates/datatable_actions.tpl
@@ -1,4 +1,4 @@
-<div id="{$properties.uniqueId}" class="dataTable">
+<div class="dataTable" data-report="{$properties.uniqueId}" data-params="{$javascriptVariablesToSet|@json_encode|escape:'html'}">
 	<div class="reportDocumentation">
 		{if !empty($reportDocumentation)}<p>{$reportDocumentation}</p>{/if}
 		{if isset($properties.metadata.archived_date)}<span class='helpDate'>{$properties.metadata.archived_date}</span>{/if}
diff --git a/plugins/CoreHome/templates/datatable_js.tpl b/plugins/CoreHome/templates/datatable_js.tpl
index b49fd6ce0d..39fccf447d 100644
--- a/plugins/CoreHome/templates/datatable_js.tpl
+++ b/plugins/CoreHome/templates/datatable_js.tpl
@@ -1,14 +1,6 @@
 {if !isset($dataTableClassName)}{assign var=dataTableClassName value=dataTable}{/if}
 <script type="text/javascript" defer="defer">
 $(document).ready(function(){literal}{{/literal} 
-	var id = '{$properties.uniqueId}',
-		table = new {$dataTableClassName}();
-	dataTables[id] = table;
-	table.param = {literal}{{/literal} 
-	{foreach from=$javascriptVariablesToSet key=name item=value name=loop}
-		'{$name|escape:'javascript'}': {if is_array($value)}'{','|implode:$value}'{else}'{$value}'{/if} {if !$smarty.foreach.loop.last},{/if}
-	{/foreach}
-	{literal}};{/literal}
-	table.init(id);
+	piwik.DataTableManager.initNewDataTables({$dataTableClassName});
 {literal}}{/literal});
 </script>
diff --git a/plugins/CoreHome/templates/datatable_manager.js b/plugins/CoreHome/templates/datatable_manager.js
new file mode 100644
index 0000000000..fe3d228eb2
--- /dev/null
+++ b/plugins/CoreHome/templates/datatable_manager.js
@@ -0,0 +1,169 @@
+/*!
+ * Piwik - Web Analytics
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+(function($) {
+	
+	/**
+	 * The DataTableManager class manages the initialization of JS dataTable
+	 * instances. It's main purpose is to give each dataTable div a unique ID
+	 * when it's possible that any report will be loaded via AJAX, some more
+	 * than once.
+	 * 
+	 * The singleton instance can be accessed via piwik.DataTableManager.
+	 */
+	var DataTableManager = function()
+	{
+		this.nextId = 0;
+	};
+	
+	DataTableManager.prototype = {
+		
+		/**
+		 * Gets the next available dataTable ID.
+		 * 
+		 * @return {string}
+		 */
+		getNextId: function()
+		{
+			this.nextId += 1;
+			return 'dataTable_' + this.nextId;
+		},
+		
+		/**
+		 * Gets the ID used for the last table or 0 if a DataTable hasn't been
+		 * initialized yet.
+		 */
+		getLastId: function()
+		{
+			return 'dataTable_' + this.nextId;
+		},
+		
+		/**
+		 * Initializes all uninitialized datatable elements. Uninitialized
+		 * datatable elements do not have an ID set.
+		 * 
+		 * @param {Function} The DataTable's JS class.
+		 */
+		initNewDataTables: function(klass)
+		{
+			var self = this;
+			
+			// find each datatable that hasn't been initialized (has no id attribute),
+			// and initialize it
+			$('div.dataTable').each(function() {
+				if (!$(this).attr('id'))
+				{
+					var params = JSON.parse($(this).attr('data-params') || '{}');
+					
+					// convert values in params that are arrays to comma separated string lists
+					for (var key in params)
+					{
+						if (params[key] instanceof Array)
+						{
+							params[key] = params[key].join(',');
+						}
+					}
+					
+					self.initSingleDataTable(this, klass, params);
+				}
+			});
+		},
+		
+		/**
+		 * Initializes a single datatable element.
+		 * 
+		 * @param {Element} domElem The DataTable div element.
+		 * @param {Function} klass The DataTable's JS class.
+		 * @param {Object} params The request params used.
+		 */
+		initSingleDataTable: function(domElem, klass, params)
+		{
+			var newId = this.getNextId();
+			
+			$(domElem).attr('id', newId);
+			
+			var table = new klass();
+			window.dataTables[newId] = table;
+			
+			table.param = params;
+			table.init(newId);
+
+			// if the datatable has a graph, init the graph
+			var graphElement = $('.piwik-graph', domElem);
+			if (graphElement[0])
+			{
+				this.initJQPlotGraph(graphElement, newId);
+			}
+		},
+		
+		/**
+		 * Initializes and renders a JQPlot graph contained in a
+		 * dataTable.
+		 * 
+		 * @param {Element} graphElement The empty graph div element. Will
+		 *                               usually have the .piwik-graph class.
+		 * @param {String} dataTableId The ID of the containing datatable.
+		 */
+		initJQPlotGraph: function(graphElement, dataTableId)
+		{
+			graphElement = $(graphElement);
+			
+			// set a unique ID for the graph element
+			var graphId = dataTableId + 'Chart';
+			graphElement.attr('id', graphId);
+			
+			var graphData = JSON.parse(graphElement.attr('data-data')),
+				plot = new JQPlot(graphData, dataTableId);
+			
+			// add external series toggle if it should be added
+			var externalSeriesToggle = graphElement.attr('data-external-series-toggle');
+			if (externalSeriesToggle)
+			{
+				plot.addExternalSeriesToggle(
+					graphElement.attr(externalSeriesToggle),
+					graphId,
+					graphElement.attr('data-external-series-show-all') == 1
+				);
+			}
+			
+			// render the graph
+			plot.render(graphElement.attr('data-graph-type'), graphId, {
+				noData: _pk_translate('General_NoDataForGraph_js'),
+				exportTitle: _pk_translate('General_ExportAsImage_js'),
+				exportText: _pk_translate('General_SaveImageOnYourComputer_js'),
+				metricsToPlot: _pk_translate('General_MetricsToPlot_js'),
+				metricToPlot: _pk_translate('General_MetricToPlot_js'),
+				recordsToPlot: _pk_translate('General_RecordsToPlot_js'),
+			});
+		},
+		
+		/**
+		 * Returns the first datatable div displaying a specific report.
+		 * 
+		 * @param {string} The report, eg, UserSettings.getWideScreen
+		 * @return {Element} The datatable div displaying the report, or undefined if
+		 *                   it cannot be found.
+		 */
+		getDataTableByReport: function(report)
+		{
+			var reportWithoutDot = report.replace('.', '');
+			
+			var result = undefined;
+			$('.dataTable').each(function() {
+				if ($(this).attr('data-report') == reportWithoutDot)
+				{
+					result = this;
+					return false;
+				}
+			});
+			return result;
+		},
+	};
+	
+	piwik.DataTableManager = new DataTableManager();
+	
+}(jQuery));
diff --git a/plugins/CoreHome/templates/datatable_rowactions.js b/plugins/CoreHome/templates/datatable_rowactions.js
index cbaebb07e8..e28a676f55 100644
--- a/plugins/CoreHome/templates/datatable_rowactions.js
+++ b/plugins/CoreHome/templates/datatable_rowactions.js
@@ -77,8 +77,8 @@ DataTable_RowActions_Registry.register({
 		if (dataTable === null && param) {
 			// when row evolution is triggered from the url (not a click on the data table)
 			// we look for the data table instance in the dom
-			var divId = param.split(':')[0].replace(/\./, '');
-			var div = $('#' + divId + '.dataTable');
+			var report = param.split(':')[0];
+			var div = $(piwik.DataTableManager.getDataTableByReport(report));
 			if (div.size() > 0 && div.data('piwikDataTable')) {
 				dataTable = div.data('piwikDataTable');
 				if (typeof dataTable.rowEvolutionActionInstance != 'undefined') {
@@ -381,4 +381,4 @@ DataTable_RowActions_RowEvolution.prototype.showRowEvolution = function(apiMetho
     ajaxRequest.setCallback(callback);
     ajaxRequest.setFormat('html');
     ajaxRequest.send(false);
-};
\ No newline at end of file
+};
diff --git a/plugins/CoreHome/templates/graph.tpl b/plugins/CoreHome/templates/graph.tpl
index 0f1bd3e637..e3483ac9b2 100644
--- a/plugins/CoreHome/templates/graph.tpl
+++ b/plugins/CoreHome/templates/graph.tpl
@@ -1,4 +1,4 @@
-<div id="{$properties.uniqueId}" class="dataTable">
+<div class="dataTable" data-report="{$properties.uniqueId}" data-params="{$javascriptVariablesToSet|@json_encode|escape:'html'}">
 	
 	<div class="reportDocumentation">
 		{if !empty($reportDocumentation)}<p>{$reportDocumentation}</p>{/if}
@@ -10,34 +10,24 @@
 	{if $isDataAvailable}
 		
 		<div class="jqplot-{$graphType}" style="padding-left: 6px;">
-			<div id="{$chartDivId}" class="piwik-graph" style="position: relative; width: {$width}{if substr($width, -1) != '%'}px{/if}; height: {$height}{if substr($height, -1) != '%'}px{/if};"></div>
+			<div class="piwik-graph"
+				 style="position: relative; width: {$width}{if substr($width, -1) != '%'}px{/if}; height: {$height}{if substr($height, -1) != '%'}px{/if};"
+				 data-data="{$data|escape:'html'}"
+				 data-graph-type="{$graphType|escape:'html'}"
+				 {if isset($properties.externalSeriesToggle) && $properties.externalSeriesToggle}
+				 data-external-series-toggle="{$properties.externalSeriesToggle|escape:'html'}"
+				 data-external-series-show-all="{if $properties.externalSeriesToggleShowAll}1{else}0{/if}"
+				 {/if}>
+			</div>
 		</div>
 		
-		<script type="text/javascript">
-			{literal}  window.setTimeout(function() {  {/literal}
-				var plot = new JQPlot({$data}, '{$properties.uniqueId}');
-				{if isset($properties.externalSeriesToggle) && $properties.externalSeriesToggle}
-					plot.addExternalSeriesToggle({$properties.externalSeriesToggle}, '{$chartDivId}',
-						{if $properties.externalSeriesToggleShowAll}true{else}false{/if});
-				{/if}
-				plot.render('{$graphType}', '{$chartDivId}', {literal} { {/literal}
-					noData: '{'General_NoDataForGraph'|translate|escape:'javascript'}',
-					exportTitle: '{'General_ExportAsImage_js'|translate|escape:'javascript'}',
-					exportText: '{'General_SaveImageOnYourComputer_js'|translate|escape:'javascript'}',
-					metricsToPlot: '{'General_MetricsToPlot'|translate|escape:'javascript'}',
-					metricToPlot: '{'General_MetricToPlot'|translate|escape:'javascript'}',
-					recordsToPlot: '{'General_RecordsToPlot'|translate|escape:'javascript'}'
-				{literal} }); {/literal}
-			{literal}  }, 5);  {/literal}
-		</script>
-		
 	{else}
 		
-		<div><div id="{$chartDivId}" class="pk-emptyGraph">
+		<div><div class="pk-emptyGraph">
 			{if $showReportDataWasPurgedMessage}
 			{'General_DataForThisGraphHasBeenPurged'|translate:$deleteReportsOlderThan}
 			{else}
-			{'General_NoDataForGraph'|translate}
+			{'General_NoDataForGraph_js'|translate}
 			{/if}
 		</div></div>
 		
diff --git a/plugins/ImageGraph/API.php b/plugins/ImageGraph/API.php
index 9d55c1b8b1..d1d5bace51 100644
--- a/plugins/ImageGraph/API.php
+++ b/plugins/ImageGraph/API.php
@@ -317,7 +317,7 @@ class Piwik_ImageGraph_API
 				//@review this test will need to be updated after evaluating the @review comment in API/API.php
 				if(!$processedReport)
 				{
-					throw new Exception(Piwik_Translate('General_NoDataForGraph'));
+					throw new Exception(Piwik_Translate('General_NoDataForGraph_js'));
 				}
 
 				// restoring generic filter parameters
@@ -482,7 +482,7 @@ class Piwik_ImageGraph_API
 
 			if(!$hasData || !$hasNonZeroValue)
 			{
-				throw new Exception(Piwik_Translate('General_NoDataForGraph'));
+				throw new Exception(Piwik_Translate('General_NoDataForGraph_js'));
 			}
 
 			//Setup the graph