javascript - 当在rails中使用jquery Submit()而不是submit_tag时，地理编码器搜索失败

Question

我正在为 Ruby on Rails 中的一些练习构建一个定位器应用程序，并且我想将我的位置搜索表单从使用地理编码器 gem 切换为客户端 JavaScript 调用。

客户端 JavaScript 调用工作并使用 geocodeAddress() 将纬度和经度插入隐藏字段

但是，当我删除原始的 Submit_tag 按钮并替换为 geocodeAddressAndSubmit() 时，不会使用隐藏字段值，并且搜索不再返回结果。

是否有可能再次提交表单并重置搜索词？

有什么指点吗？谢谢!

Javascript 方法

var client_geocoder;
function initialize() {
  client_geocoder = new google.maps.Geocoder();
}

function geocodeAddress() {
  var address = document.getElementById('address').value;
  client_geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      $('#search_location_lat').val(results[0].geometry.location.lat());
      $('#search_location_lng').val(results[0].geometry.location.lng());
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function geocodeAddressAndSubmit() {
  geocodeAddress();
  $('#search_form').submit();
}

Rails View 中的搜索表单

<div id="panel" >
<input id="address" type="textbox" placeholder="Place, Address or Zipcode">
  <%= form_tag locations_path, id: 'search_form', method: :get do %>
    <%= hidden_field_tag "search_location[lat]" %> 
    <%= hidden_field_tag "search_location[lng]" %> 
    <%= label :distance, "Distance: " %>
    <%= select_tag :distance, options_for_select([["1 mi", 1], ["2 mi", 2], ["5 mi", 5], ["10 mi", 10]]) %>
  <% end %>
  <input type="button" value="Search" onclick="geocodeAddressAndSubmit()">
  <%= link_to "Clear Search", root_path %>
</div>

Rails Controller 中的索引方法

def index
    coordinates = params[:search_location].values if params[:search_location].present?
    @locations = Location.search_and_show(
        coordinates,
        params[:distance],
        (current_user.admin if current_user)
    )
end

**提交当前表单时的 Rails 控制台 **

Started GET "/locations?

    utf8=%E2%9C%93&search_location%5Blat%5D=&search_location%5Blng%5D=&distance=1" for 10.0.2.2 at 2014-11-22 00:15:37 +0000
    Processing by LocationsController#index as HTML
      Parameters: {"utf8"=>"✓", "search_location"=>{"lat"=>"", "lng"=>""}, "distance"=>"1"}
      Location Load (0.9ms)  SELECT locations.*, 3958.755864232 * 2 * ASIN(SQRT(POWER(SIN((0.0 - locations.latitude) * PI() / 180 / 2), 2) + COS(0.0 * PI() / 180) * COS(locations.latitude * PI() / 180) * POWER(SIN((0.0 - locations.longitude) * PI() / 180 / 2), 2))) AS distance, MOD(CAST((ATAN2( ((locations.longitude - 0.0) / 57.2957795), ((locations.latitude - 0.0) / 57.2957795)) * 57.2957795) + 360 AS decimal), 360) AS bearing FROM "locations"  WHERE (locations.latitude BETWEEN -0.014473178311084797 AND 0.014473178311084797 AND locations.longitude BETWEEN -0.014473178311084797 AND 0.014473178311084797 AND (3958.755864232 * 2 * ASIN(SQRT(POWER(SIN((0.0 - locations.latitude) * PI() / 180 / 2), 2) + COS(0.0 * PI() / 180) * COS(locations.latitude * PI() / 180) * POWER(SIN((0.0 - locations.longitude) * PI() / 180 / 2), 2)))) BETWEEN 0.0 AND '1') AND "locations"."public" = 't'  ORDER BY distance ASC
    Redirected to http://0.0.0.0:3000/
    Completed 302 Found in 4ms (ActiveRecord: 0.9ms)


    Started GET "/" for 10.0.2.2 at 2014-11-22 00:15:38 +0000
    Processing by LocationsController#index as HTML
      Location Load (0.4ms)  SELECT "locations".* FROM "locations"  WHERE "locations"."public" = 't'
      Rendered locations/index.html.erb within layouts/application (1.8ms)
    Completed 200 OK in 394ms (Views: 391.3ms | ActiveRecord: 0.4ms)

Answer 1

通过将表单提交移动到 geocoderAddress() 函数中来修复。

其他更聪明的人指出，这是一个异步请求，在 Google map API 回复并填充隐藏字段之前不应提交表单。

当前 JS

var client_geocoder;
function initialize() {
  client_geocoder = new google.maps.Geocoder();
}

function geocodeAddressThenSubmit() {
  var address = document.getElementById('address').value;
  client_geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      $('#search_location_lat').val(results[0].geometry.location.lat());
      $('#search_location_lng').val(results[0].geometry.location.lng());
      $('#search_form').submit();
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}