{"id":27612,"date":"2017-01-18T03:01:08","date_gmt":"2017-01-17T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27612"},"modified":"2017-01-18T19:59:14","modified_gmt":"2017-01-18T09:59:14","slug":"weather-api-via-iframe-jquery-ajax-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-tutorial\/","title":{"rendered":"Weather API via Iframe jQuery Ajax Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/weather\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Weather API via Iframe jQuery Ajax Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/weather\/IMG_0857.PNG\" title=\"Weather API via Iframe jQuery Ajax Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Weather API via Iframe jQuery Ajax Tutorial<\/p><\/div>\n<p>We&#8217;re trying out an exciting Weather API by <a target=_blank title='Weather Underground' href='http:\/\/www.wunderground.com'>Weather Underground<\/a> today.  It&#8217;s not that the Weather Underground API is just about <i>weather<\/i>, because, at the very least, there are means to access information in the following areas of interest &#8230;<\/p>\n<ul>\n<li>Geolookup<\/li>\n<li>Astronomy<\/li>\n<li>Current Conditions<\/li>\n<li>Three day forecast<\/li>\n<li>Almanac<\/li>\n<\/ul>\n<p>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 &#8230;<\/p>\n<ul>\n<li>AutoComplete<\/li>\n<\/ul>\n<p> &#8230; set of Weather Underground API functionality, where the data is supplied, very generously, without that API Key.  You may recall us talking about <a target=_blank title='AutoComplete information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/Autocomplete'>AutoComplete<\/a> ideas previously at this blog at <a target=_blank title='AutoComplete tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/autocompletion'>this link<\/a>.  Also of interest with today&#8217;s work might be tutorials about <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a>, a technology <a target=_blank title='jQuery Ajax blog posting here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=jQuery+Ajax'>we also use<\/a> today.  Adding to that, it would be good to become familiar with the <a target=_blank title='JSON information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/JSON'>JSON<\/a> protocol we&#8217;ve talked about with <a target=_blank title='JSON tutorials here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/json'>these tutorials<\/a>.<\/p>\n<p>Okay, with all that under your belt, what we do with the work today, is to have a single HTML <i>input<\/i> type=text element set to have the <i>autocomplete<\/i> property to <i>off<\/i>, because we intend to use our own auto completion today.  As the user types into the text field, after the third character, via the <i>onkeyup<\/i> keyboard event, we will use jQuery Ajax techniques, housed in our HTML <i>iframe<\/i> element &#8220;child&#8221; PHP <a target=_blank title='using_key.php' href='http:\/\/www.rjmprogramming.com.au\/weather\/using_key.php_GETME'>using_key.php<\/a> 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.<\/p>\n<p>We have to thank this <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/31624481\/jquery-autocomplete-using-with-weather-underground-api'>useful link<\/a> 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.<\/p>\n<p>Effectively, what our &#8220;parent&#8221; HTML web application you could call <a target=_blank title='autocomplete.html' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html_GETME'>autocomplete.html<\/a> does is to populate an HTML (select element) dropdown housed in the &#8220;parent&#8221; from the &#8220;child&#8221; that is called by the parent as a result of that keyboard <i>onkeyup<\/i> event.  This dropdown is a <i>multiple<\/i> mode selection dropdown, and so we also provide an HTML <i>input<\/i> 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 <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------GETME'>tz_places.php<\/a> (amended in <a target=_blank title='tz_places.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php------GETME'>this way<\/a>) as an interfacing approach involving Weather Underground data items &#8230;<\/p>\n<ul>\n<li>Place name<\/li>\n<li>Latitude<\/li>\n<li>Longitude<\/li>\n<li>Country Code<\/li>\n<li>Timezone Name<\/li>\n<\/ul>\n<p>So we have a work in progress, but we really hope you try out our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/weather\/autocomplete.html'>live run<\/a> today to get a feel for the possibilities this great API can give to you.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27612' onclick='var dv=document.getElementById(\"d27612\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27612' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re trying out an exciting Weather API by Weather Underground today. It&#8217;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 &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,88,103,117,2125,1695,429,576,652,663,664,2092,1812,932,997,2124,1319,1399],"class_list":["post-27612","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-api","tag-array","tag-auto-completion","tag-autocomplete","tag-autocompletion","tag-file_get_contents","tag-html","tag-javascript","tag-jquery","tag-json","tag-multiple","tag-onkeyup","tag-php","tag-programming","tag-response","tag-tutorial","tag-weather"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27612"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=27612"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27612\/revisions"}],"predecessor-version":[{"id":27623,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27612\/revisions\/27623"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}