Weather API via Iframe jQuery Ajax Tutorial
We’re trying out an exciting Weather API by Weather Underground today. It’s not that the Weather Underground API is just about weather, because, at the very least, there are means to access information in the following areas of interest …
- Geolookup
- Astronomy
- Current Conditions
- Three day forecast
- Almanac
Many established APIs require, at least for some of the access to information, an API Key personalised for your own use by applying for one. Today, though, we concentrate on an …
- AutoComplete
… set of Weather Underground API functionality, where the data is supplied, very generously, without that API Key. You may recall us talking about AutoComplete ideas previously at this blog at this link. Also of interest with today’s work might be tutorials about jQuery Ajax, a technology we also use today. Adding to that, it would be good to become familiar with the JSON protocol we’ve talked about with these tutorials.
Okay, with all that under your belt, what we do with the work today, is to have a single HTML input type=text element set to have the autocomplete property to off, because we intend to use our own auto completion today. As the user types into the text field, after the third character, via the onkeyup keyboard event, we will use jQuery Ajax techniques, housed in our HTML iframe element “child” PHP using_key.php helper code, where we will house the jQuery Ajax code for a wide variety of calling methods needed to glean information from the truly international Weather Underground data set.
We have to thank this useful link for the great advice that set us in the right direction interpreting the JSON array (RESULTS) response for the AutoCompletion call we made. At one stage we attempted a PHP file_get_contents call instead, but this did not work, as Weather Underground appears to much prefer a GET Ajax call methodology instead.
Effectively, what our “parent” HTML web application you could call autocomplete.html does is to populate an HTML (select element) dropdown housed in the “parent” from the “child” that is called by the parent as a result of that keyboard onkeyup event. This dropdown is a multiple mode selection dropdown, and so we also provide an HTML input type=button to click or tap when you are finished selecting any relevant Weather Underground data items of relevance. And just for today, those selections have their data gathered together into a call to our recent tz_places.php (amended in this way) as an interfacing approach involving Weather Underground data items …
- Place name
- Latitude
- Longitude
- Country Code
- Timezone Name
So we have a work in progress, but we really hope you try out our live run today to get a feel for the possibilities this great API can give to you.
If this was interesting you may be interested in this too.
