{"id":45571,"date":"2019-07-10T03:01:45","date_gmt":"2019-07-09T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45571"},"modified":"2019-07-09T22:39:07","modified_gmt":"2019-07-09T12:39:07","slug":"ajax-auto-completion-internationalization-trip-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-trip-tutorial\/","title":{"rendered":"Ajax Auto-completion Internationalization Trip Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Auto-completion Internationalization Trip Tutorial\"  src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/trip_planning.jpg\" title=\"Ajax Auto-completion Internationalization Trip Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Internationalization Trip Tutorial<\/p><\/div>\n<p>We add onto yesterday&#8217;s <a title='Ajax Auto-completion Internationalization Capitals Tutorial' href='#aa-ict'>Ajax Auto-completion Internationalization Capitals Tutorial<\/a> some Trip Planning functionality today.  Don&#8217;t know about you, but we find ourselves mulling over maps for hours, wondering about far off lands.  Now that <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> makes it so easy to deal with &#8230;<\/p>\n<ul>\n<li>map detail around a single place &#8230; it also &#8230;<\/li>\n<li>in &#8220;Directions&#8221; mode <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> becomes a trip planning tool par excellence<\/li>\n<\/ul>\n<p> &#8230; and so we harness that, along with the newly introduced &#8230;<\/p>\n<blockquote><p>\nallow for integration of inhouse <a target=_blank title='Timezone Places' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php'>Timezone Places<\/a> web application\n<\/p><\/blockquote>\n<p> &#8230; so that when the user chooses the &#8220;Country&#8221; button display mode (rather than the &#8220;Capital&#8221; button display mode) they see Country Timezone Webpage Child Iframes lined up from left to right, to &#8230;<\/p>\n<ul>\n<li>get ideas of the &#8220;when&#8221; of timezones &#8230; incorporating &#8230;<\/li>\n<li>the inhouse menus (with suboptions like &#8220;Weather&#8221;) interfacing to the great <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map'>Map Chart<\/a> maps<\/li>\n<\/ul>\n<p> &#8230; to try to meld a bit of &#8220;when&#8221; with &#8220;where&#8221;, two of the important concepts when it comes to <strike>tripping<\/strike>trips.<\/p>\n<p>Remember that Google Maps can be used to visit a place ahead of time and download a set of &#8220;offline maps&#8221; that do not require WiFi later to access, as those caught out by huge (accidental and &#8220;in all innocence&#8221;) global roaming phone bills can probably attest to.<\/p>\n<p>Getting this going, in broad brush terms, what did we do?<\/p>\n<ul>\n<li><font size=2>well, the dogs got up pretty early and needed feeding &#8230;<\/font><\/li>\n<li><font size=2>then the cat came along, like &#8220;Lord Muck&#8221; &#8230; and so &#8230;<\/font><\/li>\n<li><font size=2>the fish gave me sideways glances until &#8220;fish flaked&#8221; <\/font><font size=1> &#8230; when they then looked out at 2:15 or maybe 4:45 or is that one at 14:30 &#8230;<\/font> &#8230; but we digress &#8230;<\/li>\n<li>we need latitude and longitude geographicals in order to display the map data &#8230; and so in the &#8230;<\/li>\n<li>newly included (in the top h1 header element) we have an HTML select element dropdown &#8230;<br \/>\n<code><br \/>\nfunction sadd(inih) {<br \/>\n  var purlis='', psuffix='';<br \/>\n  if (inih.indexOf(\"'s the capital city of \") != -1) {<br \/>\n    if (inih.indexOf('#') != -1) { psuffix=' (' + inih.split('#')[1] + ')'; }<br \/>\n    purlis=document.URL.split('#')[0].split('?')[0] + '?capital=' + encodeURIComponent(inih.split('#')[0].split(' (')[0].split(\"'s \")[0].replace(', ',',_').replace(\/\\ \/g,'_')) + '#' + encodeURIComponent(inih.split(\"'s the capital city of \")[1].replace(', ',',_').replace(\/\\ \/g,'_') + psuffix);<br \/>\n  } else if (inih.indexOf(\"'s capital city is \") != -1) {<br \/>\n    purlis=document.URL.split('#')[0].split('?')[0] + '?country=' + encodeURIComponent(inih.split('#')[0].split(' (')[0].split(\"'s \")[0].replace(', ',',_').replace(\/\\ \/g,'_')) + '#' + encodeURIComponent(inih.split(\"'s capital city is \")[1].replace(', ',',_').replace(\/\\ \/g,'_') + psuffix);<br \/>\n  } else if (inih != '') {<br \/>\n    purlis=document.URL.split('#')[0].split('?')[0] + '?country=' + encodeURIComponent(inih.split('#')[0].split(' (')[0].split(\"'s \")[0].replace(', ',',_').replace(\/\\ \/g,'_'));<br \/>\n  }<br \/>\n  if (purlis != '') {<br \/>\n    var wasih=document.getElementById('expands').innerHTML;<br \/>\n    if (wasih.indexOf('&lt;') == -1) {<br \/>\n      stopoffs=\"~\";<br \/>\n      document.getElementById('expands').innerHTML='&lt;select id=divselect style=\"display:inline-block;width:' + ('' + ospan.width).replace('px','') + 'px;\" onchange=\"lastdiviframe(this.value);\"&gt;&lt;option value=\"\"&gt;Trip Planning ' + wasih + '&lt;\/option&gt;&lt;option' + idname + ' value=\"' + purlis + '\"&gt;' + inih.split('#')[0] + '&lt;\/option&gt;&lt;\/select&gt;&nbsp;&lt;div style=display:inline-block; id=dbut&gt;&lt;font size=2&gt;Trip Mode: &lt;\/font&gt;&lt;input style=display:inline-block; type=checkbox onchange=\"document.getElementById(' + \"'\" + 'divselect' + \"'\" + ').multiple=true; document.getElementById(' + \"'\" + 'dbut' + \"'\" + ').innerHTML=' + \"'\" + '&lt;input style=display:inline-block; onclick=tripplan(1,selois); type=button value=Capital&gt;&lt;\/input&gt;&nbsp;&lt;input style=display:inline-block; onclick=tripplan(0,selois); type=button value=Country Trip&gt;&lt;\/input&gt;' + \"'\" + ';\"&gt;&lt;\/input&gt;&lt;\/div&gt;';<br \/>\n      selois=document.getElementById('divselect');<br \/>\n    } else if (document.getElementById('divselect').innerHTML.indexOf(purlis) == -1) {<br \/>\n      document.getElementById('divselect').innerHTML+='&lt;option' + idname + ' value=\"' + purlis + '\"&gt;' + inih.split('#')[0] + '&lt;\/option&gt;';<br \/>\n    }<br \/>\n  }<br \/>\n  return inih.split('#')[0];<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; storing places selected, in the onload iframe event of the <a target=_blank title='Wikipedia' href='http:\/\/wikipedia.org'>Wikipedia<\/a> reader <font color=blue>we set global data attributes<\/font> &#8230;<br \/>\n<code><br \/>\nfunction loadifsrctwo(iois) {<br \/>\n var xintstuff='', latlong='';<br \/>\n if (iois.src != '') {<br \/>\n var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n if (aconto != null) {<br \/>\n  if (aconto.document) { aconto = aconto.document; }<br \/>\n  if (iois.src.indexOf('tdinto=') != -1) {<br \/>\n  xintstuff=document.getElementById(iois.src.split('tdinto=')[1].split('&')[0]).innerHTML;<br \/>\n  } else {<br \/>\n  xintstuff=aconto.body.innerHTML;<br \/>\n  }<br \/>\n  if (xintstuff.indexOf(' data-geo=\"') != -1) {<br \/>\n    latlong=xintstuff.split(' data-geo=\"')[1].split('\"')[0];<br \/>\n    if (('' + iois.title).indexOf('countryname=') != -1 && ('' + iois.title).indexOf('~') != -1) {<br \/>\n      <font color=blue>document.getElementById(('' + iois.title).split('~')[1]).setAttribute('data-countrygeo', latlong);<\/font><br \/>\n    } else if (('' + iois.title).indexOf('capitalid=') != -1) {<br \/>\n      <font color=blue>document.getElementById(('' + iois.title).split('capitalid=')[1]).setAttribute('data-capitalgeo', latlong);<\/font><br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; ensures that &#8230;\n<\/li>\n<li>should the HTML input type=checkbox, being checked by the user, signal to the web application that the user wants to &#8220;swing into&#8221; Trip Planning mode of use, then that select element dropdown <a target=_blank title='HTML select element multiple attribute information froim w3schools' href='https:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute possibilities are switched on (and the checkbox replaced by those aforesaid mentioned &#8220;Capital&#8221; and &#8220;Country&#8221; buttons)  &#8230; meaning &#8230;<\/li>\n<li>that on selecting multiple options from that dropdown there is also the information necessary to trip plan, and show those maps &#8230;<br \/>\n<code><br \/>\nfunction tripplan(iscapitaltrip,sin) {<br \/>\n  var i=0, j=0, retval='', aot, tripurl='', dcity='', dctry='',dcs=[];<br \/>\n  var totalsel=sin.innerHTML.split('&lt;\/option&gt;'), sofarsel=stopoffs.split('~'), selsel=[];<br \/>\n  selsel.push(\"\");<br \/>\n  for (i=0; i&lt;sin.options.length; i++) {<br \/>\n    if (sin.options[i].selected) {<br \/>\n      if (sin.options[i].value != '') {<br \/>\n        \/\/alert(sin.options[i].outerHTML);<br \/>\n        dcity='';<br \/>\n        dctry='';<br \/>\n        dcs=sin.options[i].outerHTML.split(' data-capitalgeo=\"');<br \/>\n        if (dcs.length &gt; 1) { dcity=dcs[1].split('\"')[0]; }<br \/>\n        dcs=sin.options[i].outerHTML.split(' data-countrygeo=\"');<br \/>\n        if (dcs.length &gt; 1) { dctry=dcs[1].split('\"')[0]; }<br \/>\n        \/\/  data-capitalgeo=\"-16.500,-68.150\" data-countrygeo=\"-16.712,-64.666\"<br \/>\n        \/\/aot=sin.options[i].text.split('(')[eval(-1 + sin.options[i].text.replace(')','').split('(').length)].replace(')','').split(':');<br \/>\n        selsel.push(sin.options[i].value + '#0000' + dcity);<br \/>\n        for (j=0; j&lt;sofarsel.length; j++) {<br \/>\n          if (sofarsel[j].split('#')[0] == sin.options[i].value.split('#')[0]) {  sofarsel[j]+='#00' + i; if (dcity != '') { sofarsel[j]+='#0000' +  dcity;   }  }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  selsel.push(\"\");<br \/>\n  if (selsel.length == sofarsel.length) {<br \/>\n    \/\/ eg. http:\/\/localhost:8888\/Ajax\/AutoCompletion\/auto_language_complete.html?capital=La_Paz#Bolivia%23BO%20(BO)#001<br \/>\n    \/\/ \/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?iso=GB&iso2=AU&iso3=NZ<br \/>\n    if (iscapitaltrip == 0) {<br \/>\n      tripurl='\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?iso=' + sofarsel[1].split('%23')[1].split('(')[1].split(')')[0];<br \/>\n    } else { \/\/ Sydney,+New+South+Wales<br \/>\n      if (sofarsel[1].indexOf('capital=') != -1) {<br \/>\n        if (sofarsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sofarsel[1].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (sofarsel[1].indexOf('#00') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      } else if (sofarsel[1].indexOf('country=') != -1) {<br \/>\n        if (sofarsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sofarsel[1].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (sofarsel[1].indexOf('#00') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    for (i=2; i&lt;sofarsel.length; i++) {<br \/>\n      if (sofarsel[i] != '') {<br \/>\n        if (iscapitaltrip == 0) {<br \/>\n         tripurl+='&iso' + i + '=' + sofarsel[i].split('%23')[1].split('(')[1].split(')')[0];<br \/>\n        } else {<br \/>\n      if (sofarsel[i].indexOf('capital=') != -1) {<br \/>\n        if (sofarsel[i].indexOf('#0000') != -1) {<br \/>\n          tripurl+='\/' + sofarsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,'');<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sofarsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (sofarsel[i].indexOf('#00') != -1) {<br \/>\n          tripurl+='\/' + sin.options[eval(sofarsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(sofarsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      } else if (sofarsel[i].indexOf('country=') != -1) {<br \/>\n        if (sofarsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl+='\/' + sofarsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sofarsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (sofarsel[i].indexOf('#00') != -1) {<br \/>\n          tripurl+='\/' + sin.options[eval(sofarsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(sofarsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(sofarsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    window.open(tripurl, \"_blank\", \"left=10,top=330,width=1300,height=470\");<br \/>\n  } else {<br \/>\n    if (iscapitaltrip == 0) {<br \/>\n      tripurl='\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?iso=' + selsel[1].split('%23')[1].split('(')[1].split(')')[0];<br \/>\n    } else { \/\/ Sydney,+New+South+Wales<br \/>\n      if (selsel[1].indexOf('capital=') != -1) {<br \/>\n        if (selsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + selsel[1].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (selsel[1].indexOf('#00') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      } else if (selsel[1].indexOf('country=') != -1) {<br \/>\n        if (selsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + selsel[1].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (selsel[1].indexOf('#00') != -1) {<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    for (i=2; i&lt;selsel.length; i++) {<br \/>\n      if (selsel[i] != '') {<br \/>\n        if (iscapitaltrip == 0) {<br \/>\n         tripurl+='&iso' + i + '=' + selsel[i].split('%23')[1].split('(')[1].split(')')[0];<br \/>\n        } else {<br \/>\n      if (selsel[i].indexOf('capital=') != -1) {<br \/>\n        if (selsel[i].indexOf('#0000') != -1) {<br \/>\n          tripurl+='\/' + selsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,'');<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + selsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (selsel[i].indexOf('#00') != -1) {<br \/>\n          tripurl+='\/' + sin.options[eval(selsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(selsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      } else if (selsel[i].indexOf('country=') != -1) {<br \/>\n        if (selsel[1].indexOf('#0000') != -1) {<br \/>\n          tripurl+='\/' + selsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + selsel[i].split('#0000')[1].split('#')[0].replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        } else if (selsel[i].indexOf('#00') != -1) {<br \/>\n          tripurl+='\/' + sin.options[eval(selsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n          window.open(tripurl, \"_blank\", \"left=\" + eval(10 + i) + \",top=330,width=1300,height=470\");<br \/>\n          tripurl='\/\/www.google.com\/maps\/dir\/' + sin.options[eval(selsel[i].split('#00')[1].split('#')[0])].id.replace(\/\\_\/g,'+') + ',' + sin.options[eval(selsel[1].split('#00')[1].split('#')[0])].name.replace(\/\\_\/g,'+'); \/\/         .replace(\/\\ \/g,''); \/\/ + '\/' + jiplace + '+' + jicont;<br \/>\n        }<br \/>\n      }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    window.open(tripurl, \"_blank\", \"left=10,top=330,width=1300,height=470\");<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; into popup windows\n<\/li>\n<\/ul>\n<p>Try the new Trip Planning functionality with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html------GETME' title='auto_language_complete.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html------GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\" title=\"Click picture\">live run<\/a> link.  Happy planning!<\/p>\n<hr>\n<p id='aa-ict'>Previous relevant <a target=_blank title='Ajax Auto-completion Internationalization Capitals Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-capitals-tutorial\/'>Ajax Auto-completion Internationalization Capitals Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Auto-completion Internationalization Capitals Tutorial\"  src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/capitals_lowercase.jpg\" title=\"Ajax Auto-completion Internationalization Capitals Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Internationalization Capitals Tutorial<\/p><\/div>\n<p>Having seen <a target=_blank href='https:\/\/www.google.com\/search?q=toy+story+4&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=toy+story+&#038;aqs=chrome.0.69i59j69i57j69i61l2j0l2.3570j0j9&#038;sourceid=chrome&#038;ie=UTF-8'>Toy Story 4<\/a> we were inspired enough to dedicate today&#8217;s blog post to all those onions out there dedicated to improving the layers of our understanding, all those &#8220;<font size=1>onions<\/font> <font size=3>of the<\/font> <font size=5>4<sup>th<\/sup> dimension<\/font>&#8221; out there!   Because yesterday&#8217;s <a title='Ajax Auto-completion Internationalization Email Tutorial' href='#aa-iet'>Ajax Auto-completion Internationalization Email Tutorial<\/a> has been built upon in a <font color=blue>couple of ways<\/font> new to us (but no doubt not to a lot of <strike>ewes<\/strike><strike>youse<\/strike>yous (pardon my <a target=_blank title='?' href='https:\/\/en.m.wiktionary.org\/wiki\/yous'>Liverpudlian<\/a>)).<\/p>\n<ul>\n<li>&#8220;onions of the 4th dimension&#8221; &#8230; uppercase and lowercase separation 2x multiplier of functionality &#8230; via the &#8230;<\/li>\n<li>keyboard event &#8220;<a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'>onkeypress<\/a>&#8221; (better than &#8220;onkeydown&#8221; (though &#8220;onkeydown&#8221; is good for Ctrl and Alt and Shift and Del scenarios)) can differentiate uppercase to lowercase letters to Country versus Capital respectively<\/li>\n<li>&#8220;gone fishing&#8221; part 2 &#8230; users learn by trial and error of that first keyboard letter pressed &#8230; eg. how many world capital cities start with &#8220;q&#8221;? (types of &#8220;fishing&#8221; is now, additionally, possible, as a learning aid with this web application)<\/li>\n<li><font color=blue>&#8220;can an HTML element get an ID property added dynamically?&#8221; &#8230; today we find out &#8230; and answer is &#8220;yes&#8221; &#8230; this is useful to allow a programmatical click of an (Ajax created) element later<\/font><\/li>\n<li><font color=blue>&#8220;can an array member be found, in full, in Javascript (ie. indexed)?&#8221; &#8230; today and yesterday we found out &#8230; and answer is &#8220;yes&#8221; &#8230; Javascript [string{MustBeObject}].indexOf([string]) function(s) (or should we say &#8220;members&#8221;) acts like C++ Object Oriented Programming style object &#8220;members&#8221; where the Object type is part of the full definition of a function (&#8220;member&#8221;) definition &#8230; so a [String].indexOf([String]) type will go to a different piece of code to an [Array].indexOf([String]) type (calling object)<\/font><\/li>\n<li>allow for integration of inhouse <a target=_blank title='Timezone Places' href='http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php'>Timezone Places<\/a> web application, as required<\/li>\n<\/ul>\n<p>Get the feel for this with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html-----GETME' title='auto_language_complete.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html-----GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='aa-iet'>Previous relevant <a target=_blank title='Ajax Auto-completion Internationalization Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-email-tutorial\/'>Ajax Auto-completion Internationalization Email Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Auto-completion Internationalization Email Tutorial\"  src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/aaemail.jpg\" title=\"Ajax Auto-completion Internationalization Email Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Internationalization Email Tutorial<\/p><\/div>\n<p>On top of the progress of yesterday&#8217;s <a title='Ajax Auto-completion Internationalization Revisit Tutorial' href='#aa-irt'>Ajax Auto-completion Internationalization Revisit Tutorial<\/a> we have a dual purpose set of improvements today, those being &#8230;<\/p>\n<ul>\n<li>introduction of &#8220;long hover&#8221; functionality to the Ajax Autocompletion menus presented, whereby the Wikipedia and Google Chart optional functionalities from yesterday are &#8220;sneak previewed&#8221; for the user  &#8230; which, in turn, helps with &#8230;<\/li>\n<li>sharing email functionality in two &#8220;client email application&#8221; ways &#8230;\n<ol>\n<li>readying a webpage that does well using the web browser Edit menu Select All and Copy options to be a useful email attachment &#8230; and a separate new &#8230;<\/li>\n<li>email &#128231; emoji &#8220;a&#8221; mailto: link to the &#8220;client email application&#8221; for an email with one body link back to the website webpage via a ?country= argument<\/li>\n<\/ol>\n<\/li>\n<p>So what&#8217;s &#8220;long hover&#8221;?  Well, it&#8217;s not formally an event in HTML.  And it&#8217;s not a concept at all with mobile platforms.  To us, a &#8220;long hover event&#8221; action item is one that only occurs when the user hovers (tripping an &#8220;onmouseover&#8221; event) over that action item for a longer than usual amount of time (and we say 2 seconds) before &#8220;moving away&#8221; (tripping an &#8220;onmouseout&#8221; event).  See <font color=blue>the new codings<\/font> required to make this happen, that &#8220;<a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a>(overandout, 2000)&#8221; two second delay the crucial difference, below.<\/p>\n<ol>\n<li>within the Ajax onreadystatechange logic function &#8230;<br \/>\n<code><br \/>\n        myTempDiv.title = myCodesArray[myi] + ';' + myThisCapital;<br \/>\n        myTempDiv.innerHTML = myThisCountry;<br \/>\n        <font color=blue>myTempDiv.onmouseover = overmakeSelection;<br \/>\n        myTempDiv.onmouseout = outmakeSelection;<\/font><br \/>\n        myTempDiv.onclick = makeSelection;<br \/>\n        myTempDiv.className = \"mysuggestions\";<br \/>\n<\/code><br \/>\n &#8230; and then &#8230;<\/li>\n<li>some new Javascript functions to help this change out &#8230;<br \/>\n<code><br \/>\nvar lhcandidate='', lhready=false, overcnt=0;<br \/>\nfunction overandout() {<br \/>\n  if (lhcandidate != '' && overcnt == 1) {<br \/>\n      overcnt=0;<br \/>\n      lhready=true;<br \/>\n      makeSelection(null);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction overmakeSelection(evt) {<br \/>\n  overcnt++;<br \/>\n  if (evt) {<br \/>\n    lhcandidate = evt.target;<br \/>\n  } else {<br \/>\n    lhcandidate = window.event.srcElement;<br \/>\n  }<br \/>\n  setTimeout(overandout, 2000);<br \/>\n}<br \/>\n<br \/>\nfunction outmakeSelection(evt) {<br \/>\n  if (overcnt &gt; 0) { overcnt--; }<br \/>\n  lhcandidate='';<br \/>\n  lhready=false;<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; opening more scope for collaboration and sharing with this web application.<\/p>\n<p>Again, feel free to have a go at <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html----GETME' title='auto_language_complete.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html----GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='aa-irt'>Previous relevant <a target=_blank title='Ajax Auto-completion Internationalization Revisit Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-revisit-tutorial\/'>Ajax Auto-completion Internationalization Revisit Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Auto-completion Internationalization Revisit Tutorial\"  src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/ctry_info.jpg\" title=\"Ajax Auto-completion Internationalization Revisit Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Internationalization Revisit Tutorial<\/p><\/div>\n<p>Way back in 2013 we touched on <a target=_blank title='Autocompletion information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Autocomplete'>AutoCompletion<\/a> ideas when we presented <a title='Ajax Auto-completion Internationalization Tutorial' href='#aa-it'>Ajax Auto-completion Internationalization Tutorial<\/a>.   Quite a bit of water under bridges, and here in 2019 we feel like extending its functionalities by &#8230;<\/p>\n<ul>\n<li>adding a data item (onto country name and code) for capital (ie. capital city)<\/li>\n<li>incorporating those Wikipedia lookup ideas we started (more or less) with the recent <a target=_blank title='Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/overlay-iframe-remembering-textarea-client-quiz-wikipedia-tutorial\/'>Overlay Iframe Remembering Textarea Client Quiz Wikipedia Tutorial<\/a> &#8230; as well as &#8230;<\/li>\n<li><a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Geo Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; all &#8220;optional extras&#8221;.  Remember with such new functionality it is really annoying for a user if the usual workflow of the web application is broken by your changes.  We design ours today on an &#8220;only if the optional data is found&#8221; basis, so we don&#8217;t expect more than the usual complaints.  That way an HTML div can be empty for &#8220;no data found&#8221;, or filled with an HTML table of three (td) cells each with an HTML iframe same-domain call of those Google Chart (1) and <a target=_blank title='Wikipedia'; href='http:\/\/www.wikipedia.org'>Wikipedia<\/a> (2) inhouse interfacings.<\/p>\n<p>Feel free to have a go at <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html---GETME' title='auto_language_complete.html'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html---GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='aa-it'>Previous relevant <a target=_blank title='Ajax Auto-completion Internationalization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-tutorial\/'>Ajax Auto-completion Internationalization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Auto-completion Internationalization Tutorial\"  src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/lc_CC.jpg\" title=\"Ajax Auto-completion Internationalization Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Internationalization Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s tutorial (called <a target=_blank title='PHP Gettext Internationalization Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-gettext-internationalization-primer-tutorial\/'>PHP Gettext Internationalization Primer Tutorial<\/a>) reignited something I&#8217;ve been curious about for ages &#8230; and knew it was out there &#8230; the notion of linking &#8220;country codes&#8221; to &#8220;language codes&#8221; and coming up with more informed thoughts regarding language choices &#8230; continuing on with our &#8220;internationalization&#8221; discussions of yesterday.<\/p>\n<p>We came up against this issue with the <a target=_blank title='Ajax Auto-completion FollowUp Tutorial' href='#aacft'>Ajax Auto-completion FollowUp Tutorial<\/a> as of below, when we, lazily, only supplied a Google Translate window of &#8220;Welcome&#8221; to Country users who had a &#8220;Country Code&#8221; the same as the &#8220;Language Code&#8221;, such as Poland.  However, you&#8217;ll find Poland is in the minority for this straightforward arrangement.<\/p>\n<p>So we delved into those codes (ie. locales) as of yesterday, like &#8220;de_DE&#8221; (German for Germany), and lo and behold (for two days running now &#8230; and am pretty tired on the 78th rounding of the Sydney Harbour Bridge) there are ways and means, and the biggest helping hand for us came from <a target=_blank href='http:\/\/framework.zend.com\/manual\/1.12\/en\/zend.locale.appendix.html' title='Code help ... thanks'>Zend Framework<\/a> &#8230; and, by the way, Zend is an Apache framework &#8230; so, thanks.<\/p>\n<p>If you try today&#8217;s <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/' title='Live run'>live run<\/a>, then, for some countries, you&#8217;ll get multiple Google Translate &#8220;window.open()&#8221; method windows coming up, representing more of the languages spoken in that country (but of course it is not definitive, in this multivaried and fascinating wo<font size=1>ooooooo<\/font>r<font size=1>rrrrrr<\/font>ld on which we all cohabitate, <strike>man<\/strike> person).<\/p>\n<p>The use of Google Translate in this way, is great in itself with regard to translations (and sometimes an audio pronunciation possibility), as well as with written language issues such as &#8220;right to left&#8221; versus &#8220;left to right&#8221; usage.<\/p>\n<p>This whole scenario involves Ajax and auto-completion as concepts you may want to delve into as well, and if so, would recommend a perusal of all the linked tutorials below, to get the whole picture.<\/p>\n<p>On top of that, you&#8217;ll perhaps want to see the downloadable supervising HTML code you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html--GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a> (that changed from the previous venture into auto-completion as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html--GETME' title='auto_language_complete.html'>auto_language_complete.html<\/a>) which is, as of today &#8230; even though we said &#8220;Ajax &#8230; Tutorial&#8221; &#8230; supervising some newly created PHP (to help with the locales data) you could call <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/lc_CC.php_GETME' title='lc_CC.php'>lc_CC.php<\/a> &#8230; so feel free to delve into all these &#8220;internationalization&#8221; (of language) ideas further at your leisure, and know that &#8220;internationalization&#8221; concepts cover so much more as well with issues such as &#8220;date formats&#8221; and currency formats&#8221;, just to name two, that you may want to do some research and development on, as well.<\/p>\n<hr>\n<p id='aacft'>Previous relevant <a target=_blank title='Ajax Auto-completion FollowUp Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-followup-tutorial\/'>Ajax Auto-completion FollowUp Tutorial<br \/>\n<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Preview Window Tutorial  (try twirling round bottom of image for a synopsis ... 'do the twirl now')\" id='aacpti'  onmouseover=\"var xqw=this.src; if (xqw.indexOf('1.png') != -1) { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Language_Completion_2.png'; } else if (xqw.indexOf('2.png') != -1) { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Language_Completion.png'; } else { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Language_Completion_1.png'; }\"   src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Language_Completion.png\" title=\"Ajax Auto-completion FollowUp Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion FollowUp Tutorial  (try twirling round bottom of image for a synopsis ... 'do the twirl now')<\/p><\/div>\n<p>Ajax techniques make your web pages very dynamic and useful, and there will be fewer changes of webpage required when using Ajax, because information derived from a data source (maybe a feed, maybe a database read, maybe a local source of data (as for this tutorial&#8217;s <a target=_blank title='countries_attributed.xml' href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/countries_attributed.xml_GETME'>countries_attributed.xml<\/a> &#8230; today, we use attributes, as distinct from yesterday&#8217;s tutorial &#8230; in source code note use of <a target=_blank title='XML DOM getAttribute method' href='http:\/\/www.w3schools.com\/dom\/met_element_getattribute.asp'>getAttribute()<\/a> method &#8230; thanks to <a target=_blank title='great help' href='http:\/\/trac.reddes.bvsalud.org\/projects\/scielo-submission\/browser\/branches\/ojs-2.3.3-1\/lib\/pkp\/locale\/en_US\/countries.xml'>link<\/a> and <a target=_blank title='languages.xml' href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/languages.xml_GETME'>languages.xml<\/a> &#8230; in source code note use of <a target=_blank title='XML DOM getAttribute method' href='http:\/\/www.w3schools.com\/dom\/met_element_getattribute.asp'>getAttribute()<\/a> method &#8230; thanks to <a target=_blank title='Google Translate derived XML language code lookup' href='http:\/\/translate.google.com'>link<\/a> &#8230; (by the way, with this last derived XML, it would be a great improvement and give more frequent lookup success to amend all the country code attributes to equal language code attributes (eg. it turns out mythical country Zolmovia (originally, code=Zm) speaks mainly Spanish (language code=es), so what am saying is change Zm to es in countries_attributed.xml) here)) make many changes of webpage obsolete.<\/p>\n<p><p>Today we build on  <a target=_blank href=\"#aacpt\" title='Ajax Auto-completion Primer Tutorial'>Ajax Auto-completion Primer Tutorial<\/a> as shown below, in that we attempt a (non 100% successful) coding relationship that tries to give a welcome message in the home language of the country you pick, via the wonderful <a target=_blank title='Google Translate' href='http:\/\/translate.google.com'>Google Translate<\/a>.<\/p>\n<p>One useful Ajax friendly piece of functionality is called auto-completion, where you have an HTML input text tag element you fill in, and you&#8217;d like to help out the user with both spelling and suggestions, so you present possibilities once they have pressed a key, and then the user can opt to pick one of the &#8220;(looks-like-a) dropdown&#8221;-listed options.  This often helps with the proper nouns in our life, or, as is the case with the tutorial, country names.  So we reward the user with a map courtesy of <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> (thanks) should it all go swimmingly (hope you&#8217;re not in <a target=_blank title='Chad' href='https:\/\/maps.google.com\/maps?q=Chad'>Chad<\/a> looking for a swim).  In addition, when successful in establishing a likely home language for your country (will be sometimes wrong, sometimes unknowable with the shortcuts here, and maybe sometimes wrong (for these we apologize)).<\/p>\n<p>Have a look at the HTML\/Javascript downloadable code which you could rename to <a target=_blank title='auto_language_complete.html' href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html-GETME\">auto_language_complete.html<\/a><\/p>\n<p>Here is a new link to some downloadable PHP programming source code explaining changes made (from tutorial below)  <a target=_blank title='column_chart_diff.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html-GETME\">here<\/a>.<\/p>\n<p>Try a <a target=_blank title='live run' href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/auto_language_complete.html\">live run<\/a> here.<\/p>\n<p>By the way, Gimp was used to make the layered image of this tutorial using techniques as explained in <a target=_blank tit='Gimp Layers Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5366'>Gimp Layers Primer Tutorial<\/a>.<\/p>\n<p>Regarding this topic I really like <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> and the code in this book was followed closely, with small amendments.<\/p>\n<hr \/>\n<p d='aacpt'>Previous relevant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5667\" title='Ajax Auto-completion Primer Tutorial'>Ajax Auto-completion Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Preview Window Tutorial  (try twirling round bottom of image for a synopsis ... 'do the twirl now')\" id='aacpti'  onmouseover=\"var xqw=this.src; if (xqw.indexOf('1.png') != -1) { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Completion_2.png'; } else if (xqw.indexOf('2.png') != -1) { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Completion.png'; } else { this.src = 'http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Completion_1.png'; }\"   src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/Auto_Completion.png\" title=\"Ajax Auto-completion Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Auto-completion Primer Tutorial  (try twirling round bottom of image for a synopsis ... 'do the twirl now')<\/p><\/div>\n<p>Ajax techniques make your web pages very dynamic and useful, and there will be fewer changes of webpage required when using Ajax, because information derived from a data source (maybe a feed, maybe a database read, maybe a local source of data (as for this tutorial&#8217;s <a target=_blank title='countries.xml' href='http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/countries.xml_GETME'>countries.xml<\/a> &#8230; thanks to <a target=_blank title='great help' href='http:\/\/trac.reddes.bvsalud.org\/projects\/scielo-submission\/browser\/branches\/ojs-2.3.3-1\/lib\/pkp\/locale\/en_US\/countries.xml'>link<\/a> here)) make many changes of webpage obsolete.<\/p>\n<p><p>Today we more or less build on your previous Ajax knowledge (which am sure has moved along a long way from) beginning (at least, at this blog) with <a target=_blank href=\"#apwt\" title='Ajax Preview Window Tutorial'>Ajax Preview Window Tutorial<\/a> as shown below.<\/p>\n<p>Let&#8217;s have a look at Wikipedia&#8217;s thoughts on Ajax <a target=_blank title='Ajax information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>below<\/a>.<\/p>\n<blockquote><p>Ajax (also AJAX; \/\u02c8e\u026ad\u0292\u00e6ks\/; an acronym for Asynchronous JavaScript and XML)[1] is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead. See AJAJ), and the requests do not need to be asynchronous.[2]<\/p>\n<p>Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and allow the user to interact with, the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.<\/p><\/blockquote>\n<p>One useful Ajax friendly piece of functionality is called auto-completion, where you have an HTML input text tag element you fill in, and you&#8217;d like to help out the user with both spelling and suggestions, so you present possibilities once they have pressed a key, and then the user can opt to pick one of the &#8220;(looks-like-a) dropdown&#8221;-listed options.  This often helps with the proper nouns in our life, or, as is the case with the tutorial, country names.  So we reward the user with a map courtesy of <a target=_blank title='Google Maps' href='http:\/\/maps.google.com'>Google Maps<\/a> (thanks) should it all go swimmingly (hope you&#8217;re not in <a target=_blank title='Chad' href='https:\/\/maps.google.com\/maps?q=Chad'>Chad<\/a> looking for a swim).<\/p>\n<p>Have a look at the HTML\/Javascript downloadable code which you could rename to <a target=_blank title='countries_auto_complete.html' href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/countries_auto_complete.html_GETME\">countries_auto_complete.html<\/a><br \/>\nTry a <a target=_blank title='live run' href=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/AutoCompletion\/\">live run<\/a> here.<\/p>\n<p>By the way, Gimp was used to make the layered image of this tutorial using techniques as explained in <a target=_blank tit='Gimp Layers Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5366'>Gimp Layers Primer Tutorial<\/a>.<\/p>\n<p>Regarding this topic I really like <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> and the code in this book was followed closely, with small amendments.<\/p>\n<hr \/>\n<p d='apwt'>Previous relevant <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=579\" title='Ajax Preview Window Tutorial'>Ajax Preview Window Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ajax.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Ajax Preview Window Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Ajax\/Ajax.jpg\" title=\"Ajax Preview Window Tutorial\" \/><\/a><p class=\"wp-caption-text\">Ajax Preview Window Tutorial<\/p><\/div>\n<p>Ajax is a client-side meets server-side melding of PHP (or <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1646'>ASP.Net<\/a>) and Javascript and HTML and CSS and allows you to stay on the web page you are on doing many more things, rather than constantly changing web pages the way that HTML form tag makes you do.  Ajax works with XMLHttpRequest object to quiz the server-side while staying on the client side.   You may have guessed that we have been working up to this, and I refer you to the previous tutorial about <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574'>JavaScript and the DOM Tutorial<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP + JavaScript + HTML Primer Tutorial<\/a> for important information to learn before tackling Ajax.   Ajax shares similar restrictions to iFrames in limiting you to work within your own domain, generally speaking.   Ajax normally makes use of the onmouseover (hence the amateurish added rendition of a cursor, where I was hovering over the option tag, but couldn&#8217;t take a snapshot of this &#8230; ie. too lazy to get the camera!) and onmouseout events of HTML elements and you may notice the less than ideal Internet Explorer behaviour for this Ajax code, and that is because for Internet Explorer the option tag has no onmouseover nor onmouseout event defined, so we did an awful kludge.<\/p>\n<p><strong>Earlier tutorials &#8230; <\/strong><\/p>\n<p>JavaScript is a tremendous web client-side language to learn.   You may have heard of a server-side JavaScript, but this tutorial only deals with client-side work.   This tutorial builds a JavaScript layer on top of the <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=550'>PHP tutorial<\/a> made earlier, showing how the DOM can be used to change the look of your webpage dynamically, even if most of it is in an iFrame (but there are limits).<\/p>\n<p>PHP is a wonderful language to learn.   It is usually associated with being a web server-side language (as with this tutorial, where it is being shown on a local <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=532'>MAMP<\/a> web server) but can be a <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=262'>command line tool<\/a> as well.   If you like PHP you may eventually like <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=482'>ASP.Net<\/a> and\/or Python, and vice versa.   It has sophisticated data structures, Object Oriented (the thinking that you can build classes with data and methods which define objects created as you run the program &#8230; eg. you might write a class for book and have data members for things like numPages and publisher, author, creationDate and have methods called things like getCreationDate, setCreationDate, getAuthor, setAuthor allowing the user to use these methods rather than changing the  data members themselves &#8230; heaven forbid that!) code concepts, and really combines well with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=293'>JavaScript<\/a> (as a client-side language).     <\/p>\n<p>Download programming source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Ajax\/ajax.php_GETME'>ajax.php<\/a> (but Ajax only works within the domain you use it, and this code mentions www.rjmprogramming.com.au so just use it for reference purposes or rewrite for purposes that suit you within your domain of interest).<\/p>\n<p>Regarding this  <a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/ajax.php'>topic<\/a> I really like <em>&#8220;JavaScript &amp; Ajax&#8221; seventh edition by Tom Negrino and Dori Smith<\/em> <\/p>\n<p><strong><em>Did you know &#8230;<\/em><\/strong><br \/>\nJavaScript makes a great easy-access Calculator?<\/p>\n<p>Try typing the lines below into the address bar of your favourite browser:<\/p>\n<p>Javascript: eval(512 \/ 380);<br \/>\nJavascript: eval(512 * 380);<br \/>\nJavascript: eval(512 &#8211; 380);<br \/>\nJavascript: eval(512 + 380);<br \/>\nJavascript: eval(512 % 380);<\/p>\n<p>These days we spend so much time on the Internet it is a much quicker way to get to a calculator!\n<\/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='#d579' onclick='var dv=document.getElementById(\"d579\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=63\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d579' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\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='#d5667' onclick='var dv=document.getElementById(\"d5667\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=63\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5667' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\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='#d5683' onclick='var dv=document.getElementById(\"d5683\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=63\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5683' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d14939' onclick='var dv=document.getElementById(\"d14939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=yql\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d14939' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d45545' onclick='var dv=document.getElementById(\"d45545\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45545' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d45558' onclick='var dv=document.getElementById(\"d45558\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45558' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d45565' onclick='var dv=document.getElementById(\"d45565\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/indexof\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45565' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d45571' onclick='var dv=document.getElementById(\"d45571\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45571' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We add onto yesterday&#8217;s Ajax Auto-completion Internationalization Capitals Tutorial some Trip Planning functionality today. Don&#8217;t know about you, but we find ourselves mulling over maps for hours, wondering about far off lands. Now that Google Maps makes it so easy &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-auto-completion-internationalization-trip-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,36,37],"tags":[69,1695,1604,342,367,380,381,385,1619,481,513,519,527,1608,587,2807,652,673,3000,3002,739,745,2126,2092,1968,2337,1661,871,2999,997,1866,1126,1133,1137,1238,1693,1311,1694,1319,3001,1431],"class_list":["post-45571","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-trips","category-tutorials","tag-ajax","tag-autocompletion","tag-collaboration","tag-div","tag-dropdown","tag-email","tag-email-client","tag-emoji","tag-geo-chart","tag-geographicals","tag-google","tag-google-charts","tag-google-maps","tag-hover","tag-iframe","tag-indexof","tag-javascript","tag-keyboard","tag-long-hover","tag-lowercase","tag-mailto","tag-map","tag-map-chart","tag-multiple","tag-onions","tag-onkeypress","tag-onmouseout","tag-onmouseover","tag-optional","tag-programming","tag-select","tag-settimeout","tag-share","tag-sharing","tag-table","tag-timezone","tag-trip","tag-trip-planner","tag-tutorial","tag-uppercase","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45571"}],"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=45571"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45571\/revisions"}],"predecessor-version":[{"id":45575,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45571\/revisions\/45575"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}