Weather API via Iframe jQuery Ajax AutoComplete Tutorial

Weather API via Iframe jQuery Ajax AutoComplete Tutorial

Weather API via Iframe jQuery Ajax AutoComplete Tutorial

It’s time to (re-)turn our attention to our Weather Underground API inspired web application, at its “parent” level, and just there. At this web application’s “parent” level we use the great Weather Underground API autocompletion functionality you may recall from Weather API via Iframe jQuery Ajax Map Tutorial to add in …

  • ability to filter locations via two letter ISO country codes
  • ability to access hurricane information

… which involved the tweaking of both the …

Along the way, we changed the means by which using_key.php above is called into play. You may recall, in tutorials below, how we were a bit cautious regarding using_key.php bandwidth thoughts by only calling it on or after three characters worth of user supplied “place” query data. Today, we open that up to “on or after one character”. This is for three reasons …

  1. we think bandwidth-wise we were being a bit cautious … and …
  2. the work of Google Chart Map Chart Time Zone Supervised Tutorial is not as exciting in its scope if you wait for three characters at the …
  3. start … and there’s the rub … we looked into whether the Weather Undergound API autocompletion logic allowed for wildcard (or regex) entries for queries not involving “the start of” locations and/or hurricanes, but, as you can imagine (but it was worth an investigation), no (for fairly obvious reasons) … and so just looking at the first 3 characters, and supposing you enter something like “San” you realize it is a bit restrictive, whereas if you allow an entry of “S” to start the Weather Undergound API autocompletion logic to do its magic, then Time Zone Places spread all over the world are quite interesting and possible

And so, in answer to “what’s new”? Hurricane research is new.


Previous relevant Google Chart Map Chart Time Zone Supervised Tutorial is shown below.

Google Chart Map Chart Time Zone Supervised Tutorial

Google Chart Map Chart Time Zone Supervised Tutorial

The recent Google Chart Map Chart Time Zone Lookup Tutorial as shown below concentrated on our Google Chart Map Chart interfacing web application, concentrating on its independent mode of use, and today, as with WordPress 4.1.1’s Google Chart Map Chart Time Zone Supervised Tutorial, we turn our attention to it being supervised as a “grandchild” HTML iframe web application to help out the “parent” web application of Weather API via Iframe jQuery Ajax Map Tutorial via changed to the middle PHP “child” web application, changed to look up and down to consolidate form data into a top level form controlling a top level HTML iframe of Google Chart Map Chart Time Zone places.

Of course, none of this is possible without a lot of manipulation of HTML form and iframe elements, the form element POSTing to the iframe up at the parent.document “parent” web application level.

These new interfacings affect both the “parent” HTML and (the code underlying the) “grandchild” PHP pieces of code so that …

  • the “parent” changes here today revolve around building on techniques we used in the tz_places.php PHP code of Weather API via Iframe jQuery Ajax Map Tutorial and this involved changes to tz_places.php PHP code has this live run “parent” using the changed “child” HTML iframe web application now organising a top level collection of Google Chart Map Chart Time Zone places with onclick “select” event access to both Weather Underground links and to Time Zone information links to Time Zone Converter webpages, and which changed in this way to accomodate this new functionality
  • map.php PHP code has this live run (relevant, because these changes make the “grandchild” Map Chart web application independently able to access this new place name interfacing improvements) and it changed for these new ideas in this way (for an expectedly required phase 3 of the changes to the “grandchild” regarding Weather Underground linkage support)

Please try it out for yourself to see what we are describing above.


Previous relevant Google Chart Map Chart Time Zone Primer Tutorial is shown below.

Google Chart Map Chart Time Zone Lookup Tutorial

Google Chart Map Chart Time Zone Lookup Tutorial

We’re upgrading our Google Chart Map Chart web application interface for independent, and supervised, Time Zone place usage, building on the start to this yesterday with Google Chart Map Chart Time Zone Primer Tutorial. Yesterday we considered the case where the user defines, at the Place Name Javascript prompt window …

Sydney|Australia/Sydney|+11|12:50

