From 233af42424d17c3d5f661c823bae8cf7457a1835 Mon Sep 17 00:00:00 2001
From: laurenwalker <walker@nceas.ucsb.edu>
Date: Wed, 20 Jun 2018 11:38:10 -0400
Subject: [PATCH] Populate the EMLParty template via Javascript, not via the
 Underscore template. This prevents certain characters from messing up the
 HTML.

---
 src/js/templates/metadata/EMLParty.html | 30 +++++++++++-----------
 src/js/views/metadata/EMLPartyView.js   | 33 +++++++++++++------------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/js/templates/metadata/EMLParty.html b/src/js/templates/metadata/EMLParty.html
index 9cfefd5c8..948cb8e78 100644
--- a/src/js/templates/metadata/EMLParty.html
+++ b/src/js/templates/metadata/EMLParty.html
@@ -4,63 +4,63 @@
 	<div class="span4">
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-givenName">First Name</label>
-			<input type="text" value="<%=givenName%>" id="<%=uniqueId%>-givenName" class="span6 tooltip-this" name="first name" data-attribute="givenName" placeholder="First name" />
+			<input type="text" id="<%=uniqueId%>-givenName" class="span6 tooltip-this" name="first name" data-attribute="givenName" placeholder="First name" />
 			<label class="hidden" for="<%=uniqueId%>-surName">Last Name</label>
-			<input type="text" value="<%=surName%>" id="<%=uniqueId%>-surName" class="span6 tooltip-this required" name="last name" data-attribute="surName" placeholder="Last name"/>
+			<input type="text" id="<%=uniqueId%>-surName" class="span6 tooltip-this required" name="last name" data-attribute="surName" placeholder="Last name"/>
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-position">Position</label>
-			<input type="text" value="<%=posName%>" id="<%=uniqueId%>-position" name="Position" class="span12 tooltip-this required" data-attribute="positionName" placeholder="Position name" />
+			<input type="text" id="<%=uniqueId%>-position" name="Position" class="span12 tooltip-this required" data-attribute="positionName" placeholder="Position name" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-organizationName">Organization Name</label>
-			<input type="text" value="<%=orgName%>" id="<%=uniqueId%>-organizationName" name="Organization" class="span12 tooltip-this required" data-attribute="organizationName" placeholder="Organization name"/>
+			<input type="text" id="<%=uniqueId%>-organizationName" name="Organization" class="span12 tooltip-this required" data-attribute="organizationName" placeholder="Organization name"/>
 		</div>
 	</div>
 	<div class="span4">
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-email">E-mail</label>
-			<input type="email" value="<%=email%>" id="<%=uniqueId%>-email" name="E-mail" class="span12 tooltip-this" data-attribute="email" placeholder="Email" />
+			<input type="email" id="<%=uniqueId%>-email" name="E-mail" class="span12 tooltip-this" data-attribute="email" placeholder="Email" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-website">Website</label>
-			<input type="url" value="<%=website%>" id="<%=uniqueId%>-website" name="website" class="span12 tooltip-this" data-attribute="onlineUrl" placeholder="Website" />
+			<input type="url" id="<%=uniqueId%>-website" name="website" class="span12 tooltip-this" data-attribute="onlineUrl" placeholder="Website" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-phone">Phone number</label>
-			<input type="tel" value="<%=phone%>" id="<%=uniqueId%>-phone" name="Phone number" class="span6 tooltip-this phone" data-attribute="phone" placeholder="Phone" />
+			<input type="tel" id="<%=uniqueId%>-phone" name="Phone number" class="span6 tooltip-this phone" data-attribute="phone" placeholder="Phone" />
 
 			<label class="hidden" for="<%=uniqueId%>-fax">Fax number</label>
-			<input type="tel" value="<%=fax%>" id="<%=uniqueId%>-fax" name="fax number" class="span6 tooltip-this phone" data-attribute="fax" placeholder="Fax" />
+			<input type="tel" id="<%=uniqueId%>-fax" name="fax number" class="span6 tooltip-this phone" data-attribute="fax" placeholder="Fax" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-orcid">ORCID</label>
 			<img src="img/orcid_64x64.png" class="input-logo" alt="ORCID logo" title="ORCID logo"/>
-			<input type="text" value="<%=userId%>" id="<%=uniqueId%>-orcid" name="orcid" class="tooltip-this" data-attribute="userId" data-html="true" placeholder="For maximum impact, add this person's ORCID. <a href='https://orcid.org/orcid-search/search'>Search for an ORCID by name.</a>" />
+			<input type="text" id="<%=uniqueId%>-orcid" name="orcid" class="tooltip-this" data-attribute="userId" data-html="true" placeholder="For maximum impact, add this person's ORCID. <a href='https://orcid.org/orcid-search/search'>Search for an ORCID by name.</a>" />
 		</div>
 	</div>
 	<div class="span4">
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-address">Address</label>
-			<input type="text" id="<%=uniqueId%>-address" name="address" value="<%=addressOne%>" class="span12 tooltip-this" data-attribute="deliveryPoint" placeholder="Street address" />
+			<input type="text" id="<%=uniqueId%>-address" name="address" class="span12 tooltip-this" data-attribute="deliveryPoint" placeholder="Street address" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-address2">Address Line 2</label>
-			<input type="text" id="<%=uniqueId%>-address2" name="address line 2" value="<%=addressTwo%>" class="span12 tooltip-this" data-attribute="deliveryPoint" placeholder="Address line 2" />
+			<input type="text" id="<%=uniqueId%>-address2" name="address line 2" class="span12 tooltip-this" data-attribute="deliveryPoint" placeholder="Address line 2" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-city">City</label>
-			<input type="text" value="<%=city%>" id="<%=uniqueId%>-city" name="city" class="span6 tooltip-this" data-attribute="city" placeholder="City" />
+			<input type="text" id="<%=uniqueId%>-city" name="city" class="span6 tooltip-this" data-attribute="city" placeholder="City" />
 
 			<label class="hidden" for="<%=uniqueId%>-state">State or Administrative Area</label>
