위치가 검색 될 때까지 지연 양식 제출

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

자바 스크립트

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