Support for multiple instances

* New demo page with two address forms, * Removed cache, * Removed mergeSettings.
experiandataquality · Sep 16, 2015 · b270a94 · b270a94
1 parent a55d1f3
commit b270a94
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 168 deletions.
diff --git a/demo-dual-forms.html b/demo-dual-forms.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Contact Data Services - sample code</title>
+	</head>
+	<body>
+		<form class="example1">
+			<label for="country">Country</label>
+			<select name="country">
+				<option value="">Please select</option>
+				<option value="aus">Australia</option>
+				<option value="fra">France</option>
+				<option value="nzl">New Zealand</option>
+				<option value="gbr" selected>United Kingdom</option>
+				<option value="usa">United States</option>
+			</select>
+
+			<label for="input">Address</label>
+			<input type="text" name="address-input">
+
+			<div id="picklist"></div>
+			<div id="formatted-address"></div>
+		</form>
+
+		<form class="example2">
+			<label for="country">Country</label>
+			<select name="country">
+				<option value="">Please select</option>
+				<option value="aus">Australia</option>
+				<option value="fra">France</option>
+				<option value="nzl">New Zealand</option>
+				<option value="gbr" selected>United Kingdom</option>
+				<option value="usa">United States</option>
+			</select>
+
+			<label for="input">Address</label>
+			<input type="text" name="address-input">
+
+			<div id="picklist"></div>
+			<div id="formatted-address"></div>
+		</form>
+
+		<script src="src/js/contact-data-services.js"></script>
+		<script>
+			var options1 = {
+				token: "4f0214b7-b7ec-4096-a19e-502b8046278c",
+				elements: {
+					input: document.querySelector(".example1 input[name='address-input']"),
+					countryList: document.querySelector(".example1 select"),
+					picklist: document.querySelector(".example1 #picklist"),
+					formattedAddress: document.querySelector(".example1 #formatted-address")
+				}				
+			};
+			var address1 = new ContactDataServices.address(options1);
+
+			var options2 = {
+				token: "4f0214b7-b7ec-4096-a19e-502b8046278c",				
+				elements: {
+					input: document.querySelector(".example2 input[name='address-input']"),
+					countryList: document.querySelector(".example2 select"),
+					picklist: document.querySelector(".example2 #picklist"),
+					formattedAddress: document.querySelector(".example2 #formatted-address")
+				}				
+			};
+			var address2 = new ContactDataServices.address(options2);
+		</script>
+	</body>
+</html>
diff --git a/demo.html b/demo.html
@@ -17,24 +17,23 @@
 
 			<label for="input">Address</label>
 			<input type="text" name="address-input">
+
+			<div id="picklist"></div>
+			<div id="formatted-address"></div>
 		</form>
-		<div id="picklist"></div>
-		<div id="formatted-address"></div>
 
 		<script src="src/js/contact-data-services.js"></script>
 		<script>
 			var options = {
 				token: "4f0214b7-b7ec-4096-a19e-502b8046278c",
-				address: {
-					elements: {
-						input: document.querySelector("input[name='address-input']"),
-						countryList: document.querySelector("select"),
-						picklist: document.querySelector("#picklist"),
-						formattedAddress: document.querySelector("#formatted-address")
-					}
+				elements: {
+					input: document.querySelector("input[name='address-input']"),
+					countryList: document.querySelector("select"),
+					picklist: document.querySelector("#picklist"),
+					formattedAddress: document.querySelector("#formatted-address")					
 				}
 			};
-			contactDataServices.init(options);
+			var address = new ContactDataServices.address(options);
 		</script>
 	</body>
 </html>