I have issue with javascript code not woking in mobile browser (android and ios). However, the same code
Below code basically is trying to fetch user location from ip addrees and then logs to aws dynamo db through aws lambda function url. Site is hosted on s3 as a static website
The below code works perfectly when i am running on my laptop browsers like chrome , Edge. However , on mobile browsers it is just not loading at all. just a blank scrren.
Earlier i just had modal code and it used to work both on mobile as well as on desktop browsers.
Is using addEventListener twice a problem or am i missing something?
Any pointers would be helpful.
const myModal = new bootstrap.Modal('#load-modal');
window.addEventListener('DOMContentLoaded',function () {
myModal.show();
});
document.addEventListener("DOMContentLoaded", function() {
// Fetch latitude and longitude based on IP address
fetch("https://ipapi.co/json")
.then(response => response.json())
.then(data => {
console.log(data.latitude)
console.log(data.longitude)
const bdcAPI = `https://api-bdc.net/data/reverse-geocode-client?
// latitude=${data.latitude}&
// longitude=${data.longitude}`
getAPI(bdcAPI)
})
.catch(error => {
console.error("Error fetching IP address:", error);
});
});
function getAPI(bdcAPI){
fetch(bdcAPI)
.then(response => response.json())
.then(data => {
console.log(data.countryName)
console.log(data.city)
functionURL(data.continentCode,data.continent,data.countryCode,
data.countryName,data.principalSubdivisionCode,data.principalSubdivision,data.city,data.locality)
})
.catch(error => {
console.error("Error fetching country and city name", error);
});
}
function functionURL(continentCode,continent,countryCode, countryName,
principalSubdivisionCode,principalSubdivision,city,locality){
const functionurl = `aws lambda function url`
console.log(functionurl)
fetch(functionurl)
.then(response => response.json())
.then(data => {
console.log('Location logged successfully!!')
})
.catch(error => {
console.error("Error calling function url:", error);
});
}