I am working on a university project that consists of creating a map application with openlayers as well as the necessary User-Interface. I am using jQuery, native JavaScript, PHP and of course HTML/CSS
The problem I have (mostly because I am not that experienced in web development with jQuery and JavaScript) is that I have lots of code inside a jQuery click callback function or an ajax success-callback . I have the feeling that this way is not the right way and also somehow overloaded. I did not find answers while googling around that deal with this specific problem and provide a better way.
To give you an example here is the code of one js-file I was currently working on. I want to post the full code to illustrate my dilemma.
The general purpose of this file is to load step by step UI elements with specific content fetched from a database, as well as updating or removing when certain contents are chosen.
var $info_panel = $("#route-update-info-panel"); //global -> namespace from sources.js// eventually put html code in hidden divs and show them step by step?!$("#route-update-get-dataset").click(function() { if ($("#update-routes-select-container").length) { $("#update-routes-select-container").remove(); $("#route-update-get-data").remove(); $("#update-slider-container").remove(); $("#update-single-routes-container").remove(); $("#route-update-button-container").remove(); } var $route_type = $("#route-update-routelist").val(); if (!$route_type) { $info_panel.html('<p>Routeklasse auswählen!</p>'); return; } else { $info_panel.html(''); $(`<div id="update-routes-select-container" class="input-field col s12"><select id="update-routes-select"><option value="" disabled selected>zu bearbeitende Route auswählen</option></select></div>`) .appendTo('#update-routes'); } $route_list = $("#update-routes-select"); $route_list.on('contentChanged', function() { $(this).material_select(); }); // https://stackoverflow.com/questions/29132125/how-to-dynamically-modify-select-in-materialize-css-framework $.post('get_dataset.php', { route_type: $route_type },function(data, status) { $(data).appendTo("#update-routes-select"); $route_list.trigger('contentChanged'); $(`<button id="route-update-get-data" class="btn waves-effect waves-light" type="submit" name="action">Bearbeiten<i class="material-icons right">create</i></button>`) .appendTo("#update-routes"); });});var slider3; // bad globals -> namespace from sources.js$("#update-routes").on('click', '#route-update-get-data', function(evt) { $id = $("#update-routes-select").val(); $route_type = $("#route-update-routelist").val(); if (!$id) { $info_panel.html('<p>Route auswählen!</p>'); return; } else { $info_panel.html(''); } $.post('get_data.php', { id: $id, route_type: $route_type }, function(data, status) { removeFromMap([ { map_identifier: 'name', val: 'updateRouteLayer' } ]); var geojson = new ol.format.GeoJSON(); var features = geojson.readFeatures(data, { defaultDataProjection: 'EPSG:4326', featureProjection:'EPSG:3857' } ); var updateRouteVectorSource = new ol.source.Vector({ features: features }); var updateRouteVectorLayer = new ol.layer.Vector({ name: 'updateRouteLayer', source: updateRouteVectorSource, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'tomato', width: 4 }) }) }); var feature = features[0]; var extent = updateRouteVectorSource.getExtent(); map.addLayer(updateRouteVectorLayer); map.getView().fit(extent, { size: map.getSize(), duration: 500 }); var s_pav = parseInt(feature.get('s_pav')*100); if (!$("#update-slider-container").length) { $(`<div id="update-slider-container"><p>Anteil von befestigtem und unbefestigtem Belag wählen</p><div id="update-route-surface-choice-slider"></div> <div id="update-route-surface-choice-vals"></div></div>`) .appendTo("#update-routes"); slider3 = document.getElementById('update-route-surface-choice-slider'); noUiSlider.create(slider3, { start: [s_pav], connect: [true, true], behaviour: 'drag', step: 1, tooltips: false, orientation: 'horizontal', // 'horizontal' or 'vertical' range: {'min': 0,'max': 100 }, format: wNumb({ decimals: 0 }) }); } else { slider3.noUiSlider.set(s_pav); } var update_pav, update_unpav; slider3.noUiSlider.on('update', function() { update_pav = slider3.noUiSlider.get(); update_unpav = 100-slider3.noUiSlider.get(); $('#update-route-surface-choice-vals').html(`<p>befestigt: ${update_pav} % | unbefestigt: ${update_unpav} %</p>`); }); var art = parseInt(feature.get('art')); if (!$("#update-single-routes-container").length) { $(`<div id="update-single-routes-container" class="input-field col s12"><select id="route-update-routetype" multiple><option id="update-routetype-select-heading" value="" disabled selected>Routentyp wählen</option></select></div>`) .appendTo("#update-routes"); $update_route_type = $("#route-update-routetype"); $update_route_type.on('contentChanged', function() { $(this).material_select(); }); } $("#update-routetype-select-heading") .nextAll() .each(function(i, elem) { elem.remove(); }); // very ugly but until now it does the job :) switch(art) { case 1: $(`<option value="001" selected>naturnah</option><option value="010">stadtnah</option><option value="100">innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 2: $(`<option value="001">naturnah</option><option value="010" selected>stadtnah</option><option value="100">innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 3: $(`<option value="001" selected>naturnah</option><option value="010" selected>stadtnah</option><option value="100">innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 4: $(`<option value="001">naturnah</option><option value="010">stadtnah</option><option value="100" selected>innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 5: $(`<option value="001" selected>naturnah</option><option value="010">stadtnah</option><option value="100" selected>innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 6: $(`<option value="001">naturnah</option><option value="010" selected>stadtnah</option><option value="100" selected>innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; case 7: $(`<option value="001" selected>naturnah</option><option value="010" selected>stadtnah</option><option value="100" selected>innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; default: $(`<option value="001">naturnah</option><option value="010">stadtnah</option><option value="100">innerstädtisch</option>`) .appendTo("#route-update-routetype"); $update_route_type.trigger('contentChanged'); break; } if (!$("#route-update-button-container").length) { $(`<div id="route-update-button-container"><button id="update-route-send" class="btn waves-effect waves-light" type="submit" name="action">Abschicken<i class="material-icons right">send</i></button> <button id="update-route-reset" class="btn waves-effect waves-light" type="submit" name="action">Zurücksetzen<i class="material-icons right">delete</i></button></div>`) .appendTo("#update-routes"); });});At the moment this file is not finished at all but while writing the code that feeling mentioned above grew bigger and bigger. Any help or advice, criticism is greatly appreciated on how to write not such overloaded callback functions...
