Кнопка с дополнительными параметрами (НЕ ajax)

Question

У меня есть кнопка для фильтрации результатов поиска до ближайшего места.

моя кнопка HTML

<a href="trending" onclick="addUrl(this); alert(this);" class="btn btn-warning" id="location">Nearest Location</a> 

мой JQuery

function addUrl(element){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 

      $(element).attr('href',function(){ 
       return element.href + '?lat=' + lat + '&lng=' + lng; 
      }); 


     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 
} 

При нажатии на кнопку, кажется перейдите к URL без параметров. Не уверен, что здесь не так.

Answer 1

Проблема заключается в том, что geolocation.getCurrentPosition функции является асинхронной, так на самом деле ваш код изменяет href атрибута после перенаправления действий выполняются. Вы можете отключить действие щелчка по умолчанию по умолчанию (используйте e.preventDefault() или return false внутри обработчика события click), а внутри geolocation.getCurrentPosition callback use window.location.href = YOUR_URL_WITH_PARAMS, что вызовет перенаправление.

document.getElementById('location').addEventListener("click", function(e){ 
    e.preventDefault(); 
    var href = e.target.href; 
    addUrl(href); 
}); 

function addUrl(href){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 
      window.location.href = href + '?lat=' + lat + '&lng=' + lng; 


     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 

} 

Answer 2

Вместо вашего события onclick внутри html-документа вы можете использовать функцию event listener и call preventDefault() для остановки собственных событий. Пример:

document.getElementById('location').addEventListener("click", function(e){ 
    e.preventDefault(); 
    addUrl(this); 
}); 

функция addUrl:

function addUrl(element){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      var lat = position.coords.latitude; 
      var lng = position.coords.longitude; 
      console.log(lat); 
      console.log(lng); 

      window.location.href = $(element).attr("href") + '?lat=' + lat + '&lng=' + lng; 
     }); 
    } 

    else 
     alert("navigator.geolocation is not available"); 
}