2017-01-09 7 views
-2

私は現在、ユーザーが場所を取得して新しい店舗フォームの緯度と経度のフィールドに自動的に入力するストアを追加する必要があるアプリケーションを設計しています。私はこれまで、ジオロケーションスクリプトを設定し、AJAX呼び出しでパラメータを自分のレールコントローラに送信することができましたが、私の人生では、これらの値を自動的に設定するフォームを取得できません。フォームの値をAJAXリクエストから受け取ったパラメータで設定します

私のレールサーバログには、経度と緯度のパラメータが渡されていることが示されています。

これらはparams [:latitude]とparams [:経度]として利用できるはずですが、これらにフォーム値を設定しても何も起こりません。 paramsを示す

私のサーバーログが渡されます。

Processing by StoresController#new as */* 
Parameters: {"latitude"=>"-29.13184", "longitude"=>"26.195021399999998"} 
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]] 
Rendering stores/new.html.erb within layouts/application 
Rendered layouts/_messages.html.erb (0.5ms) 
Rendered stores/_form.html.erb (6.0ms) 
Rendered stores/new.html.erb within layouts/application (10.1ms) 
Completed 200 OK in 38ms (Views: 31.3ms | ActiveRecord: 0.2ms) 

新しいと私のRailsのコントローラとアクションを作成します。

class StoresController < ApplicationController 

def new 
@store = current_user.stores.build 
end 

def create 
    @store = current_user.stores.build(store_params) 
    if @store.save 
     flash[:success] = "New store was successfully saved" 
     redirect_to @store 
    else 
     flash[:danger] = "There was an error in adding new store" 
     render 'stores/new' 
    end 
end 

私のジオロケーションスクリプト:

<script> 
    if (navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(sendLocation); 
    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 

    function sendLocation(position){ 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 

    jQuery.ajax({ 
    data: { latitude: latitude, longitude: longitude}, 
    type: 'get', 
    url: "/stores/new", 
    }); 
    }; 
    </script> 

私のフォーム部分:

<%= form_for(@store) do |f| %> 

    <%= f.text_field :storename, class: 'form-control', 
      placeholder: "Store Name", autofocus: true %> 
    </br> 
    <%= f.text_field :storecode, class: 'form-control', placeholder: "Store Code" %> 
    </br> 
    <%= f.text_field :contactname, class: 'form-control', placeholder: "Store Contact" %> 
    </br> 
    <%= f.telephone_field :phonenumber, class: 'form-control', placeholder: "Contact Number" %> 
    </br> 
    <%= f.text_field :latitude, :value => params[:latitude] %> 
    </br> 
    <%= f.text_field :longitude, :value => params[:longitude] %> 
    </br> 
    <div class="span1"> 
    <p><%= f.submit "Submit", class: "btn btn-warning btn-block" %></p> 
    <p><%= link_to "Back", dashboard_path, class: "btn btn-warning btn-block" %></p> 
    </div> 
    <% end %> 
    </br> 
    <%= render '/layouts/messages' %> 

AJAX経由でコントローラーに渡される緯度と経度の値を自動的に受け取るフォームのlatitudeと:longitudeのtext_fieldsが必要です。基本的に私は、ユーザーが店に立つことができ、ユーザーの座標を手動で追加する必要がないように、フォームに自動的に挿入されるように経度と緯度をコントローラーに渡すことができます。

+5

コードを画像ではなくプレーンテキストとして送信します。 http://stackoverflow.com/help/formattingを参照してください – Barmar

+0

質問が明確ではありません!詳細を追加できますか? –

+0

そのBarmarについては申し訳ありませんが、私は正しい書式で質問を編集しました –

答えて

0

私の質問が不明な場合はお詫び申し上げます。私はもう少し研究をして解決しました。

idをlatitudeフィールドとlongitudeフィールドの両方に追加し、スクリプトを次のように変更しました。

if (navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(sendLocation); 
    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 

    function sendLocation(position){ 
     var latitude = position.coords.latitude; 
      longitude = position.coords.longitude; 
     document.getElementById('latitude').value = latitude; 
     document.getElementById('longitude').value = longitude; 
    } 

フォームは、場所を見つけた後、緯度と経度のフィールドに入力されるようになりました。

関連する問題