MVC Controller getting hit twice on page load

MVC Controller getting hit twice on page load - javascript

My MVC Controller is getting hit twice on page load, and I am stumped on how to solve this problem.
I'm using navigator.geolocation.getCurrentPosition in my Layout page, and that passes the latitude and longitude to my controller.
I have RenderAction in a div, just in case the user has JavaScript disabled, as some people still do
:-(
This is what is causing my problem:
The RenderAction is getting rendered 1st and hitting the controller. Then, the AJAX request is firing and hitting the controller.
So my controller is getting hit twice per request.
Is there something I'm missing which will stop that, because at the moment, all I can think of is to remove the render action from the page.
Code:
<div class="dvWeather">
#{ Html.RenderAction("PvCurrentWeatherConditions", "Weather"); }
</div>
if (navigator.geolocation) {
// alert("Geo-Enabled");
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var aj = "gl";
$.ajax({
url: '#Url.Action("PvCurrentWeatherConditions", "Weather")',
type: 'get',
data: {
lat: lat,
lon: lon,
aj: aj
},
success: function (result) {
$('.dvWeather').html(result);
}
});
}
public PartialViewResult PvCurrentWeatherConditions(string lat, string lon, string aj)
{
if (Request.IsAjaxRequest())
{
try
{
//TODO create Viewmodel
GeoCoordinate gc = new GeoCoordinate();
var latitude = gc.Latitude = Convert.ToDouble(lat);
var longitude = gc.Longitude = Convert.ToDouble(lon);
string latlon = latitude + "," + longitude;
var displayCurrentConditions = _igcc.CurrentConditions(latlon);
return PartialView("pvCurrentWeatherConditions");
}
catch (FormatException)
{
//TODO get ip address
return PartialView("pvLocationBasedOnIpAddress");
}
catch (Exception)
{
return PartialView("pvError");
}
}
return PartialView("pvLocationBasedOnIpAddress");
}

Perhaps use another method for checking if the visitor has javascript disabled, like noscript:
<noscript>
<meta http-equiv="refresh" content="[URL]?java=off">
</noscript>
then handle the querystring in a new action.

You don't have to remove the Render action. Just make another (negative) check in the div:
<div class="dvWeather">
<script type="text/javascript>
//if (!navigator.geolocation) { : Edit
if (navigator.geolocation == null) {
#{ Html.RenderAction("PvCurrentWeatherConditions", "Weather"); }
}
</script>
</div>
Edit:
if (navigator.geolocation != null) {
// alert("Geo-Enabled");
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
This way only one call will be made.
Hope it helps.

Related

Get geolocation on submit in Google Forms using Google Script

I have a Google Form where I want to get the user geolocation along with the inputs.
Currently, I'm able to get it by making the user click on a url after he submits the answers. This is the code in Google Script that does it:
function doGet() {
return HtmlService.createHtmlOutputFromFile("Index");
}
function getLoc(value) {
var destId = FormApp.getActiveForm().getDestinationId() ;
var ss = SpreadsheetApp.openById(destId) ;
var respSheet = ss.getSheets()[0] ;
var data = respSheet.getDataRange().getValues() ;
var headers = data[0] ;
var numColumns = headers.length ;
var numResponses = data.length;
var c=value[0]; var d=value[1];
var e=c + "," + d ;
if (respSheet.getRange(1, numColumns).getValue()=="GeoAddress") {
respSheet.getRange(numResponses,numColumns-2).setValue(Utilities.formatDate(new Date(), "GMT-3", "dd/MM/yyyy HH:mm:ss"));
respSheet.getRange(numResponses,numColumns-1).setValue(e);
var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
f= response.results[0].formatted_address;
respSheet.getRange(numResponses,numColumns).setValue(f);
}
else if (respSheet.getRange(1,numColumns).getValue()!="GeoAddress") {
respSheet.getRange(1,numColumns+1).setValue("GeoStamp");
respSheet.getRange(1,numColumns+2).setValue("GeoCode");
respSheet.getRange(1,numColumns+3).setValue("GeoAddress");
}
}
And the Index.html file:
<!DOCTYPE html>
<html>
<script>
(function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
})()
function showPosition(position){
var a= position.coords.latitude;
var b= position.coords.longitude;
var c=[a,b]
getPos(c)
function getPos(value){
google.script.run.getLoc(value);
}
}
</script>
</html>
Instead of making the user click on a url, I want the geolocation to be automatically inputed into the response sheet as the user submits the form. I'm able to make the getLoc function run on a submit trigger, however the html function doesn't run. I believe it might be because the doGet function is already a trigger, but it requires a browser page to be opened in order to run. If that's the case, the ideal solution would be to redirect the browser to the Google Script url after the user submits it, but I can't seem to find a way to do it. Is this the correct approach and how can I make it work?
Thanks in advance!

Maybe this works: https://www.youtube.com/watch?v=J93uww0vMFY
Tutorial on Geotagging (Geo-stamp and Time-stamp) google forms.
Add info on Latitude, Longitude, and Address (Street name and number, city, state, zip code, and country) of a device submitting google forms. Linking user’s location within google forms.
Google forms integration with google maps.
Links to download the scripts are given below:
Code.gs : https://www.youtube.com/redirect?v=J93uww0vMFY&event=video_description&q=https%3A%2F%2Fdrive.google.com%2Fopen%3Fid%3D1D4vTzUGZAf3_ZDVMeW760i1KoZCn37un&redir_token=VQ2rLeQvyQea-mq9_kGhh_Kxihd8MTU5MTgxOTM2OEAxNTkxNzMyOTY4
Index.html : https://www.youtube.com/redirect?v=J93uww0vMFY&event=video_description&q=https%3A%2F%2Fdrive.google.com%2Fopen%3Fid%3D1mYZGYNrXNOxUD8DlDmRdBajy1nc3FKtw&redir_token=VQ2rLeQvyQea-mq9_kGhh_Kxihd8MTU5MTgxOTM2OEAxNTkxNzMyOTY4

How to display location of visitor? [duplicate]

This question already has answers here:
Getting the location from an IP address [closed]
(20 answers)
Closed 2 years ago.
I managed to get the user's latitude and longitude using HTML-based geolocation.
//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get latitude and longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
}
I want to display the city name, it seems the only way to get it is to use a reverse geolocation API. I read Google's documentation for reverse geolocation but I don't know how to get the output on my site.
I don't know how to go use this: "http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true" to display the city name on the page.
How can I achieve this?

