diff --git a/attract/shots/routes.py b/attract/shots/routes.py
index 663b245..904c337 100644
--- a/attract/shots/routes.py
+++ b/attract/shots/routes.py
@@ -33,7 +33,7 @@ def index():
 
 
 @perproject_blueprint.route('/', endpoint='index')
-@perproject_blueprint.route('/with-task/<task_id>', endpoint='with-task')
+@perproject_blueprint.route('/with-task/<task_id>', endpoint='with_task')
 @attract_project_view(extension_props=True)
 def for_project(project, attract_props, task_id=None, shot_id=None):
     api = pillar_api()
diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js
index d4a883a..301df07 100644
--- a/attract/static/js/tasks.js
+++ b/attract/static/js/tasks.js
@@ -34,11 +34,16 @@
 /**
  * Shows a task in the #task-details div.
  */
-function task_open(task_id, project_url) {
-    if (task_id === undefined || project_url === undefined) {
+function task_open(task_id) {
+    if (task_id === undefined) {
         throw new ReferenceError("task_open(" + task_id + ") called.");
     }
 
+    var project_url = ProjectUtils.projectUrl();
+    if (typeof project_url === 'undefined') {
+        throw "ProjectUtils.projectUrl() undefined";
+    }
+
     $('#col_right .col_header span.header_text').text('Task details');
 
     $('[id^="task-"]').removeClass('active');
@@ -60,11 +65,16 @@ function task_open(task_id, project_url) {
 /**
  * Shows a shot in the #task-details div.
  */
-function shot_open(shot_id, project_url) {
-    if (shot_id === undefined || project_url === undefined) {
+function shot_open(shot_id) {
+    if (shot_id === undefined) {
         throw new ReferenceError("shot_open(" + shot_id + ") called.");
     }
 
+    var project_url = ProjectUtils.projectUrl();
+    if (typeof project_url === 'undefined') {
+        throw "ProjectUtils.projectUrl() undefined";
+    }
+
     $('#col_right .col_header span.header_text').text('Shot details');
 
     $('[id^="shot-"]').removeClass('active');
@@ -209,3 +219,18 @@ function shot_save(shot_id, shot_url) {
         type: 'shot'
     });
 }
+
+$(function() {
+    $("a.shot-link[data-shot-id]").click(function(e) {
+        e.preventDefault();
+        // delegateTarget is the thing the event hander was attached to,
+        // rather than the thing we clicked on.
+        var shot_id = e.delegateTarget.dataset.shotId;
+        shot_open(shot_id);
+    });
+    $("a.task-link[data-task-id]").click(function(e) {
+        e.preventDefault();
+        var task_id = e.delegateTarget.dataset.taskId;
+        task_open(task_id);
+    });
+});
diff --git a/attract/tasks/routes.py b/attract/tasks/routes.py
index 2ffbf00..7094dc5 100644
--- a/attract/tasks/routes.py
+++ b/attract/tasks/routes.py
@@ -24,7 +24,7 @@ def index():
 
 @perproject_blueprint.route('/', endpoint='index')
 @attract_project_view()
-def for_project(project):
+def for_project(project, task_id=None):
     api = pillar_api()
 
     tasks = pillarsdk.Node.all({
@@ -35,12 +35,16 @@ def for_project(project):
 
     return render_template('attract/tasks/for_project.html',
                            tasks=tasks['_items'],
+                           open_task_id=task_id,
                            project=project)
 
 
 @perproject_blueprint.route('/<task_id>')
 @attract_project_view(extension_props=True)
-def view_embed_task(project, attract_props, task_id):
+def view_task(project, attract_props, task_id):
+    if not request.is_xhr:
+        return for_project(project, task_id=task_id)
+
     api = pillar_api()
     task = pillarsdk.Node.find(task_id, api=api)
     node_type = project.get_node_type(node_type_task['name'])
diff --git a/src/templates/attract/layout.jade b/src/templates/attract/layout.jade
index 31f6cc1..7380208 100644
--- a/src/templates/attract/layout.jade
+++ b/src/templates/attract/layout.jade
@@ -17,7 +17,7 @@ html(lang="en")
 
 		| {% block style %}{% endblock %}
 
-	body("{% block bodyattrs %}{% endblock %}")
+	body("{% block bodyattrs %}{% if project %}data-project-url='{{ project.url }}'{% endif %}{% endblock %}")
 		#app-main
 			#col_sidebar
 				nav.sidebar(role="navigation")
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 841e525..9ce87cd 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -1,6 +1,5 @@
 | {% extends 'attract/layout.html' %}
 | {% block page_title %}Shots - {{ project.name }}{% endblock %}
-| {% block bodyattrs %}data-project-url="{{ project.url }}"{% endblock %}
 | {% block body %}
 #col_main
 	.col_header.task-list-header
@@ -29,23 +28,24 @@
 				.table-cell.shot-status
 				.table-cell.shot-thumbnail
 					a(
-						id="shot-link-{{ shot._id }}"
-						href="javascript:shot_open('{{ shot._id }}', '{{ project.url }}');",
-						class="status-{{ shot.properties.status }}")
+						data-shot-id="{{ shot._id }}",
+						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
+						class="status-{{ shot.properties.status }} shot-link")
 						img(src="http://placehold.it/100x60")
 				.table-cell.shot-name
 					a(
-						id="shot-link-{{ shot._id }}"
-						href="javascript:shot_open('{{ shot._id }}', '{{ project.url }}');",
-						class="status-{{ shot.properties.status }}")
+						data-shot-id="{{ shot._id }}",
+						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
+						class="status-{{ shot.properties.status }} shot-link")
 						span(class="shot-name-{{ shot._id }}") {{ shot.name }}
 				| {% for task_type in task_types %}
 				.table-cell.task-type(class="{{ task_type }}")
 					| {% for task in tasks_for_shots[shot._id][task_type] %}
 					a(
+						data-task-id="{{ task._id }}",
 						id="task-{{ task._id }}",
-						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
-						class="status-{{ task.properties.status }}")
+						href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
+						class="status-{{ task.properties.status }} task-link")
 					| {% endfor %}
 					| {% if not tasks_for_shots[shot._id][task_type] %}
 					a.task-add(
@@ -67,10 +67,10 @@ script.
 	ProjectUtils.setProjectAttributes({context: 'shot'});
 
 	{% if open_task_id %}
-		$(function() { task_open('{{ open_task_id }}', '{{ project.url }}'); });
+		$(function() { task_open('{{ open_task_id }}'); });
 	{% endif %}
 	{% if open_shot_id %}
-		$(function() { shot_open('{{ open_shot_id }}', '{{ project.url }}'); });
+		$(function() { shot_open('{{ open_shot_id }}'); });
 	{% endif %}
 
 
diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade
index 3215495..c3e7011 100644
--- a/src/templates/attract/tasks/for_project.jade
+++ b/src/templates/attract/tasks/for_project.jade
@@ -1,7 +1,6 @@
 | {% extends 'attract/layout.html' %}
 
 | {% block page_title %}Tasks - {{ project.name }} {% endblock %}
-
 | {% block body %}
 #col_main
 	.col_header.task-list-header
@@ -15,8 +14,9 @@
 		//- NOTE: this is tightly linked to the JS in tasks.js.
 		a.col-list-item.task-list-item(
 			id="task-{{task._id}}",
-			class="status-{{ task.properties.status }}",
-			href="javascript:task_open('{{ task._id }}', '{{ project.url }}');")
+			data-task-id="{{task._id}}",
+			class="status-{{ task.properties.status }} task-link",
+			href="{{ url_for('attract.tasks.perproject.view_task', project_url=project.url, task_id=task._id) }}")
 			span.status-indicator
 			span.name {{ task.name }}
 			span.type {{ task.properties.task_type }}
@@ -34,4 +34,8 @@
 | {% block footer_scripts %}
 script.
 	ProjectUtils.setProjectAttributes({context: 'task'});
+
+	{% if open_task_id %}
+		$(function() { task_open('{{ open_task_id }}'); });
+	{% endif %}
 | {% endblock %}