I have pretty much doing this challenge for days and found many difficulties. First one is geolocation always does not work on chrome, at first i thought the fault is in my code, but turned out it works in firefox. Another one is my button keeps unusable i dont know whats wrong and it kinda killed my motivation. So here I am looking for kindred soul to help me point out my mistakes. Anyway here’s the link http://codepen.io/aw-kris/pen/PGqAGR?
As far as I know, $(".Cbtn").on("click", function(){...}) in your code won’t work because .Cbtn is not present in the DOM when the script loads.
uhmm but I think I add the span element with class Cbtn with js right after i made API call? do you have any idea what I should do to fix that lame mistake of mine?
I don’t think it’s an issue with the API call, but rather with the script itself. Check out this pen. Click the “Hello” button, then click the “World” button that pops up. Even though there’s a click event for button elements, the generated button doesn’t fire up this event. Your problem is similar.
Instead of creating the button by script, try putting it in the HTML, then set it to display: none; if you don’t want it to be visible at the start. Then when the weather data loads, change it to display: inline;.
alright thanks i somehow made it work, could you check? now whats left is geolocation always unable to retrieve location in chrome.
It’s not working for me in Safari. What’s frustrating (from a developer standpoint) is that the error is happening in the success callback. I tried adding an error callback in the $.ajax() function, but it never fired. Inspecting the response data, I can see that OpenWeatherMaps is sending a 404 because it can’t find my reasonably large and not completely unknown city. This is the data sent back
{cod: "404", message: "Error: Not found city"}
I don’t know why they would think it’s a good idea to send an error like this, but the response pretty clearly has a status of 200
Sorry, I’m ranting, which doesn’t help you one bit. While I was writing that up, it started working. The upshot is that OWM screwed up and there was nothing you could have done to prevent it without writing unreasonable amounts of error checking into your success callback. Here’s a tip that will help, though: Weather-icons has a built in mapping for OWM. Instead of writing your switch statement, you can instead assign a class like so:
var weatherIcon = "wi-owm-" + data.weather[0].id;
It will assign a CSS class that maps to the relevant weather icon! Lots of icons, one line of code!
As for Chrome, it doesn’t allow geolocation if the source is an insecure connection (connecting to codepen via http instead of https), and it won’t allow fetching from an insecure URL in the code if you are connected securely. Basically, unless you’re connected to the site via https and your API starts with https, it won’t work in Chrome. Your options are to either go with a different API, like DarkSky (my fav), or route the OWM API through a CORS proxy like crossorigin.me. Some people try to get user location through other means, like getting data from their IP address, but I don’t recommend this. It’s inaccurate, and I’m morally against the use of a user’s data if they can’t consent to it.
Even though the solution you gave will do just fine,i would like to point out that you can absolutely bind events to dynamically generated elements.Only thing you need to do is bind the event to a parent which already exist or you can bind it to the document which is used far more often.I forked your pen to do the necessary changes you can check it out here
2 Likes
@PortableStick I see, thats why it wont work in chrome no many times I tweak it, while it works just fine in firefox. Well thanks a lot for the tip I’ll use that later instead 
, and maybe I’ll try out the other API later. I’m actually aiming to finish the front-end dev course asap as i only have the intermediate and advanced front end challenge and a few advanced javascript left.
@kunalgupta05 umm I visited the pen and it still doesnt work for me? I’ll try to find out more about binding event tho, thanks for the clue anyway 
I’m aware that it’s possible, but I forgot how to do it 
Thanks for making me know it again
1 Like
Haha…no problem…happy to help! 
That’s weird it should work,anyways glad that you got the idea at least.