Refresh of html sidebar and dropdown menu Javascript function error - javascript

I am new to html & javascript and have been following along with an online course regarding a leaflet webmap application.
I have a drop down menu in my sidebar which enables the user to filter the locations by category, and a function that does a refresh of the sidebar and dropdown menu after every filter selection and is called at the beginning when the web application starts as well.
When I run my index.html code in Chrome locally, the console states an error with the html header tag in my refreshCCP function ("Uncaught SyntaxError: Invalid or unexpected token"), but cannot see a problem with it:
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
The above line of code is found at the bottom of the script area in the refreshCCP function
All HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Router</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.0/dist/leaflet.css">
<link rel="shortcut icon" href="">
<link rel="shortcut icon" href="#">
<script src="https://unpkg.com/leaflet#1.9.0/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
#header {
height: 85px;
background-color:darkgoldenrod;
}
#mapdiv {
height: 650px;
background-color:salmon;
}
#side_panel {
height: 650px;
background-color:beige;
}
#footer {
height: 85px;
background-color:darkgrey;
}
</style>
</head>
<body>
<div id="header" class="col-md-12">
<h1 class="text-center">CCP Finder</h1>
</div>
<div id="side_panel" class="col-md-3"> //
<h1 class="text-center">Search Panel</h1>
<!-- dropdown filter box -->
<select id = "filter" class="form-control">
<option value="All">All CCP</option>
<option value="ex1">ex1 CCP</option>
<option value="ex2">ex2 CCP</option>
</select>
</div>
<div id="mapdiv" class="col-md-9"></div>
<div id="footer" class="col-md-12">
<h4 id="map_coords" class="text-center">Latitude:53.4 Longitude: -113.7 Zoom Level: 10.5</h4>
<h4 class="text-center">©2022 xxxx
</h4>
</div>
<script>
var mymap = L.map('mapdiv')
mymap.setView([53.4, -113.7], 10.5);
var backgroundLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');
mymap.addLayer(backgroundLayer);
var lyrCCP;
<!-- Refresh sidepanel and filter dropdown function -->
refreshCCP();
mymap.on('mousemove', function(e){
var str = "Latititude: "+e.latlng.lat.toFixed(5)+" Longitude: "+e.latlng.lng.toFixed(5)+" Zoom Level: "+mymap.getZoom();
$("#map_coords").html(str);
});
<!-- Refresh sidepanel and filter dropdown function -->
function refreshCCP(){
$.ajax({
url:'load_ccp.php',
type: 'POST',
data:{filter:$("#filter").val()},
success:function(response){
if (lyrCCP) {
mymap.removeLayer(lyrCCP);
$("#side_panel").html("<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>");
};
lyrCCP=L.geoJSON(JSON.parse(response), {pointToLayer: function(feature,latlng) {
var str = "<hr>CCP Number:<h4>"+feature.properties.cp_no+"</h4>";
str += "<hr>River Name: <h4>"+feature.properties.river+"</h4>";
str += "<img src='img/"+feature.properties.tactic+"' width = '200px'></img>";
return L.circleMarker(latlng).bindPopup(str);
}});
lyrCCP.addTo(mymap);
mymap.fitBounds(lyrCCP.getBounds());
}});
$("#filter").change(function(){
refreshCCP();
});
</script>
</body>
</html>

In order to get it to work, you need to send a template literal instead of a string by using the grave character:
$("#side_panel").html(
`<h1 class='text-center'>Search Panel</h1>
<select id='filter' class = 'form-control'>
<option value='All'>All CCP</option>
<option value='ex1'>ex1 CCP</option>
<option value='ex2'>ex2 CCP</option>
</select>`);

Related

Why Jquery not hiding my div with bootstrap classes instead working with bootstrap row?

I am trying to hide two div in my html using jquery. one is working fine but other is not working.
The div which is working has just one class class='row' and the div which is not working has class='p-2 d-flex pt-3'
when i change class of this not working div to row then it works. I dont know why this is not working with other classes?
$("#selOpt").change(function() {
$(this).find("option:selected").each(function() {
var value = $(this).attr("value");
if (value == 'wic') {
$("#cus-note").hide();
$("#cus-dues").hide();
} else {
$("#cus-note").show();
$("#cus-dues").show();
}
});
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selOpt" multiple>
<option value="">Select...</option>
<option value="wic">Wic</option>
<option value="foo">Foo</option>
</select>
<!-- working -->
<div class="row cus-note" id="cus-note">
<textarea type="text" class="form-control note-field" name="cust_note" value="" id="cust_note" placeholder="New Note..." required></textarea>
</div>
<!-- not working -->
<div class="p-2 d-flex pt-3" id="cus-dues">
<div class="col-8">Dues</div>
<div class="ml-auto" id="cust_dues"></div>
</div>
The div which is not working has class='p-2 d-flex pt-3' is actually for d-flex class. Because d-flex class having display property with value flex and it is forcing by !important
the css rule of d-flex are given bellow
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
So when you trying to hide that div via jQuery hide() method it trying to add an inline css style="display: none;" but unfortunately it is overwritten by display: flex!important; that's why your div should not hide.
You can create a class with display: none!important; and add/remove this class instead of show()/hide()
Example of css rule:
html body .display-none {
display: none!important;
}
Note: I create this rule by nesting html and body so that this rule can get high priority. Also, it will be better if you put this CSS at the last of your all CSS so priority will be higher.
$("#selOpt").change(function() {
$(this).find("option:selected").each(function() {
var value = $(this).attr("value");
if (value == 'wic') {
$("#cus-note").addClass('display-none');
$("#cus-dues").addClass('display-none');
} else {
$("#cus-note").removeClass('display-none');
$("#cus-dues").removeClass('display-none');
}
});
}).change();
I given here the snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
html body .display-none {
display: none!important;
}
</style>
</head>
<body>
<select id="selOpt" multiple>
<option value="">Select...</option>
<option value="wic">Wic</option>
<option value="foo">Foo</option>
</select>
<!-- working -->
<div class="row cus-note" id="cus-note">
<textarea type="text" class="form-control note-field" name="cust_note" value="" id="cust_note" placeholder="New Note..." required></textarea>
</div>
<!-- not working -->
<div class="p-2 d-flex pt-3" id="cus-dues">
<div class="col-8">Dues</div>
<div class="ml-auto" id="cust_dues"></div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
$("#selOpt").change(function() {
$(this).find("option:selected").each(function() {
var value = $(this).attr("value");
if (value == 'wic') {
$("#cus-note").addClass('display-none');
$("#cus-dues").addClass('display-none');
} else {
$("#cus-note").removeClass('display-none');
$("#cus-dues").removeClass('display-none');
}
});
}).change();
</script>
</body>
</html>

Bootstrap Multiselect - unselect by onclick

I'm using the Bootstrap-Multiselect function; I want to unselect an option when I click on "x".
This is a simple example of what I'm looking for.
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
$('#tags').find('[value=' + tag + ']').prop('selected', false);
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
This could be achieved by unselecting all then getting the selected values and remove the target tag from them and reselect the rest of them then finally refresh the select :
$(document).on("click", '#remove', function(a) {
var tag = this.getAttribute("value");
var values = $('#tags').val();
if(values){
$('#tags').selectpicker('deselectAll');
$('#tags').selectpicker('val', values.filter(function(e) {return e !== tag }));
$('#tags').selectpicker('refresh');
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id='tags' data-style="btn-primary" multiple data-max-options="2">
<option value='Php' selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div value='Php' id='remove'>x</div>
</div>
</body>
</html>
I think that you should not use the value attribute in a div element, since it was not designed the job you are trying to do (see here). You can use a data-tag="php" for example, and when writing html I think is best to use " instead of ' too, but the browser do the trick.
In the select element, you wrote the id tags with the first letter in "caps lock"
and then in the javascript code you use #tags, see:
<select class="selectpicker" id='Tags' data-style="btn-primary" multiple data-max-options="2">
$('#tags').find('[value=' + tag + ']').prop('selected', false);
After that, you just need to remove the selected element from the array and set the values again, see a working example:
jQuery(document).ready(function($) {
$(document).on("click", '#remove', function(a) {
var removed = $(this).data('value')
var values = $("#tags").val()
var index = values.indexOf(removed)
if (index != -1) {
values.splice(index, 1)
$('#tags').selectpicker('val', values);
}
});
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Select demo</h1>
<select class="selectpicker" id="tags" data-style="btn-primary" multiple data-max-options="2">
<option value="Php" selected>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</select>
<div data-value="Php" id="remove">x</div>
</div>
</body>
</html>

How to fix the bug on Firefox c select?

https://plnkr.co/edit/z2uW4O6D1uLFnsoLjWeb?p=preview
When mouse hovering over the block, the select must show. When you open the select and point at one of the options, the options should disappear immediately.
That works fine in chrome but not in Firefox. any idea how to fix this in FF?
var app = angular.module('angularjs-starter', []);
app.controller('SpicyCtrl', function($scope) {
$scope.spice = 'very';
});
.box {
width: 250px;
height: 250px;
background: #ccc;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Controller example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Welcome</h1>
<div>Controller example</div>
<div ng-controller="SpicyCtrl">
<div class="box" ng-mouseover="active_dropdown = true"
ng-mouseleave="active_dropdown = false">
<div ng-show="active_dropdown">
<select name="" id="">
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
</select>
</div>
</div>
</div>
</body>
</html>
The problem is in Firefox, when you select dropdown it considers mouseleave for class="box" and sets,
active_dropdown = false
What you can do is instead of ng-mouseleave="active_dropdown = false" you can give it a function ng-mouseleave="test($event)".
Now in you app.js add the function
$scope.test = function (event) {
if (event.target.tagName !== 'SELECT') { // Update the code accordingly
$scope.active_dropdown = false;
}
}

HTML Select2 alignment with inline buttons

I'm fairly new to web programming. I'm trying to make a simple Select2 picker and then have buttons next to it. The problem i'm having is I cant seem to figure out how to get the "Clear" and "All" buttons to Align evenly with the top of the select2 picker.
I say aligned with the top because as I add more selections to the multipicker, it will grow vertically. So I'm trying to make the buttons center aligned with the picker while there is nothing or just one thing selected. I'm using some Velocity template code in there too but I'm pretty sure thats all ok. All of the AUI classes used for formatting is from Atlassian Jira. Here is a link to my
http://jsbin.com/lejixo/edit?html,output
JS Bin on jsbin.com
Any Suggestions??
<html>
<head>
<!-- External dependencies -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-experimental.js"></script>
<script src="//aui-cdn.atlassian.com/aui-adg/6.0.0/js/aui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui.css" />
<link rel="stylesheet" type="text/css" href="//aui-cdn.atlassian.com/aui-adg/6.0.0/css/aui-experimental.css" />
<!-- / External dependencies -->
</head>
<body>
<section id="content" role="main">
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
<form id="admin" class="aui" action="" method="POST" enctype="multipart/form-data">
<div class="aui-group">
<div class="aui-item">
<div class="field-group">
<label for="baseline">Baseline(s):</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
var $exampleMulti = AJS.$("#baseline").auiSelect2({
placeholder: "All"
});
AJS.$(".js-programmatic-multi-set-val").on("click", function() {
$exampleMulti.val(["CA", "AL"]).trigger("change");
});
AJS.$(".js-programmatic-multi-clear").on("click", function() {
$exampleMulti.val(null).trigger("change");
});
});
</script>
<script>
console.log($baselineD.class.name);
</script>
<div class="input-group">
<select id="baseline" name="baseline" style="width: 170px" value="${baseline}" multiple="">
#foreach($baseline in $instance.getAllBaselines())
<option value="${baseline}">$baseline</option>
#end
#set ($listType = "java.util.ArrayList")
#if($baselineD.class.name == $listType)
#foreach( $bl in ${baselineD})
#if(${bl})
<option selected="selected">${bl}</option>
#end
#end
#else
#if ( $baselineD )
<option selected="selected">${baselineD}</option>
#end
#end
</select>
<div class="aui-buttons input-group-btn" role="group">
<button type="button" class="aui-button js-programmatic-multi-set-val btn btn-default">
All
</button>
<button type="button" class="aui-button js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div>
</div>
</div>
<div class="field-group">
<label for="priority">Priority:</label>
<!-- Trigger -->
<script type="text/javascript">
AJS.$(function() {
AJS.$("#priority3").auiSelect2({
placeholder: "All"
});
});
</script>
<select id="priority3" name="priority" style="width: 170px" value="${priority}">
#if(${priorityD})
<option selected="selected">${priorityD}</option>
#end
##<option value="All">All</option>
#foreach( $priority in $instance.getPriorities())
<option value="${priority}">$priority</option>
#end
</select>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</section>
</body>
</html>
Add this CSS to this line and it will always stay centered to the right no matter if the height changed.
<div class="aui-buttons input-group-btn" role="group" style="margin-left:12px;position:absolute;top: 50%; transform: translateY(-50%);">
You can add this to a class or keep it inline as I did. I did it this way so you can see where to place it.
Also you can change the margin-left:12px; to whatever you want.

Jquery Mobile - events wont bind after using $.mobile.navigate

When I use $.mobile.navigate to change the page, the page will load but the my custom script won't bind to the elements. If I refresh the page, the custom script will load and bind to the elements. I have a select element to choose between pages:
<select name="calc-Nav" id="calc-Nav">
<option value="a.php">A</option>
<option value="b.php">B</option>
<option value="c.php">C</option>
</select>
This is the event bound to the select element:
$("#calc-Nav").on("change", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
Also, I link to my javascript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Does anyone have any ideas how to make this work?
thanks.
EDIT:
Here is the template used for all pages
This is the standard Template of each of the pages.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<div data-role="header">
<div class="ui-field-contain">
<select name="calc-Nav" id="calc-Nav">
<option value="Index.php">Home</option>
<option value="a.php">a</option>
<option value="b.php">b</option>
<option value="c.php">c</option>
</select>
</div>
</div>
<div data-role="main" class="ui-content">
<div id="index">
<h1> Form goes Here. </h1>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="js/formulas.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</html>
you need to bind them to the document
try-
$(document).on("change","#calc-Nav", function (e) {
var opt = $("#calc-Nav option:selected").val();
if (opt) {
e.preventDefault();
$.mobile.navigate(opt);
}
});
also be sure to add the link to your custom script after the jqmobile script

Categories