Akilian Posted January 31, 2017 Share Posted January 31, 2017 (edited) My weather function works when I enter the coordinates myself. I'm trying to use a get location function to find and enter them in but it's not working. Please help. //////////////////////////////////////////////////////////////////////////////////////////////// var x = document.getElementById("demo"); function showLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; x.innerHTML = latitude + "," + longitude; } function errorHandler(err) { if(err.code === 1) { alert("Error: Access is denied!"); } else if( err.code === 2) { alert("Error: Position is unavailable!"); } } function getLocation(){ if(navigator.geolocation){ // timeout at 60000 milliseconds (60 seconds) var options = {timeout:60000}; navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); } else{ alert("Sorry, browser does not support geolocation!"); } } /////////////////////////////////////////////////////////////////////////////////////////////// function updateWeather() { var xmlHttp = new XMLHttpRequest(), location = x; xmlHttp.overrideMimeType("application/json"); xmlHttp.open("GET", URL_WEATHER_DATA + location + URL_WEATHER_DATA2,false); Edited January 31, 2017 by Akilian Link to comment Share on other sites More sharing options...
davej Posted January 31, 2017 Share Posted January 31, 2017 Have you read through this? http://www.w3schools.com/html/html5_geolocation.asp http://www.w3schools.com/js/js_ajax_examples.asp In your above code you have a global var x declared as an element and then later you seem to think it is a string? Link to comment Share on other sites More sharing options...
Ingolme Posted January 31, 2017 Share Posted January 31, 2017 As davej said, the main problem is that you're treating x as a string when it's an HTML element. Aside from that, you shouldn't have a global variable called "location" because it's masking the window.location object. Make it local by declaring it with the var keyword. Link to comment Share on other sites More sharing options...
Akilian Posted January 31, 2017 Author Share Posted January 31, 2017 Have you read through this? http://www.w3schools.com/html/html5_geolocation.asp http://www.w3schools.com/js/js_ajax_examples.asp In your above code you have a global var x declared as an element and then later you seem to think it is a string? Yes, I have read those. i can get the coordinates to send via alert but cannot link it with the weather function. What should I put for location so it calls for the coordinates. And, thank you both for the assistance. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 31, 2017 Share Posted January 31, 2017 The showLocation function should call the weather function and pass the coordinates, or just use the weather function as the callback for getCurrentPosition. Link to comment Share on other sites More sharing options...
Akilian Posted January 31, 2017 Author Share Posted January 31, 2017 The showLocation function should call the weather function and pass the coordinates, or just use the weather function as the callback for getCurrentPosition. Would you mind showing me? I would be grateful. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 31, 2017 Share Posted January 31, 2017 navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options); You tell it which function to call when it gets the position, so tell it to call updateWeather and then change that function so that it takes the passed coordinates and uses them. Link to comment Share on other sites More sharing options...
Akilian Posted January 31, 2017 Author Share Posted January 31, 2017 (edited) navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options); You tell it which function to call when it gets the position, so tell it to call updateWeather and then change that function so that it takes the passed coordinates and uses them. Is this right? var x = document.getElementById("demo"); function showLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; x.innerHTML = latitude + "," + longitude; navigator.geolocation.getCurrentPosition(updateWeather, errorHandler); } function errorHandler(err) { if(err.code === 1) { alert("Error: Access is denied!"); } else if( err.code === 2) { alert("Error: Position is unavailable!"); } } function getLocation(){ if(navigator.geolocation){ // timeout at 60000 milliseconds (60 seconds) var options = {timeout:60000}; navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options); } else{ alert("Sorry, browser does not support geolocation!"); } } And in the weather function, what do I put in the url? xmlHttp.open("GET", URL_WEATHER_DATA + getLocation() + "?exclude=hourly,minutely,alerts,flags?units=auto",false); Edited January 31, 2017 by Akilian Link to comment Share on other sites More sharing options...
justsomeguy Posted January 31, 2017 Share Posted January 31, 2017 No, you added that line to showLocation for some reason. I'm suggesting that you change the line in getLocation where you call navigator.geolocation.getCurrentPosition and tell it to use updateWeather as the callback function instead of showLocation, or whatever you want to name the callback. Then that callback function should do everything that you want to happen once you get the location, so it should update that element's innerHTML if you want, send an ajax request, or whatever else you want to happen after you get the location. 1 Link to comment Share on other sites More sharing options...
Akilian Posted January 31, 2017 Author Share Posted January 31, 2017 I'm starting to understand but I'm having issues with the url. if(navigator.geolocation){ // timeout at 60000 milliseconds (60 seconds) var options = {timeout:60000}; navigator.geolocation.getCurrentPosition(updateWeather, errorHandler, options); } else{ alert("Sorry, browser does not support geolocation!"); } } function updateWeather(position) { var coords = document.getElementById(); coords.innerHTML = position.coords.latitude + "," + position.coords.longitude; xmlHttp.open("GET", URL_WEATHER_DATA + coords.innerHTML + "?exclude=hourly,minutely,alerts,flags?units=auto",false); Link to comment Share on other sites More sharing options...
justsomeguy Posted February 1, 2017 Share Posted February 1, 2017 What is URL_WEATHER_DATA set to? That doesn't look right because of the question marks, a URL should only contain one. Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 (edited) URL_WEATHER_DATA = "https://api.darksky.net/forecast/gfgdfgsdgfsghsrtghshgh/" Gibberish is my api. This works if I manually plug in the coordinates. xmlHttp.open("GET", URL_WEATHER_DATA + "30,-90" + "?exclude=hourly,minutely,alerts,flags?units=auto",false); Edited February 1, 2017 by Akilian Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 I dont think that its getting the coords. When I alert(position.coords.latitude + "," + position.coords.longitude); nothing happens. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 1, 2017 Share Posted February 1, 2017 If it doesn't show the alert box at all then that code isn't even being run. Make sure you're checking your browser's developer console for error messages. Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 It did work when the showPosition was out of the weather function. I'll have to troubleshoot. Thanks for your help. Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 Well, I got the alerts to display, but still no weather. function showLocation(position) { var xmlHttp = new XMLHttpRequest(), latitude = position.coords.latitude, longitude = position.coords.longitude, weatherInform, elWeatherIcon = document.querySelector("#weather-icon"), elWeatherTemp = document.querySelector("#weather-temp"), elWeatherMax = document.querySelector("#weather-max"), elWeatherMin = document.querySelector("#weather-min"), elWeatherSum1 = document.querySelector("#weather-sum1"), coords, weather, weatherMax, weatherMin, weatherSum1, weatherIcon, weatherTemp; weather = URL_WEATHER_DATA + coords + URL_WEATHER_DATA2; coords = latitude + "," + longitude; alert(weather); alert(coords); xmlHttp.overrideMimeType("application/json"); xmlHttp.open("GET", weather, false); if (xmlHttp.responseText) { // Parses responseText to JSON weatherInform = JSON.parse(xmlHttp.responseText); weatherIcon = weatherInform.currently.icon; weatherSum1 = weatherInform.daily.data[0].summary; weatherTemp = weatherInform.currently.temperature; weatherMax = weatherInform.daily.data[0].temperatureMax; weatherMin = weatherInform.daily.data[0].temperatureMin; elWeatherMax.innerHTML = weatherMax + " / "; elWeatherMin.innerHTML = weatherMin; elWeatherTemp.innerHTML = weatherTemp; elWeatherSum1.innerHTML = weatherSum1; elWeatherIcon.style.backgroundImage = "url('./image/weather_icon/" + weatherIcon + ".png')"; } xmlHttp.send(); } Link to comment Share on other sites More sharing options...
justsomeguy Posted February 1, 2017 Share Posted February 1, 2017 You may want to use console.log instead of alert so that it doesn't block execution, you can find the data in the browser's developer console. It looks like coords is undefined when you build the URL, and it looks like your ajax code is out of order because you switched to a synchronous request and got rid of the ajax callback, but you check the response before sending the request. Other than that, you need to keep validating everything that you're doing. Use console.log to print all of your variables and things in the console so that you can verify everything that you're doing, so that you know what the code is doing. Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 Will do. I'll let you know what I come up with. Link to comment Share on other sites More sharing options...
Akilian Posted February 1, 2017 Author Share Posted February 1, 2017 It's working now. it was xmlHttp.send(); in the wrong place. Thank you so much for your help. I remember why I liked to do this years ago. Link to comment Share on other sites More sharing options...
Akilian Posted February 3, 2017 Author Share Posted February 3, 2017 What is var options = {timeout:60000}; for? Link to comment Share on other sites More sharing options...
justsomeguy Posted February 3, 2017 Share Posted February 3, 2017 I don't see that in your code. In general, that creates an object with a single property called "timeout" set to that value. Link to comment Share on other sites More sharing options...
Akilian Posted February 7, 2017 Author Share Posted February 7, 2017 Based on my code, is there a way to limit the calls to one call per hour? Link to comment Share on other sites More sharing options...
justsomeguy Posted February 7, 2017 Share Posted February 7, 2017 If you don't want to get the location more than once per hour, you could use localStorage or cookies to store the last position and the last time you got it, and check that before trying to get the location. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now