I'm updating the value of a textbox when the jqueryui.dialog is closed. It displays the value in the textbox but when the textbox gets focus the value disappears. I just can't figure out the reason. There is no onfocus/onblur event on the textbox.
I'm updating the textbox value like this
$("#mycontrol").val(displayresult);
$(html).dialog({
modal: true,
height: 300,
overflow: scroll,
buttons: {
"Select": function () {
$(this).dialog("close");
var value, splitPosition, itemValues, displayValues;
var displayresult = "";
var itemresult = "";
var septex = "";
var sepval = "";
$("input:checkbox" && "[id^=" + controlName + "_selectionBoxCheckBox]").each(function () {
var $this = $(this);
if ($this.is(":checked")) {
value = $this.val();
splitPosition = value.indexOf("-");
itemValues = $this.val().substr(0, splitPosition);
displayValues = $this.val().substr(splitPosition + 1);
itemresult += sepval + itemValues;
displayresult += septex + displayValues;
sepval = ",";
septex = ", ";
}
});
$("#mycontrol").val(displayresult);
$(this).dialog('destroy').remove();
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
//alert('close');
},
beforeClose: function (event, ui) {
//alert("before close");
}
});
I wrapped this with some HTML code and it works fine. There must be some other code causing the problem.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="mycontrol" />
</form>
<div id="dialog" title="Dialog Title">
one <input type="checkbox" id="cb_selectionBoxCheckBox1" value="1-one" /><br />
two <input type="checkbox" id="cb_selectionBoxCheckBox2" value="2-two" /><br />
three <input type="checkbox" id="cb_selectionBoxCheckBox3" value="3-three" /><br />
</div>
<script type="text/javascript">
var displayresult="initial";
var controlName="cb";
var html='#dialog';
$().ready(function(){
$("#mycontrol").val(displayresult);
$(html).dialog({
modal: true,
height: 300,
overflow: scroll,
buttons: {
"Select": function () {
$(this).dialog("close");
var value, splitPosition, itemValues, displayValues;
var displayresult = "";
var itemresult = "";
var septex = "";
var sepval = "";
$("input:checkbox" && "[id^=" + controlName + "_selectionBoxCheckBox]").each(function () {
var $this = $(this);
if ($this.is(":checked")) {
value = $this.val();
splitPosition = value.indexOf("-");
itemValues = $this.val().substr(0, splitPosition);
displayValues = $this.val().substr(splitPosition + 1);
itemresult += sepval + itemValues;
displayresult += septex + displayValues;
sepval = ",";
septex = ", ";
}
});
$("#mycontrol").val(displayresult);
$(this).dialog('destroy').remove();
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
//alert('close');
},
beforeClose: function (event, ui) {
//alert("before close");
}
});
});
</script>
</body>
</html>
Related
I have 2 dropdown list in my page. In web browser (PC side) It works fine. There is no problem. When i open the page with chrome toogle device toolbar and i resize as mobile view, it only gives this error
fastclick.js:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
csHTML Code
<div class="tab-pane active tabcontent" id="reservationPage" role="tabpanel">
<div class="col-sm-12 col-md-12">
<div class="form-group row rowR">
<label class="form-control-label col-md-2"><strong>Yemekhane</strong> </label>
<div class="col-md-12">
#Html.DropDownListFor(x => x.RefectoryId, new SelectList(Model.Refectories, "Id", "Name"), ("Seçiniz"), new { Id = "RefectoryId", #class = "form-control select2" })
</div>
</div>
<div class="form-group row rowR">
<label class="form-control-label col-md-2"><strong>Öğün</strong> </label>
<div class="col-md-12">
#Html.DropDownListFor(x => x.FoodMealId, new SelectList(Model.FoodMeals, "Id", "Name"), ("Seçiniz"), new { Id = "FoodMealId", #class = "form-control select2" })
</div>
</div>
</div>
</div>
JS Code
<script>
var reservationCount = 0;
var totalAmount = 0;
$(document).ready(function () {
$("#reservationCount")[0].textContent = "(" + reservationCount + ")";
//İlk açıldığında rezervasyon sayfasının acık gelmesi için
var tablinks = document.getElementById("reservationPageHead");
tablinks.className = tablinks.className + " active";
document.getElementById('reservationPage').style.display = "block";
//var foodMealId = $("#FoodMealId").val();
//var refectoryId = $("#RefectoryId").val();
//GetCalendarMenuPartial(foodMealId, refectoryId);
$("#RefectoryId").select2({
allowClear: true,
placeholder: 'Yemekhane Seçiniz',
// dropdownParent: $(".bootbox-body"),
});
var refectorySelect = $('#RefectoryId');
refectorySelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
$.ajax({
url: "#Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
data: { refectoryId: refectoryId },
type: "POST",
async: false,
success: function (returnData) {
if (returnData.data == undefined) {
PageToastr(returnData.type, returnData.message, returnData.title);
}
else {
//FoodMeal List
$("#FoodMealId option[value]").remove();
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Seçiniz',
data : returnData.data,
});
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Öğün Seçiniz',
//dropdownParent: $(".bootbox-body"),
});
var foodMealSelect = $('#FoodMealId');
foodMealSelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
// Rezervasyonu tamamla için tooltip
$('#completeReservation').tooltip('update');
});
</script>
<script>
function GetCalendarMenuPartial(foodMealId, refectoryId) {
$.ajax({
url: '#Url.Action("NewReservationCalendarMenuPartial", "Reservation", new { area = "Common" })',
data: { foodMealId: foodMealId, refectoryId: refectoryId, addCardMenu: $("#AddCardMenuString").val() },
type: "POST",
success: function (partialPage) {
if (partialPage.title != undefined) {
PageToastr(partialPage.type, partialPage.message, partialPage.title);
if (partialPage.result == '#Enums.ResultStatus.SessionTimeExpired.ToString()') {
setTimeout(function () { window.location.href = '/Login/Login'; }, 5000)
}
}
else {
$("#calendarMenuPartial").html(partialPage);
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
}
</script>
After that I've added touch-action: none; but it doesn't work too. It works properly in PC Devices. But never works on mobile devices.
I am trying to get distance in miles and estimated time with googles directionsService. It sort of works but I know the results its giving me are incorrect. The distance and time are too short? I need results in driving mode. A sample of the code is :
HTML
<input id="s_lat" value="52.441334" />
<input id="s_lng" value="-1.654737" />
<input id="d_lat" value="52.450439" />
<input id="d_lng" value="-1.729660" />
JS
var n_start = s_lat + ',' + s_lng;
var n_end = d_lat + ',' + d_lng;
function getdistance() {
var directionsService = new google.maps.DirectionsService();
var request = {
origin : n_start,
destination : n_end,
travelMode : google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
durationInTraffic: true
};
directionsService.route(request, function(response, status) {
if ( status == google.maps.DirectionsStatus.OK ) {
alert (response.routes[0].legs[0].duration.value);
alert (response.routes[0].legs[0].distance.value);
}
else {
// oops, there's no route between these two locations
}
});
}
The result I get with the posted code is NOT_FOUND, I don't get a distance. A comma separated string is not a google.maps.LatLng or a google.maps.LatLngLiteral, it is treated as an address and geocoded before returning the results.
This:
var n_start = s_lat + ',' + s_lng;
var n_end = d_lat + ',' + d_lng;
Should be (google.maps.LatLngLiteral):
var n_start = {lat: parseFloat(s_lat.value), lng: parseFloat(s_lng.value)};
var n_end = {lat: parseFloat(d_lat.value), lng: parseFloat(d_lng.value)};
Or (google.maps.LatLng):
var n_start = new google.maps.LatLng(s_lat.value,s_lng.value);
var n_end = new google.maps.LatLng(d_lat.value,d_lng.value);
Proof of concept fiddle
Code snippet:
function initMap() {
var n_start = new google.maps.LatLng(s_lat.value,s_lng.value);
var n_end = new google.maps.LatLng(d_lat.value,d_lng.value);
function getdistance() {
var directionsService = new google.maps.DirectionsService();
var request = {
origin: n_start,
destination: n_end,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
durationInTraffic: true
};
console.log(JSON.stringify(request));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log("duration=" + response.routes[0].legs[0].duration.value + " seconds");
console.log("distance=" + response.routes[0].legs[0].distance.value + " meters");
document.getElementById('result').innerHTML = "distance=" + (response.routes[0].legs[0].distance.value / 1000).toFixed(2) + " km<br>duration=" + (response.routes[0].legs[0].duration.value / 60).toFixed(2) + " minutes";
new google.maps.DirectionsRenderer({
map: new google.maps.Map(document.getElementById('map')),
directions: response
})
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
getdistance();
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<input id="s_lat" value="52.441334" />
<input id="s_lng" value="-1.654737" />
<input id="d_lat" value="52.450439" />
<input id="d_lng" value="-1.729660" /><br>
<div id="result"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I am using google place SearchBox ( not AutoComplete ) for place search. My objective is I want to restrict the search for a particular country (UK).
I know the same thing can be achieved easily by using AutoComplete. But I can't use this because my map will populate on enter key as well as against a search button.
I am using code to select the first option on search button click.
I have tried with google.maps.LatLngBounds but that only sets the priority of result, not restricting anything.
Html:
<ul class="list-unstyled search-branch">
<li>Search branches:</li>
<li><input type="text" placeholder="City, town or postcode" id="txtbranch" value="Eurochange" />
<input type="button" class="button gold" id="getbranch" value="Search" />
<div style="clear:both;"></div>
<div class="error-message-summary" id="locationnotfound" style="padding: 0;top:-30px; position:relative; font-size:16px;display:none">
No search results found.
</div>
</li>
</ul>
js:
var input = document.getElementById('txtbranch');
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 1512631)
);
var options = {
bounds: defaultBounds
}
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
$('#getbranch').click(function () {
var input = document.getElementById('txtbranch');
if (BranchAddressSelector.val() == "") {
return;
}
google.maps.event.trigger(input, 'focus');
google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
return false;
})
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces()[0];
if (typeof (places) === "undefined") {
locationNotFoundSelector.css("display", "block");
return false;
}
if (BranchAddressSelector.val() == "") {
return false;
}
var address = places.formatted_address;
if (typeof (address) === "undefined") {
locationNotFoundSelector.css("display", "block");
return false;
}
var latitude = places.geometry.location.lat();
var longitude = places.geometry.location.lng();
$.ajax({
type: "GET",
url: BranchLocatorUrl.GetBranches,
data: { Latitude: latitude, longitude: longitude },
success: function (data) {
if (data.length > 0) {
markers = data;
LoadMap(0, 0);
BranchListSelector.html(CreateSearchHtml(markers));
goToByScroll("dvMap");
BranchListSelector.css("display", "none");
paginationSelector.css("display", "none");
$('.map-distance').css("display", "block");
locationNotFoundSelector.css("display", "none");
var show_per_page = 6;
var number_of_items = BranchListSelector.children('.BranchItem').size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
totalPages = number_of_pages;
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="previous_link" style="color: #007ea0;" href="javascript:previous();">Prev</a> ';
var current_link = 0;
while (number_of_pages > current_link) {
navigation_html += '<a class="page_link" style="color: #007ea0;" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a> ';
current_link++;
}
navigation_html += '<a class="next_link" style="color: #007ea0;" href="javascript:next();"> Next</a>';
$('#page_navigation').html(navigation_html).css("float", "right").css("display", "none");
$('#page_navigation .page_link:first').addClass('active_page');
BranchListSelector.children('.BranchItem').css('display', 'none');
BranchListSelector.children('.BranchItem').slice(0, show_per_page).css('display', 'block');
BranchListSelector.css("display", "block");
// paginationSelector.css("display", "block");
$('.map-distance').css("display", "none");
$('#moreBranch').css("display", "block");
}
else {
alert("Data not found.");
}
},
error: function (e) {
alert("Some Problem occurs.Try after some time");
return;
}
});
});
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>langganan</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markercluster.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var cluster = [];
function load(lt,lg,zoom) {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lt, lg),
zoom: zoom,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
downloadUrl("phpsqlajax_genxml3.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("nama");
var address = markers[i].getAttribute("alamat");
var type = markers[i].getAttribute("wilayah");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
cluster.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
infowindow.setContent("Kode Pelanggan : "+markers[i].getAttribute("kode_pelanggan")+"<br/>"+
"Nama Pelanggan : "+markers[i].getAttribute("nama")+"<br/>"+
"Alamat Pelanggan : "+markers[i].getAttribute("alamat")+"<br/>"+
"Wilayah : "+markers[i].getAttribute("wilayah"));
infowindow.open(map, marker);
}
})(marker, i));
}
var a=15;
var mc = new MarkerClusterer(map, cluster,{
maxZoom: a /*,
// gridSize: size,
// styles: styles[style]
// */
}
);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
// google.maps.event.trigger(marker,'click');
function info(x)
{
google.maps.event.trigger(cluster[x],'click');
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
function get(){
var tempout;
$.post('tampil.php',{ ambil: frm.ambil.value},
function(output){
var tampung = output.replace("[", "");
tampung = tampung.replace("]", "");
tampung = replaceAll('"',"",tampung);
var kode = tampung.split(",");
var latx = kode[3];
var lngx = kode[4];
load(latx,lngx,17);
info(kode[0]);
$('#nama').html(output).show();
}
);
}
function doNothing() {}
//]]>
</script>
<script type="text/javascript">
</script>
</head>
<body onload=load(-5.162764,119.443118,13)>
<form name="frm">
<center><input type="text" id="ambil" name="ambil" value="">
<input type="button" id="Cari"value="Cari" onClick="get(); "/></br>
<div id="nama"></div></center>
Open Info Window
</form>
<div id="map" style="width: 600px; height: 400px" ></div></hr>
</body>
</html>
I'm currently use a new system for my gis website and I'm getting the following error: Uncaught TypeError: Cannot read property '__e3ae_' of undefinedT.trigger
# main.js:18info # map.php:112(anonymous function)
# map.php:134jQuery.Callbacks.fire # jquery.js:3143jQuery.Callbacks.self.fireWith # jquery.js:3255done # jquery.js:9309jQuery.ajaxTransport.send.callback # jquery.js:9713
I am trying to get layers to click on and off by using a checkbox, but for some reason I am missing something and can not get it to click on and off again. I also would like to add custom markers for each layer but have not succeeded in doing that at all.
Here is the code I am working with. I would appreciate any help on this I am so new to working with this code.
var map;
var layerl0;
var layerl1;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(62.683556,-152.314453),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col0'",
from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs'
},
map: map,
styleId: 2,
templateId: 3
});
layerl1 = new google.maps.FusionTablesLayer({
query: {
select: "'col0'",
from: '1ra3TP6cbWmdAOayLgzCugLrhdmDAO6UJIFuty9E'
},
map: map,
styleId: 2,
templateId: 3
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col0'",
from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs',
where: "'category' = '" + searchString + "'"
}
});
}
function changeMapl1() {
var searchString = document.getElementById('search-string-l1').value.replace(/'/g, "\\'");
layerl1.setOptions({
query: {
select: "'col0'",
from: '1ra3TP6cbWmdAOayLgzCugLrhdmDAO6UJIFuty9E',
where: "'category' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<form>
<input type="checkbox" value="CRCD" checked="checked" id="search-string-l0" onClick="changeMapl0(this.value);">CRCD Learning Centers
<input type="checkbox" value="Research" checked="checked" id="search-string-l1" onClick="changeMapl1(this.value);">Off-site Research
</form>
</div>
Your problem is that your changeMap functions don't actually do anything based on the value of the checkbox:
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col0'",
from: '1suBUHqahw5W9f6A6kEVhh-NWmqSbukYqdtnJLWs',
where: "'category' = '" + searchString + "'"
}
});
}
Try this instead:
function changeMapl0() {
if (document.getElementById('search-string-l0').checked )
{ layerl0.setMap(map); }
else
{ layerl0.setMap(null); }
}
Working example