-			<input type="text" value="<%=adminArea%>" id="<%=uniqueId%>-state" name="state" class="span6 tooltip-this" data-attribute="administrativeArea" placeholder="State or province" />
+			<input type="text" id="<%=uniqueId%>-state" name="state" class="span6 tooltip-this" data-attribute="administrativeArea" placeholder="State or province" />
 		</div>
 		<div class="row-fluid">
 			<label class="hidden" for="<%=uniqueId%>-zip">Zip Code</label>
-			<input type="text" value="<%=postalCode%>" id="<%=uniqueId%>-zip" name="zip code" class="span6 tooltip-this" data-attribute="postalCode" placeholder="Postal code" />
+			<input type="text" id="<%=uniqueId%>-zip" name="zip code" class="span6 tooltip-this" data-attribute="postalCode" placeholder="Postal code" />
 
 			<label class="hidden" for="<%=uniqueId%>-country">Country</label>
-			<input type="text" value="<%=country%>" id="<%=uniqueId%>-country" name="country" class="span6 tooltip-this" data-attribute="country" placeholder="Country" />
+			<input type="text" id="<%=uniqueId%>-country" name="country" class="span6 tooltip-this" data-attribute="country" placeholder="Country" />
 		</div>
 	</div>
 </div>
diff --git a/src/js/views/metadata/EMLPartyView.js b/src/js/views/metadata/EMLPartyView.js
index 5e45156e6..7f6831d69 100644
--- a/src/js/views/metadata/EMLPartyView.js
+++ b/src/js/views/metadata/EMLPartyView.js
@@ -64,24 +64,25 @@ define(['underscore', 'jquery', 'backbone', 'models/metadata/eml211/EMLParty',
 
 	        		//Send all the EMLParty info to the template
 	        		this.$el.html(this.editTemplate({
-	        			givenName  : fullGivenName || "",
-	        			surName    : name.surName || "",
-	        			salutation : name.salutation || "",
-	        			orgName    : this.model.get("organizationName") || "",
-	        			posName    : this.model.get("positionName") || "",
-	        			addressOne : address.deliveryPoint && address.deliveryPoint.length? address.deliveryPoint[0] : "",
-	        			addressTwo : address.deliveryPoint && address.deliveryPoint.length > 1? address.deliveryPoint[1] : "",
-	        			city       : address.city || "",
-	        			adminArea  : address.administrativeArea || "",
-	        			country    : address.country || "",
-	        			postalCode : address.postalCode || "",
-	        			phone      : this.model.get("phone").length? this.model.get("phone")[0] : "",
-	        			fax        : this.model.get("fax").length? this.model.get("fax")[0] : "",
-	        			email      : this.model.get("email").length? this.model.get("email")[0] : "",
-	        			website    : this.model.get("onlineUrl").length? this.model.get("onlineUrl")[0] : "",
-	        			userId     : Array.isArray(this.model.get("userId"))? this.model.get("userId")[0] : this.model.get("userId") || "",
 	        			uniqueId   : this.model.cid
 	        		}));
+
+              //Populate the form with all the EMLParty values
+              this.$("#" + this.model.cid + "-givenName").val(fullGivenName || "");
+              this.$("#" + this.model.cid + "-surName").val(name.surName || "");
+              this.$("#" + this.model.cid + "-position").val(this.model.get("positionName") || "");
+              this.$("#" + this.model.cid + "-organizationName").val(this.model.get("organizationName") || "");
+              this.$("#" + this.model.cid + "-email").val(this.model.get("email").length? this.model.get("email")[0] : "");
+              this.$("#" + this.model.cid + "-website").val(this.model.get("onlineUrl").length? this.model.get("onlineUrl")[0] : "");
+              this.$("#" + this.model.cid + "-phone").val(this.model.get("phone").length? this.model.get("phone")[0] : "");
+              this.$("#" + this.model.cid + "-fax").val(this.model.get("fax").length? this.model.get("fax")[0] : "");
+              this.$("#" + this.model.cid + "-orcid").val(Array.isArray(this.model.get("userId"))? this.model.get("userId")[0] : this.model.get("userId") || "");
+              this.$("#" + this.model.cid + "-address").val(address.deliveryPoint && address.deliveryPoint.length? address.deliveryPoint[0] : "");
+              this.$("#" + this.model.cid + "-address2").val(address.deliveryPoint && address.deliveryPoint.length > 1? address.deliveryPoint[1] : "");
+              this.$("#" + this.model.cid + "-city").val(address.city || "");
+              this.$("#" + this.model.cid + "-state").val(address.administrativeArea || "");
+              this.$("#" + this.model.cid + "-zip").val(address.postalCode || "");
+              this.$("#" + this.model.cid + "-country").val(address.country || "");
         		}
 
         		//If this EML Party is new/empty, then add the new class