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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/11 21:04
2016/10/12 00:15
2016/10/12 08:04
2016/10/12 08:26
2016/10/13 02:54