8

ブラウザーから場所の設定を取得しようとするアプリケーションがありますが、これには少し時間がかかる傾向があるため、ページの読み込み時に実行したいと考えています。ただし、場所のコールバックが実行される前に送信ボタンをクリックすると、場所のデータはありません。私の質問は簡単です。フォームを送信する前に、位置情報の成功のコールバックが終了するのをどのように待ちますか? （睡眠ステートメントのようなばかげたものなしで）。
理想的には、ビジー インジケーターを点滅させてデータを待ちたいと思います。これは可能ですか？ビジー インジケーターを表示するコードはありますが、データが利用可能になるまでエレガントに待機する方法がわかりません。

$(document).ready(function(){
    var lat = "";
    var lng = "";
    var accuracy = "";
    var locationFound = false;

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function positionSuccess(loc){
            lat = loc.coords.latitude;
            lng = loc.coords.longitude;
            accuracy = loc.coords.accuracy;
            locationFound = true;               
        });
    }else{
        alert("I'm sorry, your jerk browser doesn't support geolocation");
        locationFound = true;
    }

$('#locForm').submit(function(e){  

        $('#lat').val(lat);
        $('#lng').val(lng);
        $('#boundary').val($('#boundary-select').val());
}
4

4 に答える 4

1

位置データが渡されるまで、送信ボタンを無効にします。

$('input[type="submit"]').attr('disabled','disabled');

次に、送信ボタンを有効にします

$('input[type="submit"]').removeAttr('disabled');
于 2012-05-02T01:50:08.207 に答える
1

使用しているロケーションプラグインにコールバック関数がない場合は、ユーザーが送信する前に、結果をページにバインドしてチェックする必要があります。

1つの方法は、場所の結果をフォームにバインドし、場所がある場合にのみフォームの送信を許可することです。これを実現するために使用する例を次に示し.data()ます。

    $(document).ready(function(){
        var lat = "";
        var lng = "";
        var accuracy = "";
        var locationFound = false;

        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function positionSuccess(loc){
                lat = loc.coords.latitude;
                lng = loc.coords.longitude;
                accuracy = loc.coords.accuracy;
                locationFound = true;  

                //bind the results to the form object using data()
                $("#locForm").data('lat' , lat)
                $("#locForm").data('lng' , lng)
                $("#locForm").data('accuracy' , accuracy)
                $("#locForm").data('locationFound' , locationFound)

            });
        }else{
            alert("I'm sorry, your jerk browser doesn't support geolocation");
            locationFound = true;
        }

    $('#locForm').submit(function(e){  

            e.preventDefault(); //prevents the normal submit

            if ( $("#locForm").data('lat') == "" || 
                 $("#locForm").data('lng') == "" || 
                 $("#locForm").data('accuracy') == "" || 
                 $("#locForm").data('locationFound') == ""
                ) {
             alert("Please wait for the browser to detect your location.");   
             return false;
                }
            else {       
              $.post( $(this).attr('action'),  $(this).serialize(), function(data){ 
                       // your callback data from the submit here
               } ); 
            }



    }

ロケーションプラグインからの値を毎秒チェックする次のコードを追加しました。

  function wait4location() {

            if ( $("#locForm").data('lat') == "" || 
                 $("#locForm").data('lng') == "" || 
                 $("#locForm").data('accuracy') == "" || 
                 $("#locForm").data('locationFound') == ""
                ) {
                   x = setTimeout('wait4location()',1000) //every second
              } else { 
                  $("#loading").hide();
                  return false; 
                }
  }

  $("#loading").show();
  wait4location();
于 2012-05-02T01:51:33.410 に答える
0

2 つのセマフォを使用します。

var geoLoaded = false,
    submittingForm = false;

function LoadGeoData() {
    // .. your load code
    geoLoaded = true;
    ReallySubmitForm();
}

$('form').submit(function(e) {
    // .. your code
    submittingForm = true;
    ReallySubmitForm();
})

function ReallySubmitForm() {
    if (submittingForm && geoLoaded) {
        // .. your submit code
    } else {
        // .. trigger loading code
    }
}

このようにして、ユーザーがフォームを送信するまでに地理データが完全に読み込まれていない場合にのみ、読み込み中の画像が表示されます。どちらのイベントが最初にトリガーされるかは問題ではなく、両方が完了した場合にのみ通過することに気付くでしょう。

于 2012-05-02T05:44:29.340 に答える