Template Displays - Revision history

SNC at 16:32, 16 January 2020

2020-01-16T16:32:01Z

SNC at 16:27, 16 January 2020

2020-01-16T16:27:24Z

SNC at 16:26, 16 January 2020

2020-01-16T16:26:33Z

SNC at 16:25, 16 January 2020

2020-01-16T16:25:19Z

SNC at 16:24, 16 January 2020

2020-01-16T16:24:15Z

SNC at 16:23, 16 January 2020

2020-01-16T16:23:22Z

SNC at 16:19, 16 January 2020

2020-01-16T16:19:57Z

SNC at 16:19, 16 January 2020

2020-01-16T16:19:09Z

SNC at 16:17, 16 January 2020

2020-01-16T16:17:47Z

SNC at 16:16, 16 January 2020

2020-01-16T16:16:50Z

@@ Line 45: / Line 45: @@
 </nowiki>
 <br>
 <br>
 [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

@@ Line 18: / Line 18: @@
 <br>
-<nowiki>
+ <nowiki>
 <script type="text/javascript">
 function UpdateFrame(A_IFrameID, A_InputID)
@@ Line 41: / Line 41: @@
 	return;
+   }
-</script></nowiki>
+</script>
 <br>
 <br>
 [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

@@ Line 19: / Line 19: @@
 <nowiki>
 <script type="text/javascript">
 function UpdateFrame(A_IFrameID, A_InputID)
-<br>  {
-<br>	// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
+	// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
-<br>	var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
+	var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
-<br>	var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
+	var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
-<br>	var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
+	var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
-<br>	if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
+	if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
-<br>	if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; }		// Exit if any requirement is missing. //
+	if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; }		// Exit if any requirement is missing. //
-<br>
-<br>	var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"];	// All source arguments to pull from input (as meta data with "data-" prefix). //
+	var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"];	// All source arguments to pull from input (as meta data with "data-" prefix). //
-<br>	for (var i=0; i<L_Args.length; i++)
+	for (var i=0; i<L_Args.length; i++)
-<br>	  {
-<br>		var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B");	// Fetch current arg and URL escape it. //
+		var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B");	// Fetch current arg and URL escape it. //
-<br>		// Replace or add current arg as appropriate (two possible add options). //
+		// Replace or add current arg as appropriate (two possible add options). //
-<br>		if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
+		if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
-<br>		else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
+		else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
-<br>		else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
+		else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
-<br>	  }
-<br>	L_IFrame.setAttribute("src", L_IFrameSrc);	// Update iFrame with modified soruce to refresh. //
+	L_IFrame.setAttribute("src", L_IFrameSrc);	// Update iFrame with modified soruce to refresh. //
-<br>	return;
+	return;
-<br>  }
-<br></script>
+</script></nowiki>
-−
 </nowiki>
 <br>
 <br>
 [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

@@ Line 22: / Line 22: @@
 <script type="text/javascript">
 function UpdateFrame(A_IFrameID, A_InputID)
+<br>  {
-	// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
+<br>	// Get iFrame from ID (or optional index) and it's source then get Input from ID (pulling current option from select). //
-	var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
+<br>	var L_IFrame = ((typeof A_IFrameID == "number") && (A_IFrameID >= 0)) ? document.getElementsByTagName("iframe")[A_IFrameID] || null : ((typeof A_IFrameID !== "undefined") && A_IFrameID.length) ? document.getElementById(A_IFrameID) || null : null;
-	var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
+<br>	var L_IFrameSrc = (L_IFrame != null) ? L_IFrame.getAttribute("src") || "" : "";
-	var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
+<br>	var L_Input = ((typeof A_InputID !== "undefined") && A_InputID.length) ? document.getElementById(A_InputID) || null : null;
-	if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
+<br>	if ((L_Input != null) && (L_Input.type.toUpperCase().indexOf("SELECT") != -1)) { L_Input = L_Input.options[L_Input.selectedIndex] || null; }
-	if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; }		// Exit if any requirement is missing. //
+<br>	if ((L_IFrame == null) || !L_IFrameSrc.length || (L_Input == null)) { return; }		// Exit if any requirement is missing. //
+<br>
-	var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"];	// All source arguments to pull from input (as meta data with "data-" prefix). //
+<br>	var L_Args = ["glname", "alttitle", "xsectdate", "altextsrc"];	// All source arguments to pull from input (as meta data with "data-" prefix). //
-	for (var i=0; i<L_Args.length; i++)
+<br>	for (var i=0; i<L_Args.length; i++)
+<br>	  {
-		var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B");	// Fetch current arg and URL escape it. //
+<br>		var L_EscapedArgValue = "=" + escape(L_Input.getAttribute("data-"+L_Args[i]) || "").replace(/\+/g, "%2B");	// Fetch current arg and URL escape it. //
-		// Replace or add current arg as appropriate (two possible add options). //
+<br>		// Replace or add current arg as appropriate (two possible add options). //
-		if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
+<br>		if (new RegExp("[&?]"+L_Args[i]+"=?", "gi").test(L_IFrameSrc)) { L_IFrameSrc = L_IFrameSrc.replace(new RegExp("([&?]"+L_Args[i]+")(=[^&]*|=?$)", "gi"), "$1"+L_EscapedArgValue); }
-		else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
+<br>		else if (L_IFrameSrc.indexOf("?") < 0) { L_IFrameSrc = L_IFrameSrc + "?" + L_Args[i] + L_EscapedArgValue; }
-		else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
+<br>		else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
+<br>	  }
-	L_IFrame.setAttribute("src", L_IFrameSrc);	// Update iFrame with modified soruce to refresh. //
+<br>	L_IFrame.setAttribute("src", L_IFrameSrc);	// Update iFrame with modified soruce to refresh. //
-	return;
+<br>	return;
+<br>  }
-</script>
+<br></script>
 </nowiki>

