As dojo 1.7> don't provide OnLoad status handling, some nice features such as OnLoad in Jquery not really support by Dojo. Dojo have a similar feature such as ready or DomReady is close to OnLoad, let us have a look.
I had some dojo form fields need to be checked on the page loaded. Those fields mainly was used to hold browser geoLocation information to facilitate user find local business information, I need a OnLoad function to check browser have geoLocation support or not, if it is, dojo script will populate user browser latitude and longitude information to a dojo form fields, other wise, I need enable an other field such as postcode to be changed to "required" to ask user provide his local postcode.
My dojo script looks like:
<script type="text/javascript">
require(["dojo/ready","dojo/dom","dojo/dom-attr"], function(ready,dom,domAttr){
ready(function(){
var Geo = {};
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error);
}else{
}
function success(position) {
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
populateHeader(Geo.lat, Geo.lng);
}
function error() {
console.log("Geocoder failed");
domAttr.set(dom.byId("criteria_postcode"),"required",true);
}
function populateHeader(lat, lng) {
dom.byId("criteria_latitude").value=Number(lat);
dom.byId("criteria_longitude").value=Number(lng);
}
});
});
</script>
This function supposed will be load on DOM ready, but it never work properly. criteria_postcode field never be set to required in the page.
I also tried to test on submit event function by using dojo script, my code looks like:
<script type="dojo/on" data-dojo-event="submit">
if(this.validate()){
require(["dijit/focus", "dojo/dom", "dojo/domReady!"], function(focusUtil,dom){
// fetch a node by id="someNode"
var pcnode = dom.byId("criteria_postcode");
var latnode = dom.byId("criteria_latitude");
var lngnode = dom.byId("criteria_longitude");
console.log(pcnode.value+"|"+latnode.value+"|"+lngnode.value);
});
return confirm('Form is valid, press OK to submit');
}
This paragraph of dojo script will print out a console log and waiting for user click ok to confirm before submit to server.
Unfortunately, firefox works but not for safari, safari print out the console log after submit, is that true? I was confused.
domReady is the right approach, but instead of doing it aty submit time, you should do it at load time.
also defining all function and then running the navigator.geolocation is better:
<script type="text/javascript">
require(["dojo/dom","dojo/dom-attr","dojo/domReady!"], function(dom,domAttr){
var Geo = {};
function success(position) {
Geo.lat = position.coords.latitude;
Geo.lng = position.coords.longitude;
populateHeader(Geo.lat, Geo.lng);
}
function error() {
console.log("Geocoder failed");
domAttr.set(dom.byId("criteria_postcode"),"required",true);
}
function populateHeader(lat, lng) {
dom.byId("criteria_latitude").value=Number(lat);
dom.byId("criteria_longitude").value=Number(lng);
}
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success, error);
}else{
}
});
</script>
At submit time, you obviously don't need to use dojo/domReady! (DOM is ready otherwise user could not submit)
Related
im building an app through phonegap, with a geolocation button.
if a user denies permission for geolocation the first time, how can i ask for permission again when they click the geolocation button again?
my code structure at the moment is:
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, positionError);
} else {
hideLoadingDiv()
showError('Geolocation is not supported by this device')
}
}
function positionError() {
hideLoadingDiv()
showError('Geolocation is not enabled. Please enable to use this feature')
}
You can't.
The only thing you can do is to display the instructions to reactivate the location sharing in his browser's settings (https://support.google.com/chrome/answer/142065?hl=en).
Two ways of doing this:
If you have a version of Chrome bigger than 83.0.4103.97 then use the lock icon in the URL
For older versions of Chrome the bellow code will work fine:
The bellow code only works on Chrome.
Steps:
Open Chrome
Open the console
Copy in the console
var allowGeoRecall = true;
var countLocationAttempts = 0;
Copy in the console the functions
function getLocation() {
console.log('getLocation was called')
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
positionError);
} else {
hideLoadingDiv()
console.log('Geolocation is not supported by this device')
}
}
function positionError() {
console.log('Geolocation is not enabled. Please enable to use this feature')
if(allowGeoRecall && countLocationAttempts < 5) {
countLocationAttempts += 1;
getLocation();
}
}
function showPosition(){
console.log('posititon accepted')
allowGeoRecall = false;
}
Run the function in the console
getLocation();
After running this you will be asked to allow to share your position. If your response is negative you will be asked again until you agree.
HINT: If your user has a negative response, let him know why you need the coordinates. Is vital for him to understand that this step is vital for the good run of the web app.
This can be reset in Page Info which can be accessed by clicking the lock icon next to the URL and allowing Location
I'm working with the HTML5 geolocation api. I'm getting a weird error. i got a function called doGeolocate that is called when the user land on the page. That load the map with the wright location data. And i got a button that recall the same function when ever the user want to recenter the map. But when a user tap the button on a desktop(chrome,opera, safari) except firefox it doesn't work.
While on the other there is no problem. Once debug it seem like the code locationCallback isn't call properly the second time even tho it is on load.
doGeolocate: function(){
if (navigator.geolocation) {
console.log("doGeolocate");
var locationCallback = helper.callback(this, function(position) {
this.initialGeolocationPosition(position);
if(!this.positionMarker){
this.createPositionMarker(position);
}
});
var err = function(err) {
console.log("");
};
var options = {
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(locationCallback,err,options);
}
},
im building an app through phonegap, with a geolocation button.
if a user denies permission for geolocation the first time, how can i ask for permission again when they click the geolocation button again?
my code structure at the moment is:
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, positionError);
} else {
hideLoadingDiv()
showError('Geolocation is not supported by this device')
}
}
function positionError() {
hideLoadingDiv()
showError('Geolocation is not enabled. Please enable to use this feature')
}
You can't.
The only thing you can do is to display the instructions to reactivate the location sharing in his browser's settings (https://support.google.com/chrome/answer/142065?hl=en).
Two ways of doing this:
If you have a version of Chrome bigger than 83.0.4103.97 then use the lock icon in the URL
For older versions of Chrome the bellow code will work fine:
The bellow code only works on Chrome.
Steps:
Open Chrome
Open the console
Copy in the console
var allowGeoRecall = true;
var countLocationAttempts = 0;
Copy in the console the functions
function getLocation() {
console.log('getLocation was called')
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
positionError);
} else {
hideLoadingDiv()
console.log('Geolocation is not supported by this device')
}
}
function positionError() {
console.log('Geolocation is not enabled. Please enable to use this feature')
if(allowGeoRecall && countLocationAttempts < 5) {
countLocationAttempts += 1;
getLocation();
}
}
function showPosition(){
console.log('posititon accepted')
allowGeoRecall = false;
}
Run the function in the console
getLocation();
After running this you will be asked to allow to share your position. If your response is negative you will be asked again until you agree.
HINT: If your user has a negative response, let him know why you need the coordinates. Is vital for him to understand that this step is vital for the good run of the web app.
This can be reset in Page Info which can be accessed by clicking the lock icon next to the URL and allowing Location
I am new to Java scripting and need quick help. Here is my code:
<html>
<head>
<title> GeoLocation Application </title>
<script>
$counter=0;
while ($counter < 10) {
if (!navigator.geolocation) {
alert('Your browser does not support geolocation');
} else {
navigator.geolocation.getCurrentPosition(success, error);
document.write("Count ",$counter,"<br>");
}
$counter ++;
}
function success(position) {
lat = position.coords.latitude;
lng = position.coords.longitude;
alert (lat +','+lng);
document.write("calling update mysql");
//document.location='update_java_data.php?lat=' + lat+'&lng='+lng;
}
function error(error) {
alert('an erro occured, error code is '+error);
}
</script>
</head>
<body>
<h1> Hello </h1>
</body>
</html>
I am trying to get coordinates using navigator 10 times. But when I am seeing only a quick list of counter display from 0 to 9, but only once it displays ""calling update mysql".
To me it means it only executed success function once.
Any idea how I can make it get the coordinate 10 times (means it should also call success function 10 times I guess)?
I would suggest instead looking at using the setInterval function to do your lat/long collection at specified intervals... If what you have above runs successfully, it would probably collect the same point 10 times quickly.
So, since you do those function calls without any type of a wait/interval, they all fire off at basically the same time (0-9 counter display)... As for only seeing the 'calling update mysql' once, I would imagine that it has something to do with you changing the location of the window to a different url, and the other calls not being able to reach the success function since you have already mo
I'm working on a script that needs to grab my geolocation. It works most of the time, However every now and then the geolocation is not aquired and I have to restart the browser for it to work again. This occurs in Safari and FF (Not tested in IE and Chrome). Does anybody know what could be causing this? I'm using this bit of code from the book "HTML 5".
<script type="text/javascript">
function loadDemo() {
if(navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
navigator.geolocation.getCurrentPosition(updateLocation);
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if (!latitude || !longitude) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser, but location is currently not available.";
return;
}
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
}
FF sometimes hangs, don't know about safari. It doesnt work in IE yet as far as i know. It seems to work great in Chrome so far.
You can "solve" this by setting a timeout. It still doesn't work but at least the script is terminated after a while. I use this code.
If you you found a good fix please let me know.
navigator.geolocation.getCurrentPosition(
function(position) {
//succes handler
},
function errorCallback(error) {
//error handler
},
{
enableHighAccuracy:false,
maximumAge:Infinity,
timeout:5000
}
);