… type of entry followed by a Latitude,Longitude follow up Javascript prompt window, for those occasions where the chooser wants to define their own Time Zone place information. Today we cater for entries at the Place Name prompt window such as …

Sydney

… and the web application Javascript, via PHP help, helps out at the Latitude,Longitude prompt window with a default suggestion of …

|Australia/Sydney|+11|2017/02/01/12:50;-33.86667,151.21666

… because in the meantime it has looked up the Time Zone place name information for the Australia/Sydney Time Zone to suggest this as the Time Zone and Geographical Latitude and Longitude for your “Sydney” place name. Of course, you do not have to accept the default answer, but it is there should you want that information to be retained at future onclick “select” event Javascript prompt windows that display later if you click on the Sydney tag on the Google Chart Map Chart that follows all your typed in entries.

These new interfacings affect both the “parent” HTML and (the code underlying the) “grandchild” PHP pieces of code so that …

  • the “parent” changes we’ll be showing you soon
  • map.php PHP code has this live run (relevant, because these changes make the “grandchild” Map Chart web application independently able to access this new place name interfacing improvements) and it changed for these new ideas in this way (for phase two of two of the changes to the “grandchild”) … the great help for the changes here today revolved around techniques we used in the tz_places.php PHP code of Weather API via Iframe jQuery Ajax Map Tutorial

We hope you try a live run link to see this in context, but, in the meantime to view the “A Few Australian Places” featured in the tutorial picture here.


Previous relevant Google Chart Map Chart Time Zone Primer Tutorial is shown below.

Google Chart Map Chart Time Zone Primer Tutorial

Google Chart Map Chart Time Zone Primer Tutorial

The advantage our Map Chart interfacing web application has regarding its use of the Google Charts API is that it is written in a serverside language, that being PHP, and that means that after questions it could go up and look up an interactively entered piece of information from the user and compare it against a database or file, or in our case, soon, with a set of inbuilt PHP Time Zone functions, to link “where” and “when”, perhaps, by linking a user entered place name with a Time Zone name, perhaps. As with many such interfacings, this will not work for every place, of course, and our initial draft of interfacing changes with our Map Chart web application, rely on an exact match of place names with Time Zone place names, but we’ll see over time some other ideas we can try to improve this all the more.

If we do find a link to a Time Zone place name, we’ll present the user, in the onclick “select” event logic, a chance to delve further into other deeper sources of information here. Applications often refer to this idea as “drilling down” into the data. We’ll be doing that aspect to the two part interfacing, tomorrow. But today we just concentrate on the Google Chart Map Chart web interface we have being, internally, capable of …

  • asking for this extra information … dependent on whether the user has flagged to use “&onclick=y” onclick “select” event … as a suffix to the user entered Place Name … for example …
    Sydney|Australia/Sydney|+11|12:50
    … corresponding to “PlaceName|TimeZoneName|GMTOffset|TimeRightNow” … and then …
  • analyzing the $_GET[‘data’] or $_POST[‘data’] data for the existance of this extended information, and presenting it in the onclick “select” event Javascript prompt window we present as an option “T” that if typed in navigates the user to a Time Zone Converter webpage where details like when Daylight Saving last kicked in and out are “value adds” to the functionality mix

Where are we going to apply this idea? Well, maybe you were around when we presented Weather API via Iframe jQuery Ajax Map Tutorial not so long back. We interfaced the Map Chart as a “grandchild” to the “parent” Weather Underground Interfacing web application. Today’s thoughts could improve on that in that the Map Chart could also be appearing with those useful onclick “select” event functionalities up at the “parent” level as well.

These new interfacings affect both the “parent” HTML and (the code underlying the) “grandchild” PHP pieces of code so that …

  • the “parent” changes we’ll be showing you soon
  • map.php PHP code has this live run (relevant, because these changes make the “grandchild” Map Chart web application independently able to access this new place name interfacing improvements) and it changed for these new ideas in this way (for phase one of two of the changes to the “grandchild”) … helped enormously with respect to code timing between the PHP writing out the Javascript via the use of array.push() method

You can see this in action with today’s PDF slideshow here .

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>