so I've been fooling around with the Dark Sky Forecast API and I was able to get the weather of my own location be displayed onto a webpage. However I hard coded the longitude and latitude and I wanted to take it one stop further and let the user input their own. This is where it stopped working.
Before my code was simply just
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
//Waits until document is ready to run
jQuery(document).ready(function($) {
//Beginning of code
//Makes the request
$.ajax({
url : "https://api.darksky.net/forecast/MyKey/1111,-1111+?exclude=minutely,hourly,daily,alerts,flags",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['timezone'];
var temp_f = parsed_json['currently']['temperature'];
var complete = ("Current temperature in " + location + " is: " + temp_f);
$('#random').html("<h1>" + complete + "</h1>")
}
});
}
});
</script>
$('#search').click(getInfo);
});
</script>
And then I created some HTML fields (I used bootstrap just to keep things tidy) like this
<div class="input-group input-group-lg">
<input id="long" type="text" class="form-control" placeholder="Longitude" aria-describedby="sizing-addon1">
</div>
<div class="input-group input-group-lg">
<input id="lat" type="text" class="form-control" placeholder="Latitude" aria-describedby="sizing-addon1">
</div>
<div class="rand">
<button class="btn btn-primary btn-lg" role="button" id="search">Find my location and temperature!</button>
</div>
And I updated my script to look like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
//Waits until document is ready to run
jQuery(document).ready(function($) {
//Beginning of code
var getInfo = function(){
//Grabs the longitude and latitude
var Longitude = $('#long').val();
var Latitude = $('#lat').val();
//Makes the request
$.ajax({
url : "https://api.darksky.net/forecast/mykey/" + Longitude + ","+ Latitude + "+?exclude=minutely,hourly,daily,alerts,flags",
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['timezone'];
var temp_f = parsed_json['currently']['temperature'];
var complete = ("Current temperature in " + location + " is: " + temp_f);
$('#random').html("<h1>" + complete + "</h1>")
}
});
}
$('#search').click(getInfo);
});
However at this point it just doesn't work. I click my button and nothing happens. Maybe I did something wrong in the HTML portion because I barely made any changes to the script so I'm guessing that's not the problem.
Thank you so much!