Question

我有一个试图从浏览器获取位置设置的应用程序，这往往需要一点时间，所以我希望它在页面加载时运行。但是，如果在运行位置回调之前单击“提交”按钮，则表示没有位置数据。我的问题很简单，如何在提交表单之前等待我的位置成功回调完成？（没有像睡眠声明那样愚蠢的东西）理想情况下，我想要一个忙碌的指示灯并等待数据。这可能吗？我有一个代码可以使繁忙的指示器可见，但我不确定如何优雅地等待数据可用。

$(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());
}

Answer 1

禁用提交按钮，直到位置数据通过。

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

然后启用提交按钮

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

Answer 2

如果你正在使用的位置插件没有可用的回调函数，那么你需要以某种方式将结果绑定到页面并在用户提交之前检查它。

一种方法是将位置的结果绑定到表单，然后只允许表单在有位置时提交。以下是使用.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();

Answer 3

使用两个信号量：

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
    }
}

这样，只有在提交表单时地理数据尚未完全加载的情况下，用户才会看到加载图像。您会注意到，首先触发哪个事件并不重要，只有在两个事件都完成时才会触发。

Answer 4

HTML

<form id="form" action="" method="POST">

的Javascript

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "<input type=hidden name=lat id=lat value=" + 
        position.coords.latitude + "><input type=hidden name=lng id=lng value=" 
        + position.coords.longitude + ">";
    document.getElementById("form").submit();
}

延迟表单提交，直到检索到位置

4 个答案: