Html Question posted in
Some basic documentation can be found here.

Html – JS Redirect Not Working but Console Shows No Issues

Any help here would be greatly appreciated. I managed to get this working in PowerApps like a charm but I need a public facing version for a project I am working on which requires a JS function. They are so finicky it seems lol.

Positive that this part of the HTML functions correctly, as no console logs appear and it does the location request as expected:

function fun1() {
  let varGeofenceLon1 = 30.384219;
  let varGeofenceLon2 = 30.248352;
  let varGeofenceLat1 = -97.718391;
  let varGeofenceLat2 = -97.769386;

  navigator.geolocation.getCurrentPosition((position) => {
    let lon = position.coords.longitude;
    let lat = position.coords.latitude;
    let lontext = lon.toFixed(4);
    let latText = lat.toFixed(4);
  });

  // This part of the function seems to not perform the redirect after the Geofence verification,
  // which I assume has to do with my object utilization here:

  if (
    lonText < varGeofenceLon1 &&
    lonText > varGeofenceLon2 &&
    latText < varGeofenceLat1 &&
    latText > varGeofenceLat2
  ) {
    window.location.href = "http://www.acss.powerappsportals.com/";
  }
}
<html lang="en">

<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" initial-scale="1">
  <link rel="stylesheet" href="TestMap.css" </head>

  <body>
    <button class="button" onclick="fun1()">Confirm Location</button>
  </body>

</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After a lot of deliberation I turned this into a code that functions. I imagine I should be within the Geofence but it is still returning a false value, however, this function is working now:

      function fun1() {
  navigator.geolocation.getCurrentPosition((position) => {
  let varGeofenceLon1 = 30.384219;
  let varGeofenceLon2 = 30.248352;
  let varGeofenceLat1 = -97.718391;
  let varGeofenceLat2 = -97.769386;
  let lon = position.coords.longitude;
  let lat = position.coords.latitude;

  if (
    lon < varGeofenceLon1 &&
    lon > varGeofenceLon2 &&
    lat < varGeofenceLat1 &&
    lat > varGeofenceLat2
  ) {
    window.location.href = "https://www.acss.powerappsportals.com/";
  } else {
    window.location.href = "";
  }
});
}

  2. 0

    Taking Barmar’s and other comments into consideration, here is something to try.

    First, Barmar noted that javascript will blast on past the getCurrentPosition() function before it finishes, and the values will not be available for compare. The solution is to use async/await so that the javascript will wait for the getCurrentPosition() function to finish before continuing.

    Next, it was noted that the variables inside the getCurrentPosition() function are local to that function. The solution is to declare them above the function and merely update the already-existing top-level vars inside the function.

    Finally, one of the variables was misspelled: lontext !== lonText.

    Perhaps this will help?

    async function fun1() {
  let lon, lat, lonText, latText;
  let varGeofenceLon1 = 30.384219;
  let varGeofenceLon2 = 30.248352;
  let varGeofenceLat1 = -97.718391;
  let varGeofenceLat2 = -97.769386;

  await navigator.geolocation.getCurrentPosition((position) => {
    lon = position.coords.longitude;
    lat = position.coords.latitude;
    lonText = lon.toFixed(4);
    latText = lat.toFixed(4);
  });

  // This part of the function seems to not perform the redirect after the Geofence verification,
  // which I assume has to do with my object utilization here:

  if (
    lonText < varGeofenceLon1 &&
    lonText > varGeofenceLon2 &&
    latText < varGeofenceLat1 &&
    latText > varGeofenceLat2
  ) {
    window.location.href = "http://www.acss.powerappsportals.com/";
  }
}
    <html lang="en">

<head>
  <title>Test</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" initial-scale="1">
  <link rel="stylesheet" href="TestMap.css" </head>

  <body>
    <button class="button" onclick="fun1()">Confirm Location</button>
  </body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search