PHP Developers Network

Input on select update not working
Page 1 of 1

Author:  mio510 [ Mon Dec 19, 2016 9:24 pm ]
Post subject:  Input on select update not working

Hi guys,

I am using google maps auto complete function for searching locations. Now the input field is almost working the way i want it to be. When you search for a location and click on that location from the drop down menu the prayer time table will not update its times to the correct location selected, but only if you click outside the input field anywhere on the page the time table wis updated whit the chosen location. Is there any possible way so when ever i click the location from the google maps auto complete function so the table gets updated with that location. instead of clicking again on the page.

my code is on codepen please take a look and see what mean. So basically i want the time table to update it self right away when a location has been selected and not clicking on the page again to get the searched location.

Syntax: [ Download ] [ Hide ]
<!DOCTYPE html>
<html style="height: 100%;">

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <script type="text/javascript" src=""></script>

  <link rel='stylesheet prefetch' href=''>


<script src=''></script>
  <script src=''></script>
<script src=''></script>


  <title> Monthly Prayer Timetable </title>
    body, tr, form {font-size: 12px; color: #404040; text-align: center; margin: 0; padding: 0}
   pre {font-family: courier, serif, size: 10pt; margin: 0px 8px;}
    input {font-size: 12px;}
    .sheader {background:#eef; border-bottom: 1px solid #ddd; padding: 7px;}
   .caption {font-size: 20px; color: #d95722; text-align: center; width: 10em;}
   .arrow {font-weight: bold; text-decoration: none; color: #3D3D3D; }
   .arrow:hover {text-decoration: underline;}
    .command {font-weight: bold; text-decoration: none; color: #AAAAAA; }
   .command:hover {text-decoration: underline;}
    .timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray; margin: 0 auto;}
    .timetable td {border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC;}
   .head-row {color: black; background-color: #eef;}
   .today-row {background-color: #000; color: #fff}



(function($) {

  var debug = function(msgOrObject) {
    if (typeof(msgOrObject) === 'object') {
      msgOrObject = JSON.stringify(msgOrObject);

  function bindAutocomplete() {

    var acService = new google.maps.places.AutocompleteService(),
      placesService = new google.maps.places.PlacesService(document.createElement('div')),
        searchTypes = ['geocode'];

      source: function(req, resp) {

          input: req.term,
          types: searchTypes
        }, function(places, status) {
          console.log('places', places);
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            var _places = [];
            for (var i = 0; i < places.length; ++i) {
                id: places[i].place_id,
                value: places[i].description,
                label: places[i].description
      select: function(e, o) {
        }, function(place, status) {
          console.log("details", place);
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            debug(o.item.value +
              '\n is located at \n ' +


  // ** INITIALIZE ** //
  $(function() {
    try {
    } catch (e) {
      debug({error: e});



        var key = 'AIzaSyB0Itj_hV1-tkIczLJ9kQiJNePyoaDfd4k';
        var x=document.getElementById("detected_location");

                function getLocation()
          if (navigator.geolocation)
          else{ x.innerHTML="Geolocation is not supported by this browser. Please enter your location below:";}
        function showPosition(position)
              var lati = position.coords.latitude; var longi = position.coords.longitude;
              x.innerHTML="Latitude: " + lati +
              "<br>Longitude: " + longi;

              // var loc = document.getElementById('location');
              // loc.value= lati + ',' + longi;
              document.getElementById('latitude').value = lati;
              document.getElementById('longitude').value = longi;
              ga('send', {
                'hitType': 'event',          // Required.
                'eventCategory': 'AJAX',   // Required.
                'eventAction': 'geolocation',      // Required.
                'eventLabel': 'Location Coords',
                'eventValue': lati+','+longi
          function getGoogleLoc(lati,longi,address){
              !!(address) ?address = jQuery('#location').val() : address = false;
              var dataString = {
                  sensor: true,
                  latlng: lati+","+longi

              if(address) dataString['address'] = address;
              var req = jQuery.ajax({
                url: "",
                type: "GET",
                cache: false,
                data: dataString,
                dataType: "JSON"
                  if(data && data.results && data.results.length) var formattedLoc = data.results[0].formatted_address;
                  var updatedLati = data.results[0];
                  var updatedLongi = data.results[0].geometry.location.lng;
                  ga('send', {
                    'hitType': 'event',          // Required.
                    'eventCategory': 'AJAX',   // Required.
                    'eventAction': 'Google Maps API',      // Required.
                    'eventLabel': 'Geocoder Location',
                    'eventValue': formattedLoc
          function getTimeZone(lati,longi){
            jQuery.getJSON(''+lati+','+longi+'&timestamp='+ +new Date()/1000, function(data){

              var dst = data.dstOffset/3600;
              var tz = data.rawOffset/3600;

              ga('send', {
                    'hitType': 'event',          // Required.
                    'eventCategory': 'AJAX',   // Required.
                    'eventAction': 'Google Maps API',      // Required.
                    'eventLabel': 'Timezone API',
                    'eventValue': tz




<input name="location" id="location" value="" onchange="getGoogleLoc(false,false,true)" type="text" placeholder="enter location..."/>

<div class="console"></div>

          <h3 class="formatted_loc">Amsterdam, Netherlands</h3>

<div class="sheader">
<form class="form" action="javascript&#058;update();">
  Latitude: <input value="52.3702157" id="latitude" size="2" onchange="update();" type="text">&nbsp;
  Longitude: <input value="4.8951679" id="longitude" size="2" onchange="update();" type="text">&nbsp;
  Time Zone: <input value="1" id="timezone" size="2" onchange="update();" type="text">&nbsp;
  <select id="dst" size="1" style="font-size: 12px;" onchange="update()">
    <option value="auto">Auto</option>
    <option value="0" selected="selected">0</option>
    <option value="1">1</option>
  <select id="method" size="1" style="font-size: 12px;" onchange="update()">
    <option value="MWL" selected="selected">Muslim World League (MWL)</option>
    <option value="ISNA">Islamic Society of North America (ISNA)</option>
    <option value="Egypt">Egyptian General Authority of Survey</option>
    <option value="Makkah">Umm al-Qura University, Makkah</option>
    <option value="Karachi">University of Islamic Sciences, Karachi</option>
    <option value="Jafari">Shia Ithna-Ashari (Jafari)</option>
    <option value="Tehran">Institute of Geophysics, University of Tehran</option>

  <table align="center">
    <td><a href="javascript&#058;displayMonth(-1)" class="arrow">&lt;&lt;</a></td>
    <td id="table-title" class="caption">November 2016</td>
    <td><a href="javascript&#058;displayMonth(+1)" class="arrow">&gt;&gt;</a></td>

  <table id="timetable" class="timetable"></table>

  <div style="margin-top: 7px" align="center">
    Source: <a href="" class="command"></a> |
    Time Format: <a id="time-format" href="javascript&#058;switchFormat(1)" title="Change clock format" class="command">24-hour</a>



<script type="text/javascript">

  var currentDate = new Date();
  var timeFormat = 2;

  // display monthly timetable
  function displayMonth(offset) {
            prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
            prayTimes.tune( {imsak: 0, fajr: -90, sunrise: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
    var lat = $('latitude').value;
    var lng = $('longitude').value;
    var timeZone = $('timezone').value;
    var dst = $('dst').value;
    var method = $('method').value;

    currentDate.setMonth(currentDate.getMonth()+ 1* offset);
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    var title = monthFullName(month)+ ' '+ year;
    $('table-title').innerHTML = title;
    makeTable(year, month, lat, lng, timeZone, dst);

  // make monthly timetable
  function makeTable(year, month, lat, lng, timeZone, dst) {
    var items = {day: 'Day', fajr: 'Fajr', sunrise: 'Sunrise',
          dhuhr: 'Dhuhr', asr: 'Asr', // sunset: 'Sunset',
          maghrib: 'Maghrib', isha: 'Isha'};

    var tbody = document.createElement('tbody');
    tbody.appendChild(makeTableRow(items, items, 'head-row'));

    var date = new Date(year, month, 1);
    var endDate = new Date(year, month+ 1, 1);
    var format = timeFormat ? '12hNS' : '24h';

    while (date < endDate) {
      var times = prayTimes.getTimes(date, [lat, lng], timeZone, dst, format); = date.getDate();
      var today = new Date();
      var isToday = (date.getMonth() == today.getMonth()) && (date.getDate() == today.getDate());
      var klass = isToday ? 'today-row' : '';
      tbody.appendChild(makeTableRow(times, items, klass));
      date.setDate(date.getDate()+ 1);  // next day

  // make a table row
  function makeTableRow(data, items, klass) {
    var row = document.createElement('tr');
    for (var i in items) {
      var cell = document.createElement('td');
      cell.innerHTML = data[i]; = i=='day' ? '2.5em' : '3.7em';
    row.className = klass;
    return row;

  // remove all children of a node
  function removeAllChild(node) {
    if (node == undefined || node == null)

    while (node.firstChild)

  // switch time format
  function switchFormat(offset) {
    var formats = ['24-hour', '12-hour'];
    timeFormat = (timeFormat+ offset)% 2;
    $('time-format').innerHTML = formats[timeFormat];

  // update table
  function update() {

  // return month full name
  function monthFullName(month) {
    var monthName = new Array('January', 'February', 'March', 'April', 'May', 'June',
            'July', 'August', 'September', 'October', 'November', 'December');
    return monthName[month];

  function $(id) {
    return document.getElementById(id);



Author:  swathichitti [ Fri Jun 02, 2017 9:55 am ]
Post subject:  Re: Input on select update not working

I think problem in displayMonth function.

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group