स्थान पुनर्प्राप्त होने तक देरी फॉर्म सबमिशन

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

एचटीएमएल

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