I have been working on this project for a while, but for some reason, the data won’t show up on the actual page, and I don’t know why. Here is the link to my project: http://codepen.io/ElisaL/pen/YNzada
I opened up your page and then displayed the error console which shows the error messages below. I’m using Safari on macOS, but Chrome and Firefox both have Developer options to let you display the console. Hopefully these messages will give you more to go on.
[Error] Error while parsing the 'sandbox' attribute: 'allow-modals' is an invalid sandbox flag. (YNzada, line 307) [Error] [blocked] Access to geolocation was blocked over insecure connection to http://s.codepen.io. Global Code (YNzada:68) [Error] ReferenceError: Can't find variable: weatherType (anonymous function) (YNzada:84) i (jquery.min.js:2:27157) fireWith (jquery.min.js:2:27916) ready (jquery.min.js:2:29719) J (jquery.min.js:2:29898) [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (weather, line 0)
Secondly, my Firefox debugger is saying
ReferenceError: weatherType is not defined. This could be caused by a number of issues including the requested data being corrupt/server down, the Ajax request failing, or just my computer not giving access to my location (I run on Linux, it does a lot of stuff without telling me ). However, I get the felling that the error is due to your Ajax call returning an error rather than a success. If you use the $.getJSON function it returns an error silently. Using the more generic $.ajax function takes a bit more boilerplate setup but gives you a lot more control over your ajax calls so I recommend using it until you become completely comfotable with ajax calls, you can read up on it here. $.getJSON is a shorthand function, and should be treated as such. Moving on I would look into JSONP, you have to use it sometimes with Codepen rather then JSON since you’re requesting data from one online URL to another online URL, which codepen will block for security reasons, you can read up on that here
Lastly, clean up your code a bit m8 , proper indentation and such. Nothing will annoy people reading your code more than messy syntax, its just good habit
EDIT: Also, realized your api URL throw’s a 404 error. Your string has lat=latitude and lon=longitude as a string. Instead, it should be “lat=” + latitude + “lon=” + longitude. That way it inputs the variables values, rather than just the words ‘latitude’ and ‘longitude’
Thank you so much for the error code!
Your reply helped me so much! It totally works now, thank you so much for the help!
(PS I also cleaned up my code )