You would do something like that using Google API.
Please note you must include the google maps library for this to work. Google geocoder returns a lot of address components so you must make an educated guess as to which one will have the city.
"administrative_area_level_1" is usually what you are looking for but sometimes locality is the city you are after.
Anyhow - more details on google response types can be found here and here.
Below is the code that should do the trick:
<!DOCTYPE html>
<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>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
</body>
</html>

$.ajax({
url: "https://geolocation-db.com/jsonp",
jsonpCallback: "callback",
dataType: "jsonp",
success: function(location) {
$('#country').html(location.country_name);
$('#state').html(location.state);
$('#city').html(location.city);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#ip').html(location.IPv4);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>Country: <span id="country"></span></div>
<div>State: <span id="state"></span></div>
<div>City: <span id="city"></span></div>
<div>Latitude: <span id="latitude"></span></div>
<div>Longitude: <span id="longitude"></span></div>
<div>IP: <span id="ip"></span></div>
Using html5 geolocation requires user permission. In case you don't want this, go for an external locator like https://geolocation-db.com IPv6 is supported. No restrictions and unlimited requests allowed.
JSON: https://geolocation-db.com/json
JSONP: https://geolocation-db.com/jsonp
Example
For a pure javascript example, without using jQuery, check out this answer.

Another approach to this is to use my service, http://ipinfo.io, which returns the city, region and country name based on the user's current IP address. Here's a simple example:
$.get("http://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");
Here's a more detailed JSFiddle example that also prints out the full response information, so you can see all of the available details: http://jsfiddle.net/zK5FN/2/

You can get the name of the city, country, street name and other geodata using the Google Maps Geocoding API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
console.log(position.coords.latitude)
console.log(position.coords.longitude)
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function(location) {
console.log(location)
})
}
function error(err) {
console.log(err)
}
</script>
</body>
</html>
and to display this data on the page using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<p>Country: <span id="country"></span></p>
<p>State: <span id="state"></span></p>
<p>City: <span id="city"></span></p>
<p>Address: <span id="address"></span></p>
<p>Latitude: <span id="latitude"></span></p>
<p>Longitude: <span id="longitude"></span></p>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function(location) {
$('#country').html(location.results[0].address_components[5].long_name);
$('#state').html(location.results[0].address_components[4].long_name);
$('#city').html(location.results[0].address_components[2].long_name);
$('#address').html(location.results[0].formatted_address);
$('#latitude').html(position.coords.latitude);
$('#longitude').html(position.coords.longitude);
})
}
function error(err) {
console.log(err)
}
</script>
</body>
</html>

