From 63bd3117470b16325bd808b1b68d5d922a0fe156 Mon Sep 17 00:00:00 2001
From: =?utf8?q?David=20=E2=80=98Bombe=E2=80=99=20Roden?=
 <bombe@pterodactylus.net>
Date: Thu, 21 Oct 2010 15:22:07 +0200
Subject: [PATCH] Duplicate IDs are not allowed in HTML and do make problems.
 Use classes.

---
 src/main/resources/static/css/sone.css             | 4 ++++
 src/main/resources/static/javascript/sone.js       | 4 ++--
 src/main/resources/templates/include/head.html     | 2 +-
 src/main/resources/templates/include/viewSone.html | 3 ++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css
index 1d426ed..da01622 100644
--- a/src/main/resources/static/css/sone.css
+++ b/src/main/resources/static/css/sone.css
@@ -239,6 +239,10 @@ textarea {
 	padding: 0.5ex;
 }
 
+#sone .sone .id {
+	display: none;
+}
+
 #sone .sone .profile-link {
 	display: block;
 }
diff --git a/src/main/resources/static/javascript/sone.js b/src/main/resources/static/javascript/sone.js
index 6420e5b..9c99bb2 100644
--- a/src/main/resources/static/javascript/sone.js
+++ b/src/main/resources/static/javascript/sone.js
@@ -93,13 +93,13 @@ function getSoneStatus(soneId) {
  *            The date and time of the last update (formatted for display)
  */
 function updateSoneStatus(soneId, status, modified, lastUpdated) {
-	$("#sone .sone#" + soneId).
+	$("#sone .sone." + soneId).
 		toggleClass("unknown", status == "unknown").
 		toggleClass("idle", status == "idle").
 		toggleClass("inserting", status == "inserting").
 		toggleClass("downloading", status == "downloading").
 		toggleClass("modified", modified);
-	$("#sone .sone#" + soneId + " .last-update span.time").text(lastUpdated);
+	$("#sone .sone." + soneId + " .last-update span.time").text(lastUpdated);
 }
 
 var watchedSones = {};
diff --git a/src/main/resources/templates/include/head.html b/src/main/resources/templates/include/head.html
index 7798af4..50cf77e 100644
--- a/src/main/resources/templates/include/head.html
+++ b/src/main/resources/templates/include/head.html
@@ -14,7 +14,7 @@
 		/* these functions are necessary for updating Sone statuses. */
 		$(document).ready(function() {
 			$("#sone .sone").each(function() {
-				watchSone($(this).attr("id"));
+				watchSone($(this).find(".id").text());
 			});
 		});
 	</script>
diff --git a/src/main/resources/templates/include/viewSone.html b/src/main/resources/templates/include/viewSone.html
index e7599bd..b12de4a 100644
--- a/src/main/resources/templates/include/viewSone.html
+++ b/src/main/resources/templates/include/viewSone.html
@@ -1,4 +1,5 @@
-<div id="<% sone.id|html>" class="sone <% sone.status|html><%if sone.modified> modified<%/if>">
+<div class="sone <% sone.status|html><%if sone.modified> modified<%/if> <% sone.id|html>">
+	<div class="id"><% sone.id|html></div>
 	<div class="unknown-marker" title="<%= View.Sone.Status.Unknown|l10n|html>">?</div>
 	<div class="modified-marker" title="<%= View.Sone.Status.Modified|l10n|html>">!</div>
 	<div class="download-marker" title="<%= View.Sone.Status.Downloading|l10n|html>">⬊</div>
-- 
2.7.4