延遲表單提交，直到檢索到位置

我有一個應用程序試圖從瀏覽器獲取位置設置，這往往需要一段時間，所以我希望它在頁面加載時運行。但是，如果您在位置回調運行之前單擊提交按鈕，則沒有位置數據。我的問題很簡單，如何在提交表單之前等待我的位置成功回調完成？（沒有什麼愚蠢的睡眠聲明）。
理想情況下，我想閃爍繁忙的指示燈並等待數據。這可能嗎？我有代碼來使繁忙的指標可見，但我不知道如何優雅地等待數據可用。延遲表單提交，直到檢索到位置

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

來源

2012-05-02 rooftop

禁用提交按鈕，直到位置數據通過。

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

然後啓用提交按鈕

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

來源

2012-05-02 01:50:08 luke2012

我覺得這是一個很好的回退，但我寧願啓用按鈕，點擊按鈕，而不是具有後引入的延遲按鈕在頁面加載時禁用了一段時間。 – rooftop

如果插件，您正在使用沒有可用的回調函數的位置，那麼你就需要綁定的結果以某種方式頁面，並檢查在用戶提交之前反對它。

一種方法是將位置結果綁定到表單，然後只允許在存在位置時提交表單。以下是使用.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-02 01:51:33

這裏的問題是你依靠告訴用戶「請再試一次」我寧願閃爍繁忙的指示燈並等待數據。這可能嗎？我有代碼來使繁忙的指標可見，但我不知道如何優雅地等待數據可用。 – rooftop

你可以在這個上設置一個定時器，否則，如果你的插件檢索到的位置沒有'CALLBACK'函數（這可能是，看看文檔）。 –

我添加了一個代碼，可以完成您所說的內容，並會每隔一秒檢查一次，直到填充所有字段。 –

使用兩個信號燈：

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-02 05:44:29 rkw

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-20 02:50:17

延遲表單提交，直到檢索到位置

回答

相關問題