From d85e0b96dca88a770e5e0082249cdcd2a2b7828a Mon Sep 17 00:00:00 2001
From: Jonathan Rehm <jonathan@rehm.me>
Date: Sat, 22 Jul 2017 11:11:14 -0700
Subject: [PATCH] Prevent jQuery from cache busting static assets

If the HTML that's returned from the `$.get` request contains a `<script src="..."/>` tag it loads the JavaScript file via ajax, and by default it attaches a timestamp to it to bust cache. That means the file loads every time the modal is opened, and the browser treats it as a new file each time. The result is that code fires multiple times and events listeners are added multiple times.
---
 cps/static/js/main.js | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index 04b00712..d2cd99da 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -4,6 +4,11 @@ var updateText;
 
 $(function() {
 
+    // Allow ajax prefilters to be added/removed dynamically
+    // eslint-disable-next-line new-cap
+    const preFilters = $.Callbacks();
+    $.ajaxPrefilter(preFilters.fire);
+
     function restartTimer() {
         $("#spinner").addClass("hidden");
         $("#RestartDialog").modal("hide");
@@ -122,15 +127,24 @@ $(function() {
     });
 
     $("#bookDetailsModal")
-      .on("show.bs.modal", function(e) {
-        var $modalBody = $(this).find(".modal-body");
-        $.get(e.relatedTarget.href).done(function(content) {
-          $modalBody.html(content);
+        .on("show.bs.modal", function(e) {
+            const $modalBody = $(this).find(".modal-body");
+
+            // Prevent static assets from loading multiple times
+            const useCache = (options) => {
+                options.async = true;
+                options.cache = true;
+            };
+            preFilters.add(useCache);
+
+            $.get(e.relatedTarget.href).done(function(content) {
+                $modalBody.html(content);
+                preFilters.remove(useCache);
+            });
+        })
+        .on("hidden.bs.modal", function() {
+            $(this).find(".modal-body").html("...");
         });
-      })
-      .on("hidden.bs.modal", function() {
-        $(this).find(".modal-body").html("...");
-      });
 
     $(window).resize(function(event) {
         $(".discover .row").isotope("reLayout");