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

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

一种方法是将位置的结果绑定到表单，然后仅当那里有位置时才允许表单提交。这是一个使用.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

使用两个信号量：

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 回答
0

您可以在返回位置后向表单添加提交功能。

这是一段对我有用的代码。

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();
}
于 2018-02-20T02:50:17.603 回答