We Keep Coding

redirection using ajax with javascript variables passed in the url.

I am doing the following to pass the javascript variable from the view to
the controller:
default/rough2.html
{{extend 'layout.html'}}
<p id="demo">
</p>
<script>
var x=document.getElementById("demo");
jQuery(document).ready(function(){
geolocation();
})
function geolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon= position.coords.longitude;
ajax('{{=URL('default','rough3')}}'+'?lat='+lat+'&lon='+lon,[],':eval');
}
</script>
rough3() function
def rough3():
lat1=request.vars.lat
lon1=request.vars.lon
...........................
.......................
But it is "not getting redirected to rough3.html".I do not understand
why?Any help is highly appreciated!
Regards,
T

If you want to do a redirect via Javascript, just set window.location (an Ajax call does not load a new page in the browser window):
window.location = '{{=URL('default', 'rough3')}}' + '?lat=' + lat + '&lon=' + lon;

The entire point of Ajax is that it makes the HTTP request without leaving the current page.
If you want to go to a new URL, then assign it to location, don't use Ajax.

JSON get geolocation not returning value in HTML

I am trying to get geo coordinates and then return them into my HTML. This is the code I have so far, but it is not returning the coordinates onto my page:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#cityname").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
I have an id in my html named 'cityname'. I would also like to convert the coordinates into a city name.

Your code seems to work just fine:
https://jsfiddle.net/sexepm39/
Perhaps your div isn't available in the DOM when this code runs?
Try wrapping it as such:
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#cityname").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
});
As for getting the city name, this part of your question is already answered: Get city name using geolocation

GeoLocation fetching wrong latitude longitude

I am trying to fetch the current location using the geolocation . A month before it was giving correct location but not am getting different location . I have used the same code as below.
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
/*x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
*/ var query = "?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude;
var stateObj = { query: query };
history.pushState(stateObj, "query added", query);
var flag = true;
/*var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange=function(){if((r.readyState==4)&&(r.status==200)){ console.log('location was sended to server'); }};
req.open("GET","?latitude="+position.coords.latitude+"&longitude="+position.coords.longitude,true);
req.send(null);
*/
}
Another problem is its fetching the latlong based on isp not on IP. So if i use this code using mobile internet ! It gives latlong of another state. Is there any way to make this work again?

Undefined variable when passing javascript variable to PHP with AJAX

I am trying to build a simple mobile app that checks database and gives user the correct venue based on their location. Essentially, I have two files: one with geolocation, JavaScript and AJAX call, and another one with php that checks the database and sends the correct result back. Everything on its own is working perfectly fine, but when I try to send geolocation coordinates to PHP it returns undefined. Why does it not pick up the coordinates (they pop up in a separate window)? How can I fix it?
Here is my geolocation and AJAX code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var latitude;
var longitude;
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
alert("Geolocation is not supported by this browser");
}
function displayPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
var request = $.ajax({
url: "http://cs11ks.icsnewmedia.net/mobilemedia/ajax.php?latitude=" + latitude + "&longitude=" + longitude,
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#ajax").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
</script>
And here is the bit of PHP that handles these variables:
if (isset($_GET['latitude']) && isset($_GET['longitude'])) {
$latitude = $_GET['latitude'];
$longitude = $_GET['longitude'];
echo "Geolocation seems to work...";
echo $latitude;
echo $longitude;
//continue here
}else{
echo "Hello. I am your geolocation and I am not working.";
}
What I get is "Geolocation seems to work...undefinedundefined"

The Geolocation API is asynchronous, so you have to wait for the result to return
function displayPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$.ajax({
url : "http://cs11ks.icsnewmedia.net/mobilemedia/ajax.php",
data : {latitude : latitude, longitude : longitude},
type : "GET",
dataType : "html"
}).done(function(msg) {
$("#ajax").html(msg);
}).fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}

function displayPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
}
remove var in both variable. Those two are not visible outside displayPosition. When you use the $.ajax call you're using latitude and longitude declared right under the $(document).raedy() but you never assign nothing to them so they're undefined.
Hope this solve your issue.
P.S. You se the values in the alert because you're using ones from position, not from your variables.

Do not use var inside your displayPosition function. You do not want to declare new variables inside the scope of the function, you want to assign values to the existing variables you declared in the global scope earlier.

How do I get location name or city using latitude & longitudes?

I'm using the below code, but how to get the city name or the location name from the longitude & latitude?
var x=document.getElementById("location");
function getLocation()
{
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else {
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}

You can use the Google Maps v3 API to perform reverse geocoding on a latitude and longitude pair. You can find an example of how to do that here: https://developers.google.com/maps/documentation/geocoding/#ReverseGeocoding.