Rework etemplate2 loading to use JSON plugin when loading from regular request & AJAX. instead of inline script tag

etemplate/inc/class.etemplate.inc.php

@@ -133,13 +133,19 @@ class etemplate_new extends etemplate_widget_template
 			'modifications' => self::$request->modifications,
 			'validation_errors' => self::$validation_errors,
 		);
+		
+		// Info required to load the etemplate client-side
+		$dom_id = str_replace('.','-',$this->name);
+		$load_array = array(
+			'name' => $this->name,
+			'url' => $GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path,
+			'data' => $data,
+			'DOMNodeID' => $dom_id
+		);
 		if (self::$response)	// call is within an ajax event / form submit
 		{
-			self::$response->generic('et2_load', array(
+			//error_log("Ajax " . __LINE__);
-				'name' => $this->name,
+			self::$response->generic('et2_load', $load_array);
-				'url' => $GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path,
-				'data' => $data,
-			));
 		}
 		else	// first call
 		{
@@ -148,8 +154,7 @@ class etemplate_new extends etemplate_widget_template
 
 			// Include the jQuery-UI CSS - many more complex widgets use it
 			$theme = 'redmond';
-			egw_framework::includeCSS("/phpgwapi/js/jquery/jquery-ui/$theme/jquery-ui-1.8.21.custom.css");
+			egw_framework::includeCSS("/phpgwapi/js/jquery/jquery-ui/$theme/jquery-ui-1.10.3.custom.css");
-
 			// Load our CSS after jQuery-UI, so we can override it
 			egw_framework::includeCSS('/etemplate/templates/default/etemplate2.css');
 
@@ -160,11 +165,7 @@ class etemplate_new extends etemplate_widget_template
 				egw_framework::validate_file('.','app',$app,false);
 			}
 
-			common::egw_header();
+
-			if ($output_mode != 2)
-			{
-				parse_navbar();
-			}
 			// load translations
 			translation::add_app('etemplate');
 			$langRequire = array();
@@ -173,66 +174,27 @@ class etemplate_new extends etemplate_widget_template
 				$langRequire[] = array('app' => $l_app, 'lang' => $lang);
 			}
 
-			$dom_id = str_replace('.','-',$this->name);
+			$header = $GLOBALS['egw']->framework->header(array(
-			// check if we are in an ajax-exec call from jdots template (or future other tabed templates)
+				'etemplate' => $load_array
+			));
+			// check if we are in an ajax-exec call from jdots template (or future other tabbed templates)
 			if (isset($GLOBALS['egw']->framework->response))
 			{
-				echo '
+				//error_log("Ajax " . __LINE__);
-		<div id="' . $dom_id .'" class="et2_container"></div>
+				$GLOBALS['egw']->framework->response->generic("data", array('<div id="'.$dom_id.'" class="et2_container"></div>'));
-		<script>
+				$GLOBALS['egw']->framework->response->generic('et2_load',$load_array);
-			// Wait for all files to be loaded & executed first
+				return;
-			egw_LAB.wait(function() {
-				egw.langRequire(window, '.json_encode($langRequire).');
-				egw(window).includeJS('.json_encode(egw_framework::get_script_links(true, true)).	// return and clear
-					',function() {
-					egw.debug("info", "Instanciating etemplate2 object for '.$this->name.'");
-
-					// Setup callback to initialize application js
-					var callback = null;
-					// Only initialize once
-					if(typeof app["'.$app.'"] == "function")
-					{
-						(function() { new app["'.$app.'"]();}).call();
-					} ' . (!file_exists(EGW_SERVER_ROOT.'/'.$app.'/js/app.js') ? '' :'
-					else { egw.debug("warn", "Did not load '.$app.' JS object"); }').'
-					if(typeof app["'.$app.'"] == "object")
-					{
-						callback = function(et2) {app["'.$app.'"].et2_ready(et2)};
-					}
-					var et2 = new etemplate2(document.getElementById("'.$dom_id.'"), "etemplate::ajax_process_content");
-					et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).', callback);
-				}, window, egw.webserverUrl);
-			});
-		</script>
-';
 			}
 			else
 			{
-				echo '
+				//error_log("NON-Ajax " . __LINE__);
-		<div id="'.$dom_id.'" class="et2_container"></div>
+				echo $header;
-		<script>
+				if ($output_mode != 2)
-			// Wait for all files to be loaded & executed first
+				{
-			egw_LAB.wait(function() {
+					parse_navbar();
-				egw.langRequire(window, '.json_encode($langRequire).');
+				}
-				egw(window).ready(function() {
+				echo '<div id="'.$dom_id.'" class="et2_container"></div>';
-					// Initialize application js
+				$GLOBALS['egw']->framework->footer();
-					var callback = null;
-					// Only initialize once
-					if(typeof app["'.$app.'"] == "function")
-					{
-						(function() { new app["'.$app.'"]();}).call();
-					} ' . (!file_exists(EGW_SERVER_ROOT.'/'.$app.'/js/app.js') ? '' :'
-					 else { egw.debug("warn", "Did not load '.$app.' JS object"); }') . '
-					if(typeof app["'.$app.'"] == "object")
-					{
-						callback = function(et2) {app["'.$app.'"].et2_ready(et2)};
-					}
-					var et2 = new etemplate2(document.getElementById("'.$dom_id.'"), "etemplate::ajax_process_content");
-					et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).',callback);
-				}, null, true);
-			});
-		</script>
-';
 			}
 			ob_flush();
 			
