#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2016
    Posts
    8
    Rep Power
    0

    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.

    Create a New Pen

    Code:
    <!DOCTYPE html>
    <html style="height: 100%;">
    
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <script
    			  src="https://code.jquery.com/jquery-3.1.1.js"
    			  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
    			  crossorigin="anonymous"></script>
      <script type="text/javascript" src="http://praytimes.org/code/v2/js/PrayTimes.js"></script>
    
    
      <link rel='stylesheet prefetch' href='http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
        
    
    
    <script src='https://maps.googleapis.com/maps/api/js?v=3&libraries=places'></script>
      <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    
    
     
    
    
      <title> Monthly Prayer Timetable </title>
      <style>
        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}
    	
    
    }
    
      </style>
    
    
    </head>
    <script>
    (function($) {
    
      var debug = function(msgOrObject) {
        if (typeof(msgOrObject) === 'object') {
          msgOrObject = JSON.stringify(msgOrObject);
        }
        $('.console').html(msgOrObject);
      }
    
      function bindAutocomplete() {
    
        var acService = new google.maps.places.AutocompleteService(),
          placesService = new google.maps.places.PlacesService(document.createElement('div')),
            searchTypes = ['geocode'];
    
        $("input#location").autocomplete({
          source: function(req, resp) {
    
            acService.getPlacePredictions({
              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) {
                  _places.push({
                    id: places[i].place_id,
                    value: places[i].description,
                    label: places[i].description
                  });
                }
                resp(_places);
              }
            });
          },
          select: function(e, o) {
            placesService.getDetails({
              placeId: o.item.id
            }, function(place, status) {
              console.log("details", place);
              if (status === google.maps.places.PlacesServiceStatus.OK) {
                debug(o.item.value +
                  '\n is located at \n ' +
                  place.geometry.location.toUrlValue());
              }
            });
    
          }
        });
      }
    
      // ** INITIALIZE ** //
      $(function() {
        try {
          bindAutocomplete();
          debug("initialized");      
        } catch (e) {
          debug({error: e});
        }
      });
    
    }(jQuery));
    
    </script>
    
    
            <script>
            var key = 'AIzaSyB0Itj_hV1-tkIczLJ9kQiJNePyoaDfd4k';
            var x=document.getElementById("detected_location");
    
    		function getLocation()
              {
              if (navigator.geolocation)
                {
                navigator.geolocation.getCurrentPosition(showPosition);
                }
              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;
                  jQuery('.formatted_loc').html(lati+","+longi);
                  getGoogleLoc(lati,longi,false);
                  ga('send', {
                    'hitType': 'event',          // Required.
                    'eventCategory': 'AJAX',   // Required.
                    'eventAction': 'geolocation',      // Required.
                    'eventLabel': 'Location Coords',
                    'eventValue': lati+','+longi
                  });
                  update();
              }
    		
              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: "https://maps.googleapis.com/maps/api/geocode/json",
                    type: "GET",
                    cache: false,
                    data: dataString,
                    dataType: "JSON"
                  });
                  req.done(function(data){
                      console.log(data);
                      if(data && data.results && data.results.length) var formattedLoc = data.results[0].formatted_address;
                      jQuery('.formatted_loc').html(formattedLoc);
                      var updatedLati = data.results[0].geometry.location.lat;
                      var updatedLongi = data.results[0].geometry.location.lng;
                      jQuery('#latitude').val(updatedLati);
                      jQuery('#longitude').val(updatedLongi);
                      update();
                      getTimeZone(updatedLati,updatedLongi);
                      ga('send', {
                        'hitType': 'event',          // Required.
                        'eventCategory': 'AJAX',   // Required.
                        'eventAction': 'Google Maps API',      // Required.
                        'eventLabel': 'Geocoder Location',
                        'eventValue': formattedLoc
                      });
                    });
              }
              function getTimeZone(lati,longi){
                jQuery.getJSON('https://maps.googleapis.com/maps/api/timezone/json?location='+lati+','+longi+'&timestamp='+ +new Date()/1000, function(data){
    
                  var dst = data.dstOffset/3600;
                  var tz = data.rawOffset/3600;
                  jQuery('#dst').val(dst);
                  jQuery('#timezone').val(tz);
                  update();
    
                  ga('send', {
                        'hitType': 'event',          // Required.
                        'eventCategory': 'AJAX',   // Required.
                        'eventAction': 'Google Maps API',      // Required.
                        'eventLabel': 'Timezone API',
                        'eventValue': tz
                      });
    
                })
              }
    
              </script>
    
    		     
    
    
    
    <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: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;
      DST:
      <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>&nbsp;
      Method:
      <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>
        </select>
    </form>
    </div>
    <br>
    
    <div>
      <table align="center">
      <tbody><tr>
        <td><a href="javascript:displayMonth(-1)" class="arrow">&lt;&lt;</a></td>
        <td id="table-title" class="caption">November 2016</td>
        <td><a href="javascript:displayMonth(+1)" class="arrow">&gt;&gt;</a></td>
      </tr>
      </tbody></table>
    
      <br>
      <table id="timetable" class="timetable"></table>
    
      <div style="margin-top: 7px" align="center">
        Source: <a href="http://praytimes.org/" class="command">PrayTimes.org</a> |
        Time Format: <a id="time-format" href="javascript:switchFormat(1)" title="Change clock format" class="command">24-hour</a>
      </div>
    
    </div>
    
    <br>
    
    <script type="text/javascript">
    
      var currentDate = new Date();
      var timeFormat = 2;
      switchFormat(0);
    
      // display monthly timetable
      function displayMonth(offset) {
      		prayTimes.setMethod('MWL');
    	    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);
          times.day = 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
        }
        removeAllChild($('timetable'));
        $('timetable').appendChild(tbody);
      }
    
      // 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];
          cell.style.width = i=='day' ? '2.5em' : '3.7em';
          row.appendChild(cell);
        }
        row.className = klass;
        return row;
      }
    
      // remove all children of a node
      function removeAllChild(node) {
        if (node == undefined || node == null)
          return;
    
        while (node.firstChild)
          node.removeChild(node.firstChild);
      }
    
      // switch time format
      function switchFormat(offset) {
        var formats = ['24-hour', '12-hour'];
        timeFormat = (timeFormat+ offset)% 2;
        $('time-format').innerHTML = formats[timeFormat];
        update();
      }
    
      // update table
      function update() {
        displayMonth(0);
      }
    
      // 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);
      }
    
    
    </script>
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2016
    Posts
    8
    Rep Power
    0
    Still waiting for a soluation. hope someone could help me out

IMN logo majestic logo threadwatch logo seochat tools logo