Javascriptの変数をrailsのコントローラーに渡したい

Question

前提・実現したいこと

Geolocation APIで現在地から緯度経度を取得して、railsのコントローラー内で処理を行いたいです。
Javascriptの変数をajaxを用いてコントローラーに渡そうとしていますが、上手くいきません。

発生している問題・エラーメッセージ

binding.pryで確認するとlatitude, longitudeが0.0となってしまいます。アラートで表示させてみたところちゃんと緯度経度が出たので、現在地の取得はできていると思います。ajaxでの受け渡しに問題があるのは分かるのですが調べても間違いが分からず、どなたか教えて頂けると嬉しいです。rails6.1.3です。

エラーメッセージは特にありません。

該当のソースコード

<script type="text/javascript">
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(

      function(position){
        $.ajax({
            url: "/maps/new",
            type: "GET",
            dataType: 'html',
            async: true,
            data: {latitude : position.coords.latitude,
                  longitude : position.coords.longitude,
                  }
        });
      }
    )
  }
</script>

def new
    latitude = params[:latitude].to_f
    longitude = params[:longitude].to_f
end

試したこと

いろいろ調べて試してみましたがJavascriptの理解が進んでおらず、解決できませんでした、、、

Answer 1

どこに問題があるのかの原因を特定するためのコード追加を挙げます。

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(

      function(position){
+       const data = {
+         latitude: position.coords.latitude,
+         longitude: position.coords.longitude,
+       };
+       console.log(`data: ${JSON.stringify(data)}`);
        $.ajax({
            url: "/maps/new",
            type: "GET",
            dataType: 'html',
            async: true,
-           data: {latitude : position.coords.latitude,
-                 longitude : position.coords.longitude,
-                 }
+           data,
+           success: html => {
+             console.log(`response: ${html}`);
+           },
+           error: (xhr,  textStatus, errorThrown) => {
+             console.log('xhr:');
+             console.log(xhr);
+             console.log(`textStatus: ${textStatus}`);
+             console.log(`errorThrown: ${errorThrown}`);
+           }
        });
      }
    )
  }

???? 参考:Codepen (※ajaxのurlはダミーのAPIに変えています）

• $.ajax({･･･}) を実行する直前で、dataオブジェクトを作り、これをconsole.logで出力させ、latitude と longitude に想定通りの値が入っているかを確認します。

• $.ajax({･･･})に渡しているパラメータに、success と error を追加します。これで GET /maps/new のリクエストが成功しているのか失敗しているのかが分かります。

• また、失敗のときは、エラー情報をconsole.logで出力させます。

これで実行してみて、想定どおりではないログが出力されたら、そこから原因を推測して、修正すべき部分を特定していきます。

Comments

[tomololol]

とても詳しく有難うございます。実行してみたところ、コンソールにはhtml情報が表示されたので、受け渡しも出来ているようです。ただ、
controller
@latitude = params[:latitude].to_f
html
<%= @latitude %>
とすると、0.0が表示されてしまいます。
コンソールには
</script>
11.111111（現在地）と表示されています。これは、何か設定を間違えているのでしょうか？それとも、そもそもajaxでこのような書き方は出来ないのでしょうか。

[退会済みユーザー]

当方フロントエンド専業者でありまして、Railsはあまり詳しくはありませんが、たしか、Railsで新しいプロジェクトを rails g scaffold ・・・とかやってテンプレートを作ったときに、

/maps/new

のような /new のパスには空の登録フォームのHTML全体が返されるんだったと思います。そのデフォルトの状態のままだとすると、HTML全体を返すリクエストを Ajax から呼ぶのは、Ajaxの使い方としてはナンセンスというかほぼやらないです。

ちなみに、現状のコードで、

> コンソールにはhtml情報が表示されたので、受け渡しも出来ているようです。

とのことなので、Ajax からのGET /maps/new は成功しているものと思いますが、受け取ったHTMLを画面側のDOMに何らか反映させる処理をしないと、Ajaxによるレスポンスが画面に反映されることは無いです。

ちなみに、Ajax でリクエストされる想定のパスにルーティングされるコントローラのメソッドによって返されるのは、HTML全体ではなくHTMLの一部であるか、もしくはJSONやXMLだったりすることが通常です。JSONやXMLを返す場合、そのURL（とリクエストとレスポンスの仕様）のことをAPI と言ったりします。

最近の Rails には APIモードというのもあるらしいですね。ご興味あれば調べてみるのもよいでしょう。