added some javascript for input forms

Edirom · Jun 2, 2015 · f46a1ce · f46a1ce
1 parent d023661
commit f46a1ce
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 35 deletions.
diff --git a/resources/js/smufl-scripts.js b/resources/js/smufl-scripts.js
@@ -1,22 +1,31 @@
 /*
- * Some Javscript functions for SMuFL-Browser
+ * Some Javascript functions for SMuFL-Browser
  */
 
-function gotoPage(page) {
-/*    var data = $("#fun-query-form").serialize();*/
-    /*$.ajax({
-	    type: "POST",
-	    url: "ajax.html",
-	    data: data + "&action=search",
-	    success: function (data) {
-            $("#results").fadeOut(100, function() {
-                $(this).html(data);
-                $(this).fadeIn(100, function() {
-                    $(".signature").highlight();
-                });
-                timeout = null;
-            });
-	    }
-    });*/
-    console.log(page);
-}
+$.fn.facets = function ()
+{
+     this.selectize({
+        plugins: ['remove_button'],
+        hideSelected: true,
+        onDropdownClose: function(e){
+            var params = [];
+            /* Set filters */
+            $('option:selected').each(function() {
+                var facet = $(this).parent().attr('name');
+                var value = $(this).attr('value');
+                /*console.log(facet + '=' + value);*/
+                params.push(facet + '=' + encodeURI(value))
+            })
+
+            /* Refresh page */
+            self.location='?'+params.join('&')
+        }
+    })
+};
+
+/* Initialize selectize plugin for the input forms */
+$(document).ready(function()  {
+    $("#ranges-list").facets();
+    $("#glyphnames-list").facets();
+    $("#classes-list").facets();
+});
diff --git a/templates/page.html b/templates/page.html
@@ -26,22 +26,7 @@
         <script src="resources/js/jquery.min.js" type="text/javascript"/>
         <script src="resources/js/bootstrap.min.js" type="text/javascript"/>
         <script src="resources/js/selectize.min.js" type="text/javascript"/>
+        <script src="resources/js/smufl-scripts.js" type="text/javascript"/>
 
-        <script type="text/javascript">
-            $(document).ready(function()  {
-                 $("#ranges-list").selectize({
-                    plugins: ['remove_button'],
-                    hideSelected: true,
-                 });
-                $("#glyphnames-list").selectize({
-                    plugins: ['remove_button'],
-                    hideSelected: true
-                });
-                $("#classes-list").selectize({
-                    plugins: ['remove_button'],
-                    hideSelected: true
-                });
-            });
-        </script>
     </body>
 </html>