Update extras.html

More modernisation.

data/interfaces/default/extras.html

@@ -1,4 +1,5 @@
 <%inherit file="base.html" />
+
 <%def name="body()">
 	<div class="title">
 		<h1 class="clearfix"><i class="fa fa-users"></i> Artists You Might Like</h1>
@@ -7,9 +8,54 @@
 		<div class="cloudtag">
 			<ul id="cloud">
 			%for artist in cloudlist:
-				<li><a href="addArtist?artistid=${artist['ArtistID']}" class="tag${artist['Count']}">${artist['ArtistName']}</a></li>
+				<%--
+					Modified the anchor tag to use data attributes for AJAX
+					and href="#" to prevent default navigation.
+				--%>
+				<li>
+					<a href="#" class="tag${artist['Count']} add-artist-link"
+					   data-artist-id="${artist['ArtistID']}"
+					   data-artist-name="${artist['ArtistName']}">
+						${artist['ArtistName']}
+					</a>
+				</li>
 			%endfor
 			</ul>
 		</div>
 	</div>
 </%def>
+
+<%def name="javascriptIncludes()">
+	${parent.javascriptIncludes()} <%-- Ensure parent javascript includes are kept --%>
+
+	<script>
+		$(document).ready(function() {
+			// Delegated event handler for 'add-artist-link' class
+			$('#cloud').on('click', '.add-artist-link', function(e) {
+				e.preventDefault(); // Prevent the default link behavior (page navigation)
+
+				var $this = $(this);
+				var artistId = $this.data('artist-id');
+				var artistName = $this.data('artist-name'); // Get artist name for feedback
+
+				// Assuming 'doAjaxCall' is available globally (from common.js or similar)
+				// and handles displaying success/error messages.
+				if (typeof doAjaxCall === 'function') {
+					doAjaxCall('addArtist?artistid=' + artistId, $this, 'simple',
+						'Artist "' + artistName + '" added successfully!');
+
+					// Optionally, fade out or remove the artist from the list after adding
+					$this.closest('li').fadeOut(500, function() {
+						$(this).remove();
+					});
+
+				} else {
+					console.error("doAjaxCall function is not defined. Cannot add artist asynchronously.");
+					// Fallback: allow the default link behavior if AJAX is not possible
+					// window.location.href = 'addArtist?artistid=' + artistId;
+					// Or just log an error and do nothing if page reload is not desired.
+				}
+			});
+		});
+	</script>
+</%def>