headphones/data/interfaces/default/extras.html

<%inherit file="base.html" />

<%def name="body()">
	<div class="title">
		<h1 class="clearfix"><i class="fa fa-users"></i> Artists You Might Like</h1>
	</div>
	<div class="table_wrapper">
		<div class="cloudtag">
			<ul id="cloud">
			%for artist in cloudlist:
				<%--
					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>