@@ Line 17: / Line 17: @@
 <br>
 <br>
-@@
 <script type="text/javascript">
 function UpdateFrame(A_IFrameID, A_InputID)
@@ Line 41: / Line 43: @@
+   }
 </script>
-@@
 <br>
 <br>
 [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

@@ Line 16: / Line 16: @@
 * Add an "onchange" function to the <nowiki><select></nowiki> that will call UpdateFrame as described in its comments <br>
 <br>
 <br>
 <br>
 <br>
 [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]]

@@ Line 7: / Line 7: @@
 <br>
-<div class="imgGlyph24 imgConcept"></div>&nbsp;Templatiung of displays combines three concepts:
+Templates work with any display type, but in this discussion we will just refer to a dataZoa Table Display.
 * Make several dataZoa Grouplists that contain conceptually and structurally similar data that vary in one particular aspect.  For example, you might make 10 Grouplists of the same 7 employment statistics for different MSAs.
 * Build a Table in the usual way using one the Grouplists.
@@ Line 14: / Line 15: @@
 * Add the Javascript <i>UpdateFrame</i> function below to your webpage.
 * Add an "onchange" function to the <nowiki><select></nowiki> that will call UpdateFrame as described in its comments <br>
 <br>
 To begin, make a table specifically for your app which contains all the data needed and then use AJAX to fetch it.

@@ Line 1: / Line 1: @@
-<div class="imgGlyph24 imgConcept"></div>&nbsp;Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechanism to pop different data sets into the display dynamically (typically from a drop down list of data choices).
+<div class="imgGlyph24 imgIdea"></div>&nbsp;Rather than making a set of Displays that are identical in except for the data they contain, you can implement a template mechanism to pop different data sets into the display dynamically (typically from a drop down list of data choices). For example, you might want to show the same 7 employment categories for 10 different MSAs, and rather than a different display for each MSA, a single template will let you select an MSA from a drop down list and see it swapped in.
 <br>
 Templates work with any display type, but in this discussion we will just refer to a dataZoa Table Display.
 <br>