@@ -246,7 +208,6 @@ class etemplate_new extends etemplate_widget_template
 				unset($response);
 				echo ')});</script>';
 			}
-			common::egw_footer();
 		}
 	}
 
@@ -578,7 +539,7 @@ class etemplate_new extends etemplate_widget_template
 	}
 }
 // default etemplate class has to be defined by either extending etemplate_new or etemplate_old
-class etemplate extends etemplate_old {};
+class etemplate extends etemplate_new {};
 
 // Try to discover all widgets, as names don't always match tags (eg: listbox is in menupopup)
 $files = scandir(EGW_INCLUDE_ROOT . '/etemplate/inc');

etemplate/js/etemplate2.js

@@ -135,7 +135,6 @@ etemplate2.prototype.clear = function()
 			}
 		}
 	}
-	this.templates = {};
 };
 
 /**
@@ -195,6 +194,22 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
 	var split = _name.split('.');
 	var appname = split[0];
 
+	// Initialize application js
+	var app_callback = null;
+	// Only initialize once
+	if(typeof app[appname] == "function")
+	{
+		(function() { new app[appname]();}).call();
+	}
+	else
+	{
+		egw.debug("warn", "Did not load '%s' JS object",appname); 
+	}
+	if(typeof app[appname] == "object")
+	{
+		app_callback = function(et2) {app[appname].et2_ready(et2)};
+	}
+	
 	// Create the document fragment into which the HTML will be injected
 	var frag = document.createDocumentFragment();
 
@@ -219,18 +234,8 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
 	} else {
 		// todo for idots or jdots framework
 	}
-
+	
-	// Asynchronously load the XET file
+	var _load = function() {
-	et2_loadXMLFromURL(_url, function(_xmldoc) {
-
-		// Scan for templates and store them
-		for(var i = 0; i < _xmldoc.childNodes.length; i++) {
-			var template = _xmldoc.childNodes[i];
-			if(template.nodeName.toLowerCase() != "template") continue;
-			this.templates[template.getAttribute("id")] = template;
-			if(!_name) missing_name = template.getAttribute("id");
-		}
-
 		// Read the XML structure of the requested template
 		this.widgetContainer.loadFromXML(this.templates[_name || missing_name]);
 
@@ -254,13 +259,46 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
 		{
 			_callback.call(window,this);
 		}
+		if(_callback != app_callback)
+		{
+			app_callback.call(window,this);
+		}
 
 		$j(this.DOMContainer).trigger('load', this);
-	}, this);
+	};
+	
+
+	
+	// Load & process
+	if(!this.templates[_name])
+	{
+		// Asynchronously load the XET file	
+		et2_loadXMLFromURL(_url, function(_xmldoc) {
+
+			// Scan for templates and store them
+			for(var i = 0; i < _xmldoc.childNodes.length; i++) {
+				var template = _xmldoc.childNodes[i];
+				if(template.nodeName.toLowerCase() != "template") continue;
+				this.templates[template.getAttribute("id")] = template;
+				if(!_name) missing_name = template.getAttribute("id");
+			}
+			_load.apply(this,[]);
+		}, this);
+		
+		// Split the given data into array manager objects and pass those to the
+		// widget container - do this here because file is loaded async
+		this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
+	}
+	else
+	{
+		// Set array managers first, or errors will happen
+		this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
+		
+		// Already have it
+		_load.apply(this,[]);
+	}
+	
 
-	// Split the given data into array manager objects and pass those to the
-	// widget container
-	this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
 };
 
 etemplate2.prototype.submit = function(button)
@@ -565,8 +603,27 @@ function etemplate2_handle_load(_type, _response)
 	var data = _response.data;
 	if (typeof data.url == "string" && typeof data.data === 'object')
 	{
-		this.load(data.name, data.url, data.data);
+		if(typeof this.load == 'function')
-		return true;
+		{
+			// Called from etemplate
+			this.load(data.name, data.url, data.data);
+			return true;
+		}
+		else
+		{
+			// Not etemplate
+			var node = document.getElementById(data.DOMNodeID);
+			if(node)
+			{
+				var et2 = new etemplate2(node, "etemplate::ajax_process_content");
+				et2.load(data.name, data.url, data.data);
+				return true;
+			}
+			else
+			{
+				egw.debug("error", "Could not find target node %s", data.DOMNodeId);
+			}
+		}
 	}
 
 	throw("Error while parsing et2_load response");