JavaScript：エンドユーザーが新しい都市を入力すると都市名が変更されない

Question

ダークスキイズAPIを使用しているJavaScriptで天気アプリを開発しています。

問題は、エンドユーザーが都市名（マイアミ）を入力して検索をクリックしたときに都市名が変更されないことです。

ただし、アプリケーションを最初に起動すると、エンドユーザーの現在の場所に負荷がかかります。

私はちょうどここ python -m SimpleHTTPServer

を起動し、プロジェクトがJSで起動したとき、私は、プロジェクトのサーバーのセットアップを持っていない

：ここ

console.log("meteocast.js, ready!"); 

// Global Variables 
var geoLocation = {lat: 40.7127837, lng: -74.0059413}; 
var city = 'New York City'; 

$(document).ready(function(){ 
    $('#selected-city').keypress(function(e){ 
    if(e.which == 13){ 
     ajaxReqForLatLon(); 
     setTimeout(function(){ 
     initMap(geoLocation); 
     }, 500); 
    } 
    }); 
    // console.log(ajaxReqForLatLon); 
    $('#search-button').on('click', function(){ 
    ajaxReqForLatLon(); 
    }); 
    $('.btn.btn-success.btn-block').on('click', function(){ 
    $('#selected-city').val("").focus(); 
    }); 

    // Traffic 
    // Google Maps 
    function ajaxReqForLatLon(){ 
    var userRequestedLocation = selectedCity(); 
    var googleApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?address='; 
    googleApiURL += userRequestedLocation; 
    googleApiURL += '&key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U'; 

    $.ajax({ 
     type: 'GET', 
     url: googleApiURL, 
     success: function(response){ 
     geoLocation = googleApiSuccessHandler(response); 
     weatherData(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
     console.log(errorThrown); 
     } 
    }); 
    } 

    // take response from ajax and take the geolocation 
    function googleApiSuccessHandler(response){ 
    var geoLocation = response.results[0].geometry.location; 
    return geoLocation; 
    } 

    function selectedCity(){ 
    city = $('#selected-city').val().trim(); 
    if(city.length === 0){ 
     $('#selected-city').addClass('animated shake'); 
     $('#selected-city').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $('#selected-city').removeClass('animated shake'); 
     }); 
     return; 
    }; 
    return city; 
    } 

    $('#selected-city').keypress(function(e){ 
    if(e.which == 13){ 
     ajaxReqForLatLon(); 
     setTimeout(function(){ 
     initMap(geoLocation); 
     }, 500); 
    } 
    }); 

    // Map on page load 
    setTimeout(function(){ 
    initMap(geoLocation); 
    }, 500); 

    var triggerOnce = true; 
    function initMap(geoLocation){ 
    var map = new google.maps.Map(document.getElementById('map'),{ 
     zoom: 12, 
     center: geoLocation, 
     scrollWheel: false 
    }); 

    var marker = new google.maps.Marker({map : map}); 

    if(triggerOnce){ 
     triggerOnce = false; 

     if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      geoLocation.lat = position.coords.latitude; 
      geoLocation.lng = position.coords.longitude; 
      var pos = { 
      lat : position.coords.latitude, 
      lng : position.coords.longitude 
      }; 
      reverseGeocode(); 
      weatherData(); 
      setTimeout(function(){ 
      $(".location").html(city); 
      }, 500); 
      marker.setPosition(pos); 
      map.setCenter(pos); 
     }, function(){ 
      handleLocationError(true, marker, map.getCenter()); 
     }); 
     } else { 
     handleLocationError(false, marker, map.getCenter()); 
     } 
    } 

    function handleLocationError(browserHasGeolocation, marker, pos){ 
     marker.setPosition(pos); 
     weatherData(); 
    } 
    var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(map); 
    } 

    // Reverse Geocode 
    function reverseGeocode(){ 
    var googleRevGeoApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='; 
    googleRevGeoApiURL += geoLocation.lat + ',' + geoLocation.lng; 
    googleRevGeoApiURL += '&key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U'; 

    $.ajax({ 
     type: 'GET', 
     url: googleRevGeoApiURL, 
     success: function(response){ 
     city = response.results[0].address_components[2].long_name; 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
     console.log(errorThrown); 
     } 
    }); 
    } 

    // Weather 
    var weatherData = function(){ 
    var geoLocLat = geoLocation.lat; 
    var geoLocLon = geoLocation.lng; 
    var forecastURL = 'https://api.forecast.io/forecast/80b1dfb6da9003b42f0dd846a0f08703/' + geoLocLat + ',' + geoLocLon; 
    var data; 
    $.getJSON(forecastURL + '?callback=?', function(data){ 
     $('#weather').html('Today: ' + data.currently.summary + '<br>' + 'Currently: ' + data.currently.temperature.toFixed(0) + '&deg; F' + '<br>' + 'High: ' + data.daily.data[1].temperatureMax.toFixed(0) + '&deg; F'); 
    }); 
    }; 
}); 

はHTMLです：

<div class="container"> 
    <br> 
    <input type="search" id="selected-city" class="form-control" placeholder="Enter City" autofocus> 
    <button id="search-button" class="btn btn-success btn-block" type="submit">Search</button> 
    <br> 
    <h2 class="location"></h2> 
    <h4 id="weather"></h4> 
    <div id="map"></div> 
</div> 

Answer 1

ボタンタイプがsubmitであると思っています。代わりにbuttonに変更してみてください。

また、コンソールにエラーがありますか？

Answer 2

あなたはからの検索ボタンのタイプはにボタンを提出変更

1. コード内でいくつかの部分を変更しようとすることができます。 ユーザーがボタン検索をクリックすると、Ajaxリクエストが作成されますので、 はページを送信する必要はありません。

2. 更新機能googleApiSuccessHandler。この関数では、都市名を更新するコードを追加します。

// take response from ajax and take the location information 
function googleApiSuccessHandler(response) { 

    // Update latitude and longitute information 
    var geoLocation = response.results[0].geometry.location; 

    // Update city name 
    city = response.results[0].address_components[2].long_name; 
    $(".location").html(city); 

    return geoLocation; 
}