I have Fusion Table data that I would like to map on a web page and give users the ability to filter the geopoints using selection menus based on data in columns. I can do this using one column from the Fusion Table but I can't figure out how to do this using two or more columns. i.e./e.g. They can select/filter a column called 'Program' for entries labelled with 'GypsyMoth' and then further filter all these entries for 'TrapRteList' entries labelled 'NE'.
I have tried many, many ways of accomplishing this but so far no luck. Below is my best attempt but it will only select data from TrapRteList. How can get two column selections to update the map? I'm not a programmer (obviously) and have been banging my head against a wall for awhile now. None of the solutions I've found seem to work quite the way I want them to. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Tree Traps Map</title>
<style>
#map-canvas { width:1080px; height:768px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var pointTableID = '1EADJbmeOJj60i_jIMDPNwVt0SMYEwYsw8kuU3nwI';
var pointColumn = 'GPSpoint';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(53.637692, -113.422068),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Initialize the points layer
var pointsLayer = new google.maps.FusionTablesLayer({
query: {
select: pointColumn,
from: pointTableID
},
map: map,
styleId: 2,
templateId: 2
});
// -----------------------------------
google.maps.event.addDomListener(document.getElementById('Program'),
'change', function() {
updateMap(pointsLayer, pointTableID, pointColumn);
});
google.maps.event.addDomListener(document.getElementById('TrapRteList'),
'change', function() {
updateMap(pointsLayer, pointTableID, pointColumn);
});
}
// Update the query sent to the Fusion Table Layer based on
// the user selection in the select menu
function updateMap(pointsLayer, pointTableID, pointColumn) {
var Program = document.getElementById('Program').value;
if (Program) {
pointsLayer.setOptions({
query: {
select: pointColumn,
from: pointTableID,
where: "Program = '" + Program + "'"
}
});
} else {
pointsLayer.setOptions({
query: {
select: pointColumn,
from: pointTableID
}
});
}
var TrapRteList = document.getElementById('TrapRteList').value;
if (TrapRteList) {
pointsLayer.setOptions({
query: {
select: pointColumn,
from: pointTableID,
where: "TrapRteList = '" + TrapRteList + "'"
}
});
} else {
pointsLayer.setOptions({
query: {
select: pointColumn,
from: pointTableID
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<p style="margin-left:auto; margin-right:auto; margin-top:0.25em; margin-bottom:0.25em; width:20%; font-size:14pt; font-weight:bold;">Trapping Program</p>
<label style="font-size:11pt; font-weight:bold;">Select trapping program: </label>
<select id="Program">
<option value="--Select--">--Select--</option>
<option value="">(no value)</option>
<option value="Apanteles">Apanteles</option>
<option value="AshBorer">Ash (or Lilac) Borer</option>
<option value="EBB-Banded">Banded Elm Bark Beetle</option>
<option value="EBB">Elm Bark Beetle</option>
<option value="EmeraldAshBorer">Emerald Ash Borer</option>
<option value="GypsyMoth">Gypsy Moth</option>
<option value="InvasiveAliens">Invasive Alien Species</option>
<option value="MountainPineBeetle">Mountain Pine Beetle</option>
<option value="Sirix">Sirix</option>
<option value="UglynestCaterpillar">Uglynest Caterpillar</option>
<option value="Other:">Other Program</option>
</select>
<label style="font-size:11pt; font-weight:bold;">Select trap route: </label>
<select id="TrapRteList">
<option value="--Select--">--Select--</option>
<option value="">(no value)</option>
<option value="NE">Northeast</option>
<option value="NW">Northwest</option>
<option value="SE">Southeast</option>
<option value="SW">Southwest</option>
<option value="OuterCommunity">Outer Community</option>
<option value="Other:">Other</option>
</select>
<div id="map-canvas"></div>
</body>
</html>
This should be sufficient:
function updateMap(pointsLayer, pointTableID, pointColumn) {
var o={
Program : document.getElementById('Program').value,
TrapRteList : document.getElementById('TrapRteList').value
},where=[];
for(var k in o){
if(o[k]){
where.push(k+"='"+o[k]+"'");
}
}
pointsLayer.setOptions({
query: {
select: pointColumn,
from: pointTableID,
where: where.join(' and ')
}
});
}
Note: all options that shouldn't be used for filtering must have an value which evaluates to false , e.g. a empty string.
Related
Need to get just values and number of selection in multiple-select search box
Please check first screenshot using select2 multiselect,
I wants it like bellow one because the above selection is not looking good if I have multiple selectboxes as filters.
var elm = $('#error-type');
$(elm).select2({
placeholder: "Select features",
data: [
{ id: 0, text: "enhancement" },
{ id: 1, text: "bug" },
{ id: 2, text: "duplicate" },
{ id: 3, text: "invalid" },
{ id: 4, text: "wontfix" },
{ id: 5, text: "sdfsadf" },
{ id: 6, text: "ihfgdhfgdh" },
{ id: 7, text: "Vijaysinh" },
{ id: 8, text: "Parmar" },
{ id: 9, text: "invalid" },
{ id: 10, text: "Test device morel laravel" },
{ id: 11, text: "sky is blue" },
]
}).change(function () {
var selectedIDs = $.map($(elm).select2('data'), function (val, i) {
return val.id;
}).join(",");
$('#selectedIDs').text(selectedIDs);
});
#error-type {
width: 300px;
}
p {
margin: 1em 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<p>Selected IDs: <span id="selectedIDs"></span></p>
<select id="error-type" multiple>
</select>
Try using select2:close event
$('select').select2()
$('.select1').on('select2:close', function() {
let select = $(this)
$(this).next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li>" + count + " options selected</li>"
})
})
$('.select2').on('select2:close', function() {
let select = $(this)
select.next('span.select2').find('ul').html(function() {
return "<li>" + $(select).val() + "</li>"
})
})
.select2-selection__rendered li {
margin: 6px 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select1" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>
<br/><br/>
<select class="select2" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>
UPDATE (with search)
$('select').select2()
$('.select1').on('select2:close', function() {
let select = $(this),
ul = select.next('span.select2').find('ul');
ul.find('.select2-selection__choice').remove();
ul.prepend(function() {
let count = select.select2('data').length
return "<li class='select2-selection__choice'>" + count + " options selected</li>"
})
})
.select2-selection__rendered li {
margin: 6px 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select1" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>
I'm trying to create a custom select menu with filter like on the demo page:
http://demos.jquerymobile.com/1.4.5/selectmenu-custom-filter/
It works fine for short list:
http://jsfiddle.net/dw1c1439/
But it's not working for long lists:
https://jsfiddle.net/pppzLbfu/
I keep getting the error:
SCRIPT5007: Unable to get property 'jqmData' of undefined or null reference
My full code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filterable inside custom select - jQuery Mobile Demos</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="jquery.mobile/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jquery.mobile/_assets/css/jqm-demos.css">
<script src="jquery.mobile/js/jquery.js"></script>
<script src="jquery.mobile/_assets/js/index.js"></script>
<script src="jquery.mobile/js/jquery.mobile-1.4.5.min.js"></script>
<script>
( function( $ ) {
function pageIsSelectmenuDialog( page ) {
var isDialog = false,
id = page && page.attr( "id" );
$( ".filterable-select" ).each( function() {
if ( $( this ).attr( "id" ) + "-dialog" === id ) {
isDialog = true;
return false;
}
});
return isDialog;
}
$.mobile.document
// Upon creation of the select menu, we want to make use of the fact that the ID of the
// listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
// We retrieve the listview and insert a search input before it.
.on( "selectmenucreate", ".filterable-select", function( event ) {
var input,
selectmenu = $( event.target ),
list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
form = list.jqmData( "filter-form" );
// We store the generated form in a variable attached to the popup so we avoid creating a
// second form/input field when the listview is destroyed/rebuilt during a refresh.
if ( !form ) {
input = $( "<input data-type='search'></input>" );
form = $( "<form></form>" ).append( input );
input.textinput();
list
.before( form )
.jqmData( "filter-form", form ) ;
form.jqmData( "listview", list );
}
// Instantiate a filterable widget on the newly created selectmenu widget and indicate that
// the generated input form element is to be used for the filtering.
selectmenu
.filterable({
input: input,
children: "> option[value]"
})
// Rebuild the custom select menu's list items to reflect the results of the filtering
// done on the select menu.
.on( "filterablefilter", function() {
selectmenu.selectmenu( "refresh" );
});
})
// The custom select list may show up as either a popup or a dialog, depending on how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on( "pagecontainerbeforeshow", function( event, data ) {
var listview, form;
// We only handle the appearance of a dialog generated by a filterable selectmenu
if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
listview = data.toPage.find( "ul" );
form = listview.jqmData( "filter-form" );
// Attach a reference to the listview as a data item to the dialog, because during the
// pagecontainerhide handler below the selectmenu widget will already have returned the
// listview to the popup, so we won't be able to find it inside the dialog with a selector.
data.toPage.jqmData( "listview", listview );
// Place the form before the listview in the dialog.
listview.before( form );
})
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on( "pagecontainerhide", function( event, data ) {
var listview, form;
// We only handle the disappearance of a dialog generated by a filterable selectmenu
if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
listview = data.prevPage.jqmData( "listview" ),
form = listview.jqmData( "filter-form" );
// Put the form back in the popup. It goes ahead of the listview.
listview.before( form );
});
})( jQuery );
</script>
<style>
.ui-selectmenu.ui-popup .ui-input-search {
margin-left: .5em;
margin-right: .5em;
}
.ui-selectmenu.ui-dialog .ui-content {
padding-top: 0;
}
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
margin-top: 0;
}
.ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
border-top-width: 1px;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-selectmenu.ui-dialog .ui-header {
border-bottom-width: 1px;
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos" id="pageMainForm">
<div data-role="header" class="jqm-header">
<h2><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></h2>
<p>Demos <span class="jqm-version"></span></p>
Menu
Search
</div><!-- /header -->
<div data-role="content" class="ui-content jqm-content">
<h1>Filterable inside custom select</h1>
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<form>
<select id="filter-menu" class="filterable-select" data-native-menu="false">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>
<option value="Option 5">Option 5</option>
<option value="Option 6">Option 6</option>
<option value="Option 7">Option 7</option>
<option value="Option 8">Option 8</option>
<option value="Option 9">Option 9</option>
<option value="Option 10">Option 10</option>
<option value="Option 11">Option 11</option>
<option value="Option 12">Option 12</option>
<option value="Option 13">Option 13</option>
<option value="Option 14">Option 14</option>
<option value="Option 15">Option 15</option>
<option value="Option 16">Option 16</option>
<option value="Option 17">Option 17</option>
<option value="Option 18">Option 18</option>
<option value="Option 19">Option 19</option>
<option value="Option 20">Option 20</option>
<option value="Option 21">Option 21</option>
<option value="Option 22">Option 22</option>
</select>
</form>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Here's the solution if you still need it:
The demo itself has some errors. Here is a way to do it:
// demo-dialog is ID of selectmenu (demo) + (-dialog) which is added
// by jQM dynamically upon creating a custom selectmenu
$(document).on("pagecreate", "#demo-dialog", function (e) {
var form = $("<form><input data-type='search'/></form>"),
page = $(this);
$(".ui-content", this)
.prepend(form);
form.enhanceWithin()
.on("keyup", "input", function () {
var data = $(this).val().toLowerCase();
$("li", page).addClass("ui-screen-hidden")
.filter(function (i, v) {
return $(this).text().toLowerCase().indexOf(data) > -1;
}).removeClass("ui-screen-hidden");
});
$(document).on("pagecontainerhide", function () {
$("#demo-menu li").removeClass("ui-screen-hidden");
$("input", form).val("");
});
});
For reference:
https://forum.jquery.com/topic/cannot-read-property-jqmdata-of-undefined
This seemed to fix it for me -
In the 'pagecontainerhide' handler, change the argument in the
pageIsSelectmenuDialog function from 'data.toPage' to 'data.prevPage' as in:
if ( !pageIsSelectmenuDialog( data.prevPage ) ) {
return;
}
I need to implement a select similar to this http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
I want to use select2 for this, but I haven't been able to find anything from the creator of the select2 that would support this style of dropdown with checkboxes in it. Does anyone know a way to do this?
I've faced a similar need but was not able to find it.
The solution I've came across was using the flag closeOnSelect set to false
$("#yadayada").select2({closeOnSelect:false});
http://jsfiddle.net/jEADR/521/
Seems this is old post, but as it is very common issue, I`m posting this here.
I found that the author already added a plugin to select2 for this feature to have checkbox-like selection and the dropdown does not hide on click:
https://github.com/wasikuss/select2-multi-checkboxes
Example:
$('.select2-multiple').select2MultiCheckboxes({
placeholder: "Choose multiple elements",
})
http://jsfiddle.net/wasikuss/gx93rwnk/
All other features of select2 are preserved. There are few more predefined options set to work properly.
I managed to put something together, not perfect, but it works.
https://jsfiddle.net/Lkkm2L48/7/
jQuery(function($) {
$.fn.select2.amd.require([
'select2/selection/single',
'select2/selection/placeholder',
'select2/selection/allowClear',
'select2/dropdown',
'select2/dropdown/search',
'select2/dropdown/attachBody',
'select2/utils'
], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
var SelectionAdapter = Utils.Decorate(
SingleSelection,
Placeholder
);
SelectionAdapter = Utils.Decorate(
SelectionAdapter,
AllowClear
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
DropdownSearch
),
AttachBody
);
var base_element = $('.select2-multiple2')
$(base_element).select2({
placeholder: 'Select multiple items',
selectionAdapter: SelectionAdapter,
dropdownAdapter: DropdownAdapter,
allowClear: true,
templateResult: function (data) {
if (!data.id) { return data.text; }
var $res = $('<div></div>');
$res.text(data.text);
$res.addClass('wrap');
return $res;
},
templateSelection: function (data) {
if (!data.id) { return data.text; }
var selected = ($(base_element).val() || []).length;
var total = $('option', $(base_element)).length;
return "Selected " + selected + " of " + total;
}
})
});
});
CSS:
.select2-results__option .wrap:before{
font-family:fontAwesome;
color:#999;
content:"\f096";
width:25px;
height:25px;
padding-right: 10px;
}
.select2-results__option[aria-selected=true] .wrap:before{
content:"\f14a";
}
Add just two emoji with css
.select2-results__options {
&[aria-multiselectable=true] {
.select2-results__option {
&[aria-selected=true]:before {
content: '☑';
padding: 0 0 0 4px;
}
&:before {
content: '◻';
padding: 0 0 0 4px;
}
}
}
}
You see this sample a RTL select2 with emoji based checkbox
Here is very simple snippet, without strange modyfing of js - pure and simple css (with "Font Awesome")
$('.select2[multiple]').select2({
width: '100%',
closeOnSelect: false
})
#body{
padding: 30px
}
.select2-results__options[aria-multiselectable="true"] li {
padding-left: 30px;
position: relative
}
.select2-results__options[aria-multiselectable="true"] li:before {
position: absolute;
left: 8px;
opacity: .6;
top: 6px;
font-family: "FontAwesome";
content: "\f0c8";
}
.select2-results__options[aria-multiselectable="true"] li[aria-selected="true"]:before {
content: "\f14a";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div id="body">
<select name="fabric_color_en[]" id="fabric_color_en[]" multiple="multiple" class="form-control select2">
<option value="Beige">
Beige
</option>
<option value="Red">
Red
</option>
<option value="Petrol">
Petrol
</option>
<option value="Royal Blue">
Royal Blue
</option>
<option value="Dark Blue">
Dark Blue
</option>
<option value="Bottle Green">
Bottle Green
</option>
<option value="Light Grey">
Light Grey
</option>
</select>
</div>
Now the code is ready to use for you to implement the multiple checkboxes select2 dropdown.
Enjoy :)
//===============================================
//Start - Select 2 Multi-Select Code======================================================
var Select2MultiCheckBoxObj = [];
var id_selectElement = 'id_SelectElement';
var staticWordInID = 'state_';
function AddItemInSelect2MultiCheckBoxObj(id, IsChecked) {
if (Select2MultiCheckBoxObj.length > 0) {
let index = Select2MultiCheckBoxObj.findIndex(x => x.id == id);
if (index > -1) {
Select2MultiCheckBoxObj[index]["IsChecked"] = IsChecked;
}
else {
Select2MultiCheckBoxObj.push({ "id": id, "IsChecked": IsChecked });
}
}
else {
Select2MultiCheckBoxObj.push({ "id": id, "IsChecked": IsChecked });
}
}
function IsCheckedAllOption(trueOrFalse) {
$.map($('#' + id_selectElement + ' option'), function (option) {
AddItemInSelect2MultiCheckBoxObj(option.value, trueOrFalse);
});
$('#' + id_selectElement + " > option").not(':first').prop("selected", trueOrFalse); //This will select all options and adds in Select2
$("#" + id_selectElement).trigger("change");//This will effect the changes
$(".select2-results__option").not(':first').attr("aria-selected", trueOrFalse); //This will make grey color of selected options
$("input[id^='" + staticWordInID + "']").prop("checked", trueOrFalse);
}
$(document).ready(function () {
//Begin - Select 2 Multi-Select Code
$.map($('#' + id_selectElement + ' option'), function (option) {
AddItemInSelect2MultiCheckBoxObj(option.value, false);
});
function formatResult(state) {
if (Select2MultiCheckBoxObj.length > 0) {
var stateId = staticWordInID + state.id;
let index = Select2MultiCheckBoxObj.findIndex(x => x.id == state.id);
if (index > -1) {
var checkbox = $('<div class="checkbox"><input class="select2Checkbox" id="' + stateId + '" type="checkbox" ' + (Select2MultiCheckBoxObj[index]["IsChecked"] ? 'checked' : '') +
'><label for="checkbox' + stateId + '">' + state.text + '</label></div>', { id: stateId });
return checkbox;
}
}
}
let optionSelect2 = {
templateResult: formatResult,
closeOnSelect: false,
width: '100%'
};
let $select2 = $("#" + id_selectElement).select2(optionSelect2);
//var scrollTop;
//$select2.on("select2:selecting", function (event) {
// var $pr = $('#' + event.params.args.data._resultId).parent();
// scrollTop = $pr.prop('scrollTop');
// let xxxx = 2;
//});
$select2.on("select2:select", function (event) {
$("#" + staticWordInID + event.params.data.id).prop("checked", true);
AddItemInSelect2MultiCheckBoxObj(event.params.data.id, true);
//If all options are slected then selectAll option would be also selected.
if (Select2MultiCheckBoxObj.filter(x => x.IsChecked === false).length === 1) {
AddItemInSelect2MultiCheckBoxObj(0, true);
$("#" + staticWordInID + "0").prop("checked", true);
}
});
$select2.on("select2:unselect", function (event) {
$("#" + staticWordInID + "0").prop("checked", false);
AddItemInSelect2MultiCheckBoxObj(0, false);
$("#" + staticWordInID + event.params.data.id).prop("checked", false);
AddItemInSelect2MultiCheckBoxObj(event.params.data.id, false);
});
$(document).on("click", "#" + staticWordInID + "0", function () {
//var b = !($("#state_SelectAll").is(':checked'));
var b = $("#" + staticWordInID + "0").is(':checked');
IsCheckedAllOption(b);
//state_CheckAll = b;
//$(window).scroll();
});
$(document).on("click", ".select2Checkbox", function (event) {
let selector = "#" + this.id;
let isChecked = Select2MultiCheckBoxObj[Select2MultiCheckBoxObj.findIndex(x => x.id == this.id.replaceAll(staticWordInID, ''))]['IsChecked'];
$(selector).prop("checked", isChecked);
});
});
//====End - Select 2 Multi-Select Code==
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="undefined" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<div class="container-fluid">
<hr/>
<p>Here, you can select any item by clicking on row or checked in on checkbox and can unselect in reverse way.</p>
<p>But I didn't give the option to select "SelectAll" option by clicking on his row, you can select-all and unselect-all by click on checkbox only rather than row.</p>
<div class="row" style="width:50%">
<label for="id_SelectElement" class="col-sm-2">Part Name: </label>
<div class="col-sm-4">
<select id="id_SelectElement" placeholder="Select Text" multiple>
<option value="0" disabled>Select All</option>
<option value="11">Php</option>
<option value="22">Bootstrap</option>
<option value="33">sql</option>
<option value="44">Node Js</option>
<option value="55">Laravel</option>
<option value="66">Jquery</option>
<option value="77">React</option>
<option value="88">Vew.JS</option>
<option value="99">MVC</option>
<option value="10">DotNetCore</option>
<option value="12">Java</option>
<option value="13">Artifical Intiligence</option>
<option value="14">Data Structure</option>
<option value="15">Data Science</option>
<option value="16">Robotics</option>
<option value="17">Node Js 2</option>
<option value="18">Laravel 23</option>
<option value="19">Jquery 3.4</option>
</select>
</div>
</div>
</div>
Another workaround is to "prepend" checkbox icons using CSS. I use bootstrap theme - your select2-container may be different.
.select2-container--bootstrap .select2-results__option[aria-selected=true]:before { content:'\e067 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' }
.select2-container--bootstrap .select2-results__option:before { content:'\e157 '; padding:0 8px 0 0px; font-family:'Glyphicons Halflings' }
I'm having a quite bit of difficulty creating some functions for my fusion tables. I have two tables here:
Points
Parcels
I'm trying to create a number of functions:
1) I want to be able to select the points layer using a drop down menu to select by its ID number.
2) I want to create a function where when I pick my point, I can tell fusion tables to find me the parcels that are within 1km of the point. It would preferable if I can change the distances, so I can do searches for 5km for example.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
var layerl1;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.94255650099583, -79.53326251471042),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1-6QDLUk0Xw7weaB0GP1nmgwvXUuaXJCxWEYbO8E'
},
map: map,
styleId: -1,
templateId: -1
});
layerl1 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1BdIN39m70Vo6Sq0Y5lm1s_4Crh1CZpSwRbYMfnM'
},
map: map,
styleId: -1,
templateId: -1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1-6QDLUk0Xw7weaB0GP1nmgwvXUuaXJCxWEYbO8E',
where: "'description' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
function changeMapl1() {
var searchString = document.getElementById('search-string-l1').value.replace(/'/g, "\\'");
layerl1.setOptions({
query: {
select: "'col2'",
from: '1BdIN39m70Vo6Sq0Y5lm1s_4Crh1CZpSwRbYMfnM',
where: "'description' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Zone: </label><input type="text" id="search-string-l0">
<input type="button" onclick="changeMapl0()" value="Search">
</div>
<div style="margin-top: 10px;">
<label>SPP_ID: </label>
<select id="search-string-l1" onchange="changeMapl1(this.value);">
<option value="">--Select--</option>
<option value="<html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style=
Thanks for your help!
Check out the Fusion Tables API Reference, particularly ST_DISTANCE. It looks like what you'll want to do is first geocode each parcel in the fusion table itself (add an address field or lat/long columns and run the built-in geocoder), then you can SELECT with WHERE ST_DISTANCE(location_column, point_location) <= max_distance
On a separate note, you might want to consider leaving HTML formatting out of the fusion table - that's typically something you put in the application/template rather than the data source (for example, imagine if you wanted to use that same data source for
Currently Fusion Tables does not support to use the location column of one table to run spatial queries on another (at least I don't know of this possibility). But still you can achieve what you want, by converting your points to a geometry and then run a spatial query with ST_INTERSECTS on your parcels table.
Steps:
Get the lat/lng values from the point the user clicked on. Either from your Fusion Table or directly from the click event of the map:
GEvent.addListener(map, "click", function(overlay, latLng) {
var lat = latLng.lat(),
lng = latLng.lng();
});
Here is a complete example of getting the lat/lng values from the map.
Use this lat/lng values to update the query of the parcels layer
layer.setOptions({
query: {
select: location
from:
where: 'ST_INTERSECTS(circle(latlng(lat,lng),radius), location)
}
});
See the circle example of Fusion Tables.
I have a html page based on Combobox autocomplete demo at Combobox jQuery Autocomplete Demo. The problem is that the combobox renders perfectly in FireFox 13.x. However, in IE 9.x (64-bit), it does the autocomplete part correctly, but is strange in appearance as you can see at this link: Strange jQuery Combobox Appearance in IE 9.x. I thought jQuery was the perfect cross-browser technology, but it doesn't look like it. Or may be I am missing something in my html code? The complete html code is as given below.
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script type="text/javascript">
(function ($) {
$.widget("ui.combobox", {
_create: function () {
var input,
self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "",
wrapper = this.wrapper = $("<span>")
.addClass("ui-combobox")
.insertAfter(select);
input = $("<input>")
.appendTo(wrapper)
.val(value)
.addClass("ui-state-default ui-combobox-input")
.autocomplete({
delay: 0,
minLength: 0,
source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function () {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
},
select: function (event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left");
input.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.appendTo(wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function () {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function () {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function () {
$("#combobox").combobox();
$("#toggle").click(function () {
$("#combobox").toggle();
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label>
Your preferred programming language:
</label>
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">
Show underlying select</button>
</div>
<!-- End demo -->
</body>
</html>
I just found the issue that was causing incorrect rendering in IE. For things to render properly in IE, when using jQuery, you must specify doc type as in code below. That will make the jQuery combobox render properly in IE.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/cupertino/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
You could, as an alternate, also use the following web URLs to get the css and scripts related to jQuery in this example, rather than the local URLs that were mentioned in above code sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui
/1.8/themes/cupertino/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2
/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-
ui.min.js" type="text/javascript"></script>