Here is updated working version for me which will get City/Town, It looks like some fields are modified in the json response. Referring previous answers for this questions. ( Thanks to Michal & one more reference : Link
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
// Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng);
}
function errorFunction() {
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({latLng: latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var arrAddress = results;
console.log(results);
$.each(arrAddress, function(i, address_component) {
if (address_component.types[0] == "locality") {
console.log("City: " + address_component.address_components[0].long_name);
itemLocality = address_component.address_components[0].long_name;
}
});
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}

geolocator.js can do that. (I'm the author).
Getting City Name (Limited Address)
geolocator.locateByIP(options, function (err, location) {
console.log(location.address.city);
});
Getting Full Address Information
Example below will first try HTML5 Geolocation API to obtain the exact coordinates. If fails or rejected, it will fallback to Geo-IP look-up. Once it gets the coordinates, it will reverse-geocode the coordinates into an address.
var options = {
enableHighAccuracy: true,
fallbackToIP: true, // fallback to IP if Geolocation fails or rejected
addressLookup: true
};
geolocator.locate(options, function (err, location) {
console.log(location.address.city);
});
This uses Google APIs internally (for address lookup). So before this call, you should configure geolocator with your Google API key.
geolocator.config({
language: "en",
google: {
version: "3",
key: "YOUR-GOOGLE-API-KEY"
}
});
Geolocator supports geo-location (via HTML5 or IP lookups), geocoding, address look-ups (reverse geocoding), distance & durations, timezone information and a lot more features...

After some searching and piecing together a couple of different solutions along with my own stuff, I came up with this function:
function parse_place(place)
{
var location = [];
for (var ac = 0; ac < place.address_components.length; ac++)
{
var component = place.address_components[ac];
switch(component.types[0])
{
case 'locality':
location['city'] = component.long_name;
break;
case 'administrative_area_level_1':
location['state'] = component.long_name;
break;
case 'country':
location['country'] = component.long_name;
break;
}
};
return location;
}

You can use https://ip-api.io/ to get city Name. It supports IPv6.
As a bonus it allows to check whether ip address is a tor node, public proxy or spammer.
Javascript Code:
$(document).ready(function () {
$('#btnGetIpDetail').click(function () {
if ($('#txtIP').val() == '') {
alert('IP address is reqired');
return false;
}
$.getJSON("http://ip-api.io/json/" + $('#txtIP').val(),
function (result) {
alert('City Name: ' + result.city)
console.log(result);
});
});
});
HTML Code
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div>
<input type="text" id="txtIP" />
<button id="btnGetIpDetail">Get Location of IP</button>
</div>
JSON Output
{
"ip": "64.30.228.118",
"country_code": "US",
"country_name": "United States",
"region_code": "FL",
"region_name": "Florida",
"city": "Fort Lauderdale",
"zip_code": "33309",
"time_zone": "America/New_York",
"latitude": 26.1882,
"longitude": -80.1711,
"metro_code": 528,
"suspicious_factors": {
"is_proxy": false,
"is_tor_node": false,
"is_spam": false,
"is_suspicious": false
}
}

As #PirateApp mentioned in his comment, it's explicitly against Google's Maps API Licensing to use the Maps API as you intend.
You have a number of alternatives, including downloading a Geoip database and querying it locally or using a third party API service, such as my service ipdata.co.
ipdata gives you the geolocation, organisation, currency, timezone, calling code, flag and Tor Exit Node status data from any IPv4 or IPv6 address.
And is scalable with 10 global endpoints each able to handle >10,000 requests per second!
This answer uses a 'test' API Key that is very limited and only meant for testing a few calls. Signup for your own Free API Key and get up to 1500 requests daily for development.
$.get("https://api.ipdata.co?api-key=test", function(response) {
$("#ip").html("IP: " + response.ip);
$("#city").html(response.city + ", " + response.region);
$("#response").html(JSON.stringify(response, null, 4));
}, "jsonp");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>ipdata.co - IP geolocation API</h1>
<div id="ip"></div>
<div id="city"></div>
<pre id="response"></pre>
The fiddle; https://jsfiddle.net/ipdata/6wtf0q4g/922/

Here is another go at it .. Adding more to the accepted answer possibly more comprehensive .. of course switch -case will make it look for elegant.
function parseGeoLocationResults(result) {
const parsedResult = {}
const {address_components} = result;
for (var i = 0; i < address_components.length; i++) {
for (var b = 0; b < address_components[i].types.length; b++) {
if (address_components[i].types[b] == "street_number") {
//this is the object you are looking for
parsedResult.street_number = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "route") {
//this is the object you are looking for
parsedResult.street_name = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_1") {
//this is the object you are looking for
parsedResult.sublocality_level_1 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_2") {
//this is the object you are looking for
parsedResult.sublocality_level_2 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "sublocality_level_3") {
//this is the object you are looking for
parsedResult.sublocality_level_3 = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "neighborhood") {
//this is the object you are looking for
parsedResult.neighborhood = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "locality") {
//this is the object you are looking for
parsedResult.city = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
parsedResult.state = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "postal_code") {
//this is the object you are looking for
parsedResult.zip = address_components[i].long_name;
break;
}
else if (address_components[i].types[b] == "country") {
//this is the object you are looking for
parsedResult.country = address_components[i].long_name;
break;
}
}
}
return parsedResult;
}

Here's an easy function you can use to get it. I used axios to make the API request, but you can use anything else.
async function getCountry(lat, long) {
const { data: { results } } = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${GOOGLE_API_KEY}`);
const { address_components } = results[0];
for (let i = 0; i < address_components.length; i++) {
const { types, long_name } = address_components[i];
if (types.indexOf("country") !== -1) return long_name;
}
}

Alternatively you could use my service, https://astroip.co, it is a new Geolocation API:
$.get("https://api.astroip.co/?api_key=1725e47c-1486-4369-aaff-463cc9764026", function(response) {
console.log(response.geo.city, response.geo.country);
});
AstroIP provides geolocation data together with security datapoints like proxy, TOR nodes and crawlers detection. The API also returns currency, timezones, ASN and company data.
It is a pretty new api with an average response time of 40ms from multiple regions around the world, which positions it in the handful list of super fast Geolocation APIs available.
Big free plan of up to 30,000 requests per month for free is available.

initiate POST method in jQuery without involving any input variables

I am new to jQuery and PHP. This might be a trivial question or not.
Normally jQuery handles form input, post it to PHP, and then let PHP passes it to a database.
In my case, I have the current user's geographic location and I compare the user's geographic location against the destination's geographic location in JavaScript. If those two locations are close which means the user is arrived at the destination, record in the database by inserting the destination's Identifier (let's just say Id =1 to keep it simple) for the current user under the Place_Id filed in database. The table in the database only has two columns (userId and placeId).
I wonder how to achieve by jQuery and PHP.
Here is the JavaScript code for geographic locations comparison.
I need help on the function postIt() to initiate PHP using jQuery and the associate PHP.
<script type="text/javascript" ,
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
var lat;
var long;
window.onload=function(){
getLocation();
}
function getLocation() {
if (navigator.geolocation) {
watchId = navigator.geolocation.watchPosition(showPosition, locationError,
{maximumAge:0, timeout:10000, enableHighAccuracy:true});
}
else {
alert("Browser doesn't support Geolocation. Visit http://caniuse.com to
discover browser support for the Geolocation API.");
}
}
function locationError(error) {} // error function here
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
lat = position.coords.latitude;
long = position.coords.longitude;
comparePosition();
}
function comparePosition()
{
var userCurrentLat = lat;
var userCurrentLong = long;
var Dest1_Lat = 38.00; //this is just for demo
var Dest1_Long = -72.00; //this is just for demo
if (userCurrentLat == Dest1_Lat
&& userCurrentLong == Dest1_Long)//just a simplified way of comparison
{
postIt();
}}
function postIt()
{ $.post ('insertDest1.php', {current_user_id, //pseudo jQuery code here
destinationId(1)}, callback function() ) //where I need help
}
</script>
PHP (insertDest1.php)
<?php
include ('mysqli_connect.php');
$query = "INSERT INTO user (userId,placeId) VALUES
('current_user_id' , '1')";
$result = #mysqli_query ($dbc, $query); // Run the query.
if ($result) { // If it ran OK.
// Print a message.
echo '<h1 id="mainhead">Success!</h1>';
}
else { // If it did not run OK.
echo '<h1 id="mainhead">Error</h1>';
}
?>

Use $.ajax for more configuration options:
function postIt()
{
$.ajax({
url: 'insertDest1.php',
type: 'POST',
data:{
userId: 'current_user_id', // replace with actual user id
placeId: 'the_place_id' // replace with actual place id
},
success: function(serverResponse) {
// handle output from server here ('Success!' or 'Error' from PHP script)
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// handle any network/server errors here
console.log("Status: " + textStatus);
console.log("Error: " + errorThrown);
}
});
}
Setup PHP file to handle POST data from AJAX
<?php
include ('mysqli_connect.php');
# Always sanitize input from $_POST variable to prevent SQL injection
$userId = $dbc->escape_string($_POST['userId']); // current_user_id
$placeId = $dbc->escape_string($_POST['placeId']); // the_place_id
$query = "INSERT INTO user (userId, placeId) VALUES ('".$userId."' , '".$placeId."')";
$result = #mysqli_query ($dbc, $query); // Run the query.
if ($result) { // If it ran OK.
// Print a message.
echo '<h1 id="mainhead">Success!</h1>';
}
else { // If it did not run OK.
// Print error.
echo '<h1 id="mainhead">Error</h1>';
}
?>

Empty Values in HiddenFields with Javascript

I'm calling the HTML geolocation method to get latitude and longitude and then storing them into 2 separate HiddenFields. These values from the HiddenFields will then be used in the server side (code behind) which will be stored in a table in my database. I searched high and low over stackoverflow to get help for empty values in HiddenFields, saving latitude and longitude into database, client and server side button click, etc.
I'm actually firing this javascript method based on a button, or do you think it's better to be fired window.onload?
I suspect that the functions aren't fired as well.. I have little knowledge on javascript.. Appreciate any help..
Javascript codes and HiddenFields in my WebForm:
<asp:HiddenField runat="server" ClientIDMode="Static" ID="latitudeTB"/>
<asp:HiddenField runat="server" ClientIDMode="Static" ID="longitudeTB"/>
<script type="text/javascript">
function HideLabel() {
var seconds = 3;
setTimeout(function () {
document.getElementById("<%=ErrorPanel.ClientID %>").style.display = "none";
}, seconds * 1000);
};
//GeoLocation Retrieval
var latJS = 0;
var lngJS = 0;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
//position.coords.latitude + "," + position.coords.longitude;
//var lat = document.getElementById("<%=latitudeTB.ClientID %>");
latJS = position.coords.latitude;
lngJS = position.coords.longitude;
document.getElementById("<%= latitudeTB.ClientID %>").value = latJS;
document.getElementById("<%= longitudeTB.ClientID %>").value = lngJS;
alert(document.getElementById("<%= latitudeTB.ClientID %>").value + " " + document.getElementById("<%= longitudeTB.ClientID %>").value);
/*if (lat) {
lat.value = position.coords.latitude;
}*/
//var long = document.getElementById("<%=longitudeTB.ClientID %>");
/*if (long) {
long.value = position.coords.longitude;
}*/
}
function call() {
getLocation();
showPosition(position);
}
</script>
FYI. The button is placed above the HiddenFields and Javascript..
Codes for asp:Button:
<asp:Button ID="BTN_Login" CssClass="btn btn-theme-dark" Text="Login" runat="server" OnClientClick="call();" OnClick="BTN_Login_Click" />
I did actually print out the values of the hiddenfields on server side but i'm getting no values at all..
Debug.WriteLine(latitudeTB.Value);
Debug.WriteLine(longitudeTB.Value);
I hope that the code i added is sufficient..

Setting this on button click event or on window load event boils down to what you what the user experience to be.
Most websites tend to show the geolocation prompt when the DOM is ready.
You need to tweak your getLocation function. getCurrentPosition takes success and error callbacks, both of which are not being passed.
function getLocation(opts) {
return new Promise(function(resolve, reject) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition( resolve,
reject,
opts
);
}
else {
reject(new ReferenceError('Browser does not support geolocation api'));
}
});
}
You can then use it this way:
function setLatLong(latId, longId) {
getLocation()
.then(function(pos) {
var coords = pos.coords;
document.getElementById(latId).value = coords.latitude;
document.getElementById(longId).value = coords.longitude;
})
.catch(function(err) {
// log or fall back to come other Location API?
})
}
function call() {
setLatLong(
"<%= latitudeTB.ClientID %>",
"<%= longitudeTB.ClientID %>");
}
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

Javascript Geolocation: Storing coordinates in an array

I created an HTML button:
...onclick="stLoc();"/>
which gears the stLoc() Javascript function.
My intention is to store the latitude inside the vaulesXarray.
Here's my code:
var valuesX=[];
//This is to show the current position:
function handleLoc(pos) {
var a=pos.coords.latitude;
var b=pos.coords.longitude;
var p = new L.LatLng(+a, +b);
mark(p);
}
//Here I intend to store the latitude using "valuesX.push":
function stLoc(pos) {
var a=pos.coords.latitude;
var b=pos.coords.longitude;
var p = new L.LatLng(+a, +b);
mark(p);
valuesX.push(a);
}
//And this is to enable the geolocation:
function handleErr(pos) {
document.write("could not determine location");
}
if (navigator.geolocation) {
navigator.geolocation.watchPosition(handleLoc,handleErr);
}
else {
document.write("geolocation not supported");
}
The output I get is an empty array.

Your stLoc() function is expecting pos object to be passed as first parameter.
But in your HTML part of example you're not passing this parameter to function:
<a "onclick="stLoc();">
This causes the error and the application flow breaks.
Update:
button
<script type="text/javascript">
var valuesX=[],
lastPos={a: -1, b: -1};
//This is to show the current position:
function handleLoc(pos) {
// in event handler remember lastPos to use it in stLoc on click.
lastPos.a = pos.coords.latitude;
lastPos.b = pos.coords.longitude;
var p = new L.LatLng(lastPos.a, lastPos.b);
mark(p);
}
//Here I intend to store the latitude using "valuesX.push":
function stLoc() {
if(lastPos.a != -1) {
valuesX.push(lastPos.a);
}
return false;
}
//And this is to enable the geolocation:
function handleErr(pos) {
document.write("could not determine location");
}
if(navigator.geolocation) {
navigator.geolocation.watchPosition(handleLoc,handleErr);
}
else {
document.write("geolocation not supported");
}
</script>

For guys looking out for code to implement this functionality in a different way..
Here is the code
<script language="javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script language="javascript">
function geoSuccess(e){
var lat = e.coords.latitude;
var lon = e.coords.longitude;
var myLoc = "Latitude: " + lat + '<br />Longitude: ' + lon;
$("#mylocation").html(myLoc);
}
function geoFailed(e){
$("#mylocation").html("Failed");
}
window.onload=function(e){
if ( navigator.geolocation){
navigator.geolocation.getCurrentPosition(geoSuccess, geoFailed);
} else {
// Error (Could not get location)
$("#mylocation").html("Failed");
}
}
</script>
<div id="mylocation"></div>

Develop Reference

JavaScript is the programming language of the Web.

MVC Controller getting hit twice on page load - javascript

Perhaps use another method for checking if the visitor has javascript disabled, like noscript: <noscript> <meta http-equiv="refresh" content="[URL]?java=off"> </noscript> then handle the querystring in a new action.

Related

Get geolocation on submit in Google Forms using Google Script

How to display location of visitor? [duplicate]

initiate POST method in jQuery without involving any input variables

Empty Values in HiddenFields with Javascript

Javascript Geolocation: Storing coordinates in an array

Categories

Resources