Merge pull request #891 from MITx/feature/victor/capa-ajax

Feature/victor/capa ajax

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

@@ -41,20 +41,30 @@ 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)
+        # Need to use the DOM elements directly or the scripts won't execute
+        # properly.
+        $('head')[0].appendChild(s)
+      else
+        # just call the completion callback directly, without reloading the file
+        completionHandlerGenerator(index)()
       $(placeholder).remove()
+        
+      

common/static/js/capa/chemical_equation_preview.js

 (function () {
-    var preview_div = $('.chemicalequationinput .equation');
-    $('.chemicalequationinput input').bind("input", function(eventObject) {
-        $.get("/preview/chemcalc/", {"formula" : this.value}, function(response) {
-            if (response.error) {
-                preview_div.html("<span class='error'>" + response.error + "</span>");
-            } else {
-                preview_div.html(response.preview);
-            }
-          });
-    });
+    update = function() {
+        preview_div = $(this).siblings('div.equation');
+
+        function create_handler(saved_div) {
+            return (function(response) {
+                if (response.error) {
+                    saved_div.html("<span class='error'>" + response.error + "</span>");
+                } else {
+                    saved_div.html(response.preview);
+                }
+            });
+        }
+
+        $.get("/preview/chemcalc/", {"formula" : this.value}, create_handler(preview_div));
+    }
+
+    inputs = $('.chemicalequationinput input');
+    // update on load
+    inputs.each(update); 
+    // and on every change
+    inputs.bind("input", update);
 }).call(this);