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

【问题标题】：Delay form submission until location is retrieved延迟表单提交，直到检索到位置
【发布时间】：2012-05-11 12:11:53
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery geolocation jquery-callback

【解决方案1】：

在传递位置数据之前禁用提交按钮。

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

然后启用提交按钮

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

【讨论】：

我认为这是一个很好的后备方案，但我更愿意启用按钮并在单击按钮后引入延迟，而不是在页面加载时禁用按钮一段时间。跨度>

【解决方案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();

【讨论】：

这里的问题是您依赖于告诉用户“请再试一次”，我宁愿闪烁一个繁忙的指示器并等待数据。这可能吗？我有代码可以让繁忙的指示器可见，但我不确定如何优雅地等待数据可用。
您可以为此设置一个计时器，否则，如果您检索位置的插件没有CALLBACK 函数（可能有，请查看文档）。
我添加了一个代码，它会按照你说的做，并且会每秒检查一次，直到所有字段都被填充。
您也可以使用input [type=hidden] 字段代替.data()，以防您在表单中提交此数据。
感谢您的帮助，这肯定是我想走的路线，但我无法正常工作 =/

【解决方案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
    }
}

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

【讨论】：

【解决方案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();
}

【讨论】：