make loader only load scripts once per run, midway through fixing multiple chem equations per page

common/lib/xmodule/xmodule/js/src/javascript_loader.coffee

@@ -41,20 +41,26 @@ class @JavascriptLoader
           callbackCalled = true
           callback() if callback?
 
+    # Keep a map of what sources we're loaded from, and don't do it twice.
+    loaded = {}
     placeholders.each (index, placeholder) ->
       # TODO: Check if the script already exists in DOM. If so, (1) copy it
       #         into memory; (2) delete the DOM script element; (3) reappend it.
       #       This would prevent memory bloat and save a network request.
-      s = document.createElement('script')
-      s.setAttribute('src', $(placeholder).attr("data-src"))
-      s.setAttribute('type', "text/javascript")
+      src = $(placeholder).attr("data-src")
+      if src not of loaded
+        loaded[src] = true
+        s = document.createElement('script')
+        s.setAttribute('src', src)
+        s.setAttribute('type', "text/javascript")
+  
+        s.onload             = completionHandlerGenerator(index)
 
-      s.onload             = completionHandlerGenerator(index)
+        # s.onload does not fire in IE8; this does.
+        s.onreadystatechange = completionHandlerGeneratorIE(index)
 
-      # s.onload does not fire in IE8; this does.
-      s.onreadystatechange = completionHandlerGeneratorIE(index)
-
-      # Need to use the DOM elements directly or the scripts won't execute
-      # properly.
-      $('head')[0].appendChild(s)
-      $(placeholder).remove()
+        # Need to use the DOM elements directly or the scripts won't execute
+        # properly.
+        $('head')[0].appendChild(s)
+        $(placeholder).remove()
+      

common/static/js/capa/chemical_equation_preview.js

@@ -1,12 +1,22 @@
 (function () {
-    var preview_div = $('.chemicalequationinput .equation');
-    $('.chemicalequationinput input').bind("input", function(eventObject) {
-        $.get("/preview/chemcalc/", {"formula" : this.value}, function(response) {
+    update = function(index, input) {
+        preview_div = $(input).siblings('div.equation');
+
+        $.get("/preview/chemcalc/", {"formula" : input.value}, function(response) {
             if (response.error) {
                 preview_div.html("<span class='error'>" + response.error + "</span>");
             } else {
                 preview_div.html(response.preview);
             }
-          });
+        });
+    }
+
+    inputs = $('.chemicalequationinput input');
+    // update on load
+    inputs.each(update); 
+    // and on every change
+    inputs.bind("input", function(event) { 
+        // pass a dummy index
+        update(0, event.target); 
     });
 }).call(this);