Konum alınana kadar form teslimini geciktirin

Question

Tarayıcıdan konum ayarları almayı deneyen bir uygulama var, bu biraz zaman alıyor, bu yüzden sayfa yüklendiğinde çalışmasını istiyorum. Ancak, yer geri arama çalışmasından önce gönder düğmesini tıklarsanız, konum verisi yoktur. Benim sorum basit, formumuzu göndermeden önce konum başarı geri dönüşümü bitirmek için nasıl bekleyebilirim? (aptalca bir uyku ifadesi gibi).
İdeal olarak yoğun bir göstergeyi yanıp sönmek ve veriyi beklemek istiyorum. Mümkün mü? Meşgul bir göstergeyi görünür kılmak için kodum var, ancak verilerin kullanılabilir olmasını nasıl zarif bir şekilde bekleyeceğimi bilmiyorum.

$(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

Yer verisi geçene kadar gönderme düğmesini devre dışı bırakın. Eğer mevcut bir geri çağırma işlevi yoktur kullandığınız eklentisi konum, o zaman her nasılsa sayfa ve kontrol sonuçları bağlamak gerekir Eğer

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

Sonra düğmesine

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

Answer 2

göndermek etkinleştirmek kullanıcı göndermeden önce ona karşı.

Tek yol, konumun sonuçlarını forma bağlar, sonra yalnızca formun orada bir konum olduğunda gönderilmesini sağlar. Bunu yapmak için .data()'u kullanmanın bir örneği.

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



    } 

Eklendi konum eklentisinden bir değer için her saniye denetler bu kodu:

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

Kullanım iki semaforlar:

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

Bu şekilde, kullanıcı yükleme göreceksiniz görüntü, yalnızca Coğrafi Veriler formu gönderdiklerinde tam olarak yüklenmediyse. İlk olarak hangi olayın tetiklendiğinin farkına varmayacağınızı fark edeceksiniz, her ikisi de bittiğinde sadece geçecektir.

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