CODEWITHSUNDEEP
javascriptmobilebrowserfetch-api
Arun
Arun

Reputation: 21

Javascript not working on mobile browser , however works on desktop

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

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
  <div class="modal fade" id="load-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="text-center">
          ...
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: -1

Views: 80

Answers (1)

OverSamu
OverSamu

Reputation: 164

As indicated by the JS console, the bootstrap constant is not defined when the JS code is executed (Uncaught ReferenceError: bootstrap is not defined).
You need to move the definition of myModal into the DOMContentLoaded listener, i.e. when bootstrap is also loaded.
Additionally, you could replace window.addEventListener with document.addEventListener, or merge them into the same document DOMContentLoaded listener.

document.addEventListener('DOMContentLoaded', function() {
  const myModal = new bootstrap.Modal('#load-modal');
  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);
    });
}
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
  <div class="modal fade" id="load-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="text-center">
          ...
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 0

Related Questions