javascript - How to dynamically create input range element (and its event handler) inside ajaxStop -
i new js development , ajax. i'm trying writing webpage requests data server using ajax , uses data draw sets of geojson features on map leaflet (these feature sets must toggleable draw/undraw i'm using leaflet's built-in functionality this). because don't want run problems loading, have had put of dynamic creation code in 'ajaxstop' callback (ie code run after ajax calls have finished).
part of need add variable number of slider bars (this depends on whether or not particular feature set has time component). have naively put code , code attach onchange event handler in ajaxstop callback. slider bar created, event listener not exist (nothing happens when move slider bar around when added debug statements event handler).
how should work: slider goes 1 time period (corresponding minimum , maximum time in time based feature set). when slider bar moved, feature set should change ones times less slider bar value in array of ilayers feature set (basically container set of features allows feature sets toggleable on leaflet map). old global variable arrays of ilayers removed @ start of event handler, updated, re-added map. except time slider thing works.
is right way add slider bar , event handler in js? haven't isolated issue sure, considering have created dom elements , event handlers dynamically in past no trouble, have feeling issue came because code in ajaxstop.
i appreciate advice if else dealt before. realize code looks horrible right now, need working in capacity before can clean things up. didn't include global variable declarations , rest of code conciseness (the post massive enough is).
$(document).ajaxstop(function() { var feat_num = 0; (var gview = 0; gview < geoviews.length; ++gview) { var layers = geoviews[gview].layers; println("geoview " +gview +": " +geoviews[gview].descriptor); (var lay = 0; lay < layers.length; ++lay) { var features = geoviews[gview].layers[lay].features; var ilayers = new array(features.length); var layer_min = number.positive_infinity; var layer_max = number.negative_infinity; var times = []; (var feat = 0; feat < features.length; ++feat, ++feat_num) { geoviews[gview].layers[lay].features[feat] = feats[feat_num]; var propsstring = feats[feat_num].properties; var props = json.parse(propsstring.replaceall("'", '"')); if (props.hasownproperty("time")) { if (props.time < layer_min) layer_min = props.time; if (props.time > layer_max) layer_max = props.time; times.push(props.time); } ilayers[feat] = l.geojson.geometrytolayer(feats[feat_num], null); } println("\u00a0" +"layer " +lay +": " +layers[lay].uid); //adds features overlay array on start var layer = geoviews[gview].layers[lay]; layer.layergroup = l.layergroup(ilayers); l.tilelayer(mburl, {id: mapid, attribution: mbattr}); overlays[layer.uid] = layer.layergroup; if (layer_max > number.negative_infinity) { print("\u00a0\u00a0\u00a0\u00a0\u00a0"); print(new date(layer_min)); var s = addslider(log, layer.uid, layer.features, layer_min, layer_max); sliders.push(s); //****this not working (start)**** s.addeventlistener("onchange", function() { //not working var ilayers; var time = slider.value; map.removecontrol(overlays); (var i; < slider.possible.length; ++i) { var props = json.parse(slider.possible[i].properties.replaceall("'", '"')); if (props.time <= time) { ilayers[i] = l.geojson.geometrytolayer(slider.possible[i], null); } } overlays[slider.uid] = ilayers; alert("trigger"); l.control.layers(null, overlays).addto(map); }); //****this not working (end)**** log.appendchild(s); print(new date(layer_max)); } } l.control.layers(null, overlays).addto(map); println(" "); } });
i able fix issue sticking original idea , using leaflet slider bar plug-in. adding event handler unnecessary because plug-in deals adding/removing features based on provided property ('time' default) based on slider bar.
Comments
Post a Comment