2

現在、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>

1 件の回答 1

1

まず、clickをバインドしていますが、グローバルに直書きだとDOMの準備が出来ていないためバインドできません。
DOMContentLoadedの中に入れましょう。
これでまずクリックイベントが走るようになるはずです。

あとajaxdatapostする際にJSON文字列にしているのには意味があるのでしょうか?
下記のようにすればObjectをそのまま渡せます。
あと通信エラーの判別の引数がないとエラー時に対処に困ります。
試験中はつけておいたほうがいいかと思います。

//通信実行
$.ajax({
    type: "post",
    url: "/path/to/post",
    data: data,
    dataType: "json",
    success: function (json_data) {
        if (!json_data[0]) {
            alret("処理的なエラー" + json_data[1]);
            return;
        }
        location.reload();
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
        alert("サーバーエラーです。もう一度再試行してください");
    },
    complete: function () {
        button.attr("disabled", false);
    }
});

問題の切り分けとして、まずどこまでコードが走っているか調査すべきです。
今回の場合、
1.クリックイベントが走っているか?
2.通信できているか?
3.通信のパラメータは正しいか?
と調査できるはずですので、
consoleを置くなどして調査しましょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。