現在、Geolocationで位置情報とテキストを入力したデータをajaxでjsonに送信するWebアプリの機能を製作しています。ajaxによるjsonデータの通信部分にも自信があると言えず、今のコードでは無反応状態です。ajaxによる入力データの取得とPOST送信の部分に助言があればお願いします。
以下コード
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded',
function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(pos) {
var bodyHeight = $('body').height();
$("#gmap").css('height',bodyHeight-200);
var latlng = {lat:pos.coords.latitude , lng:pos.coords.longitude };
var gmap = new google.maps.Map(
document.querySelector("#gmap"),
{
zoom: 16,
center: new google.maps.LatLng(latlng),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var marker = new google.maps.Marker({ position: latlng , map:gmap });
},
//位置情報の取得に失敗した時
function(err) {
var msgs = [
err.message,
'位置情報の取得を許可されていません。',
'位置情報の取得に失敗しました。',
'位置情報を取得中にタイムアウトしました。'
];
window.alert(msgs[err.code]);
},
// 位置取得の動作オプションを設定
{
timeout : 10000,
maximumAge : 0,
enableHighAccuracy: true
}
);
} else {
window.alert('Geolocation API対応ブラウザでアクセスしてください。');
}
}, false
);
//位置データの引数をinputに代入
function getMarkerPos(){
document.getElementById('lat'.value=latitude);
document.getElementById('lng'.value=longitude);
};
//データ送信
$("button").click(function() {
var button = $(this);
button.attr("disabled", true); //多重送信を防ぐためボタンをdisabledさせる
var data = {
title: $("#title").val(),
lat: parseFloat($("#lat").val()),
lng: parseFloat($("#lng").val()),
comment: $("#comment").val()
};
//通信実行
$.ajax({
type:"post",
url:"/path/to/post",
data:JSON.stringify(data),
contentType: 'application/json',
dataType: "json",
success: function(json_data) {
if(!json_data[0]){
alret("処理的なエラー" + json_data[1]);
return;
}
location.reload();
},
error: function(){
alert("サーバーエラーです。もう一度再試行してください");
},
complete: function() {
button.attr("disabled", false);
}
});
});
</script>
</head>
<body>
<div data-role="page" id="submit">
<div data-role="header">
<h1>DEMO</h1>
</div>
<div class="ui-field-contain">
<label for="text-title">タイトル</label>
<input type="text" name="title" id="title" value="" />
</div>
<div data-role="content" id="map_content">
<div id="gmap"></div>
</div>
<!--経度の情報をajaxに-->
<input type="hidden" name="lat" id="lat" />
<!--緯度の情報をajaxに-->
<input type="hidden" name="lng" id="lng" />
<div class="ui-field-contain">
<label for="text-comment">コメント</label>
<textarea cols="40" rows="8" name=textarea id="comment"></textarea>
</div>
<div role="main" class="ui-content">
<button class="ui-btn">送信</button>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="bottom" class="navi_bar">
<ul>
<li class="ui-block-a"><a href="#" data-icon="home">Map</a></li>
<li class="ui-block-b"><a href="#" data-icon="info" class="ui-btn-active ui-state-persist">output</a></li>
</div>
</div>
</div>
</body>
<style type="text/css">
#gmap {
width: 100%;
height: 400px;
border:4px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>