rerender dropdown options

index.js

@@ -10,4 +10,4 @@ import './index-formhandler.js'
 import './index-dropdown.js'
 import './index-event.js'
 import './index-leaflet.js'
-// import './index-filterhandler.js'
+import './index-filterhandler.js'

src/dropdown.js

@@ -17,7 +17,7 @@ var default_options = {
 export function dropdown(js_options) {
   var self = $(this)
   var options = deepmerge(default_options, js_options)
-  // ideally, parsing a hash should have a searchList propety
+
   var hash = parse(location.hash.replace(/^#/, ''))
 
   self.html(_.template(default_templates['template_dropdown'])(options))
@@ -25,11 +25,12 @@ export function dropdown(js_options) {
   if (options.data) {
     render(options.data)
     // trigger 'load' event
+    console.log("dropdown loaded", options.key)
     self.trigger({type: 'load'})
   }
   else if (options.url) {
     render(['Loading...'])
-    $.ajax(options.url)
+  $.ajax(options.url)
       .fail(function(xhr, status, message) {
         // load error template
         self.html(_.template(default_templates['template_error'])({message: message}))
@@ -56,7 +57,6 @@ export function dropdown(js_options) {
     self.find('.selectpicker').html(_.template(default_templates['template_dropdown_options'])(options))
     self.find('.selectpicker').selectpicker(options.options)
     if (options.key) {
-      // hash.searchList still has ','
       self.find('.selectpicker').selectpicker('val', hash.searchList[options.key])
     }
   }

src/filterhandler.js

 import { parse } from './url.js'
 import { dropdown } from './dropdown.js'
+
 if (typeof jQuery != 'undefined') {
   jQuery.extend(jQuery.fn, {
     dropdown: dropdown
@@ -7,27 +8,26 @@ if (typeof jQuery != 'undefined') {
 }
 
 var defaults = {
-target: '',
-  limit: 100,
-  sort: 'asc'
-  // mode: 'pushState'
+  target: ''
 }
 
 export function filterhandler(js_options) {
   var js_options = $.extend({}, defaults, js_options)
   var $this = $(this)
-  var g_url = parse(location.hash.replace(/^#/, ''))
   var base_url = js_options['url']
   var cols = js_options['cols']
   var target = js_options['target']
 
-  g_url.update({
-    '_c': cols
-  })
+  function fetch_filters() {
+    var g_url = parse(location.hash.replace(/^#/, ''))
+    g_url.update({
+      '_c': cols
+    })
 
-  // $.ajax(base_url + '?' + parse(g_url.hash.replace(/^#/, '')), {
-  $.ajax('/' + base_url + '?' + g_url.search)
-    .done(done)
+    $.ajax('/' + base_url + '?' + g_url.search)
+      .done(done)
+  }
+  fetch_filters()
 
   function done(data) {
     // convert this into a dropdown filter & append into `$this`
@@ -36,18 +36,24 @@ export function filterhandler(js_options) {
         return k[key]
       })
 
-      // create a dropdown and append it to `$this`
-      // TODO: generate the node elem from a template
-      var dd = $('<div></div>').dropdown({
+      $(document).on('load', '#' + key + ':parent',  function() {
+        // console.log("$$$$$$$$$$$$$$$$$$$$$$$$")
+      })
+      $(document).on('change', '#'+key, function () {
+        // console.log("loaded")
+        fetch_filters()
+      })
+
+      if ($('#' + key).length > 0)
+        $('#' + key).closest('.dropdown').parent().remove()
+
+      $('<div></div>').dropdown({
         key: key,
         data: options,
         target: target
-      })
-      dd.appendTo($this)
+      }).appendTo($this)
     })
   }
 
-  $('body').find('.selectpicker').selectpicker('refresh')
-
   return this
-}
\ No newline at end of file
+}

test/test-filterhandler.html

@@ -18,13 +18,10 @@
 <script src="../node_modules/popper.js/dist/umd/popper.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="../node_modules/lodash/lodash.min.js"></script>
-<script src="../node_modules/moment/min/moment.min.js"></script>
-<script src="../node_modules/numeral/min/numeral.min.js"></script>
 <script src="../node_modules/d3/build/d3.js"></script>
-<script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
 <script src="../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
-<script src="../dist/urlfilter.min.js"></script>
-<script src="../dist/filterhandler.min.js"></script>
+<!-- <script src="../dist/filterhandler.min.js"></script> -->
+<script src="../dist/g1.min.js"></script>
 <script src="tape.js"></script>
 
 <script type="text/javascript">