質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3837閲覧

位置情報を取得してJQueryでAjaxを行う方法

hrc

総合スコア55

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/10/10 06:15

編集2016/10/12 08:16

Javascriptの getCurrentPosition 使って位置情報を取得した後にサーバ側から最寄りのレストランを検索する処理をJQuery使って非同期通信をかけようとしています。

以下該当するJSのコードなのですが、何故か
document.getElementById('result').innerHTML
はキチンと動作して表示されるのに
$.ajax
は表示されない状態です。
以下Coffeescriptですが、何か書き方に問題があるのでしょうか?
それとAjaxを行ってHTMLを返してもらうつもりなのですが、どのようにして受け取ればいいのでしょうか?Ajaxの基本的な質問かもなのですが、ご存知の方ご教示ください。

よろしくお願いします。

# Check if user's device is supported Geo Location listen = (el, event, handler) -> if el.addEventListener el.addEventListener event, handler else el.attachEvent 'on' + event, -> handler.call el if navigator.geolocation # 現在地を取得 navigator.geolocation.getCurrentPosition ((position) -> # 取得したデータの整理 data = position.coords # データの整理 lat = data.latitude lng = data.longitude alt = data.altitude accLatlng = data.accuracy accAlt = data.altitudeAccuracy heading = data.heading #0=北,90=東,180=南,270=西 speed = data.speed $.ajax type: 'GET' url: 'https://staging.vegewel.com/near' data: lat: lat lng: lng success: -> console.log 'ajax ok' return error: -> $('#result').html 'got error' return document.getElementById('result').innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd><dt>高度</dt><dd>' + alt + '</dd><dt>緯 度、経度の精度</dt><dd>' + accLatlng + '</dd><dt>高度の精度</dt><dd>' + accAlt + '</dd><dt>方角</dt><dd>' + heading + '</dd><dt>速度</dt><dd>' + speed + '</dd></dl>' return ), ((error) -> # エラーコード(error.code)の番号 # 0:UNKNOWN_ERROR # 1:PERMISSION_DENIED # 2:POSITION_UNAVAILABLE # 3:TIMEOUT errorInfo = [ '原因不明のエラーが発生しました…。' '位置情報の取得が許可されませんでした…。' '電波状況などで位置情報が取得できませんでした…。' '位置情報の取得に時間がかかり過ぎてタイムアウトしました…。' ] errorNo = error.code errorMessage = '[エラー番号: ' + errorNo + ']\n' + errorInfo[errorNo] alert errorMessage document.getElementById('result').innerHTML = errorMessage return ), 'enableHighAccuracy': false 'timeout': 8000 'maximumAge': 2000 else errorMessage = 'お使いの端末は、GeoLacation APIに対応していません。' alert errorMessage document.getElementById('result').innerHTML = errorMessage

【修正後ソース(JQuery)】

$.ajax type: 'GET' url: '/near' data: lat: lat lng: lng success:(data, textStatus, jqXHR) -> htmltext = "<ul class='slide_selector'>" for i in [0..4] htmltext += "<li class='post clip'><a href ='/" + gon.locale + "/restaurant/" + data[i].id + "'>" htmltext += "<img alt='" + data[i].restaurantname + "' src='" + gon.image + data[i].image1 + "' />" htmltext += "<ul class='note'><li class='name'>" + data[i].restaurantname + " </li><li class='sta'>" + data[i].station_id + "</li></ul></a></li>" htmltext += "</ul></div>" $('#restaurant').html htmltext return error:(jqXHR, textStatus, errorThrown) -> $('#result').html 'got error' + textStatus return

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CoffeeScriptでjQueryを使用する場合、```javascript
$ ->

■SSL領域(https://)で作業をされていますか?(念のため) Google では、ウェブ上のセキュリティが重要であると考えています。 セキュリティの観点からhttps:領域での実行が推奨されています。 ■取得データについて([https://staging.vegewel.com/near](https://staging.vegewel.com/near)) ・こちらのデータは、認証がかかっているようですが問題ないですか? ・データを取得できる形式のものでしょうか?(クロスドメインの場合、jsonp形式) ⇒ 取得したデータをどう処理しているのかわからなかったのですが... google Maps apiのapi keyを取得しているのであれば、以下のソースが参考になるかと思います。 [[https://developers.google.com/maps/documentation/static-maps/intro?hl=ja](https://codepen.io/takumaro-web/pen/gwzrBJ)](https://developers.google.com/maps/documentation/static-maps/intro?hl=ja) ヒントになるかわかりませんが、 閲覧者の現在地を取得しPINを立てるサンプルコードも置いておきます。(CofeeScript) ※ ここのPINの場所が、ajaxで取得したレストランの経緯度に変わるイメージ [https://codepen.io/takumaro-web/pen/gwzrBJ](https://codepen.io/takumaro-web/pen/gwzrBJ) ちなみに、CoffeeScriptの記述にエラーはなかったです。(コンパイルできたので)

投稿2016/10/11 07:13

takumaro_web

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hrc

2016/10/11 21:04

ありがとうございます!確かに色々欠けている視点がありました。ちなみに取得データはJsonpだけなんでしたっけ?HTMLをそのまま吐き出すように作っておりまして、実際はhttps://vegewel.comから呼び出すようにしています。
takumaro_web

2016/10/12 00:15

■jQueryを用いて単にhtmlを読み込み表示する http://qiita.com/yumetodo/items/00b37234cb86e741f0fb 推測ですが、経緯度を取得し近似値からレストランの一覧を取得する必要があるかと思います。(どのくらいを近くのレストランと判定させるかは、要件次第ですが) 今回の要件だと △ ajaxでhtmlを読み込み表示。 ◎ 現在地を取得しその現在地とajaxで読み込んだhtml内の情報を比較し表示。 かと思います。
hrc

2016/10/12 08:04

ありがとうございます!Jsonで返すようにしたら動きました。
hrc

2016/10/12 08:26

こちらに修正後のソースを書きました。 ちなみにですが、実はSlickというカルーセルを動的に差し替えようとしたのですが表面的には画像やテキストが入れ替わっているのですが、ソースそのものが変わらないせいかカルーセルで動作しません。これってHTML自体は書き換わらないものなのでしょうか?追加質問ですみません。
hrc

2016/10/13 02:54

自己解決しました。ブラウザの「ソースを見る」は最初に読み込んだときのソースになるので動的に書き換えたものが表示されないだけでした。すみませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問