Difference between revisions of "Template Displays"
| Line 16: | Line 16: | ||
* Add an "onchange" function to the <nowiki><select></nowiki> that will call UpdateFrame as described in its comments <br> | * Add an "onchange" function to the <nowiki><select></nowiki> that will call UpdateFrame as described in its comments <br> | ||
<br> | <br> | ||
| − | |||
<br> | <br> | ||
| + | <nowiki> | ||
| + | function UpdateFrame(A_IFrameID, A_InputID) | ||
| + | { | ||
| + | // 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; | ||
| + | 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; | ||
| + | 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. // | ||
| + | |||
| + | 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++) | ||
| + | { | ||
| + | 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). // | ||
| + | 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; } | ||
| + | else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; } | ||
| + | } | ||
| + | L_IFrame.setAttribute("src", L_IFrameSrc); // Update iFrame with modified soruce to refresh. // | ||
| + | return; | ||
| + | } | ||
| + | </script> | ||
| + | </nowiki> | ||
<br> | <br> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<br> | <br> | ||
[[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]] | [[Category:Advanced]][[Category:Displays]][[Category:Publishing]][[Category:Developers]][[Category:API]] | ||
Revision as of 08:19, 16 January 2020
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.
- HTML
- Javascript
- dataZoa Grouplists
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.
- Embed the Table on your webpage in the usual way.
- Implement an HTML <select> (aka "drop down") list with options for each of the geographies that have the corresponding Grouplist as their values.
- Add the Javascript UpdateFrame function below to your webpage.
- Add an "onchange" function to the <select> that will call UpdateFrame as described in its comments
function UpdateFrame(A_IFrameID, A_InputID)
{
// 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;
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;
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. //
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++)
{
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). //
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; }
else { L_IFrameSrc = L_IFrameSrc + "&" + L_Args[i] + L_EscapedArgValue; }
}
L_IFrame.setAttribute("src", L_IFrameSrc); // Update iFrame with modified soruce to refresh. //
return;
}
</script>
