PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
It is currently Mon Oct 19, 2020 9:46 pm

All times are UTC - 5 hours

Post new topic Reply to topic  [ 2 posts ] 
Author Message
PostPosted: Mon Dec 19, 2016 9:24 pm 
Forum Newbie

Joined: Sat Jan 02, 2016 7:37 pm
Posts: 12
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);



PostPosted: Fri Jun 02, 2017 9:55 am 
Forum Newbie

Joined: Fri May 26, 2017 11:04 am
Posts: 1
I think problem in displayMonth function.

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC - 5 hours

Who is online

Users browsing this forum: No registered users and 10 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group