I'd like to create a js for a dynamic location

Question

alexxx1 0 Newbie Poster

1 Month Ago

So i'd like to have a text saying [Location] which will be shown and changed based on the viewer's location/ip. I tried to follow this video here https://www.youtube.com/watch?v=1KiGKd2XXL4 but i didn't manage to make it to work. I registered on 2 websites to get an API key which i placed it in the script and yet it didn't work out. What I tried in a nutshell is

<script>
    $('document').ready(function() {
        $.ajax({
          url: "https://api.snoopi.io/check?apikey=MY API KEY",
          dataType: "jsonp",
          jsonpCallback: "unBounce"
        });
    }); // Ready
function unBounce(json){
   $('#location').html(json.City + ", " + json.State);
}
</script>

Followed by

<span id="location"></span>

javascript

Edited 1 Month Ago by alexxx1

3 Contributors
12 Replies
122 Views
4 Days Discussion Span
Latest Post 1 Month Ago Latest Post by toneewa

Dani 4,329 The Queen of DaniWeb

1 Month Ago

What happens when you just go to the URL https://api.snoopi.io/check?apikey=MY API KEY ? Does the API correctly provide your location in JSON format?

Dani 4,329 The Queen of DaniWeb

1 Month Ago

Can you please share a public link to a URL where you are testing/using it so that I can investigate further?

Dani 4,329 The Queen of DaniWeb

1 Month Ago

What I mean is, can you please provide the URL on spaces.w3schools.com, so that I can see if maybe it's a CORS issue that is causing the problem. (That's my best guess as to what the problem is, but if I can check out the URL, I can investigate further.)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

alexxx1 0 Newbie Poster · Answer 1 · 2024-11-01T19:31:18+00:00

alexxx1 0 Newbie Poster

1 Month Ago

Yes it does! :)

alexxx1 0 Newbie Poster · Answer 2 · 2024-11-02T14:20:56+00:00

alexxx1 0 Newbie Poster

1 Month Ago

I'm working on spaces.w3schools .com

toneewa 81 Junior Poster in Training · Answer 3 · 2024-11-05T18:11:03+00:00

I signed up and tested the Snoopi code, and the following works. JQuery is needed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Location</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Your Location</h1>
    <div id="location">Loading...</div>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: "https://api.snoopi.io/check?apikey=a11...0b",
                dataType: "jsonp",
                jsonpCallback: "unBounce"
            });
        }); // Ready

        function unBounce(json){
            $('#location').html(json.City + ", " + json.State);
        }
    </script>
</body>
</html>

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 4 · 2024-11-05T19:02:58+00:00

Unfortunately a bug was preventing alexxx1 from posting. He messaged me:

Btw the location js is resolved. I needed to add fetch()

I'm honestly confused where he needed to add fetch()?

toneewa 81 Junior Poster in Training · Answer 5 · 2024-11-05T20:03:54+00:00

Maybe something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Location</title>
</head>
<body>
    <h1>Your Location</h1>
    <div id="location">Loading...</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('https://api.snoopi.io/check?apikey=a11...700b')
                .then(response => response.json())
                .then(json => {
                    document.getElementById('location').innerHTML = json.City + ", " + json.State;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('location').innerHTML = 'Failed to retrieve location';
                });
        });
    </script>
</body>
</html>

My first thought was the function name was the same as the keyword fetch.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Location</title>
</head>
<body>
    <h1>Your Location</h1>
    <div id="location">Loading...</div>

    <script>
        function fetch() {
            const script = document.createElement('script');
            script.src = 'https://api.snoopi.io/check?apikey=a11...00b&callback=unBounce';
            document.body.appendChild(script);
        }

        function unBounce(json) {
            document.getElementById('location').innerHTML = json.City + ", " + json.State;
        }

        // Calls the function to get the location
        document.addEventListener('DOMContentLoaded', fetch);
    </script>
</body>
</html>

Hope this helps.

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 6 · 2024-11-05T20:10:08+00:00

Dani 4,329 The Queen of DaniWeb

1 Month Ago

That's only if he chooses not to use jQuery.

toneewa 81 Junior Poster in Training · Answer 7 · 2024-11-05T20:37:00+00:00

I see.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Location</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Your Location</h1>
    <div id="location">Loading...</div>

    <script>
        $(document).ready(function() {
            fetch('https://api.snoopi.io/check?apikey=a11...00b')
                .then(response => response.json())
                .then(json => {
                    $('#location').html(`${json.City}, ${json.State}`);
                })
                .catch(error => {
                    console.error('Error:', error);
                    $('#location').html('Failed to retrieve location');
                });
        });
    </script>
</body>
</html>

This should do the trick.

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 8 · 2024-11-05T21:12:31+00:00

That seems like a worse solution. There’s no performance nor complexity advantage to using jQuery. Your previous example was much better.

toneewa 81 Junior Poster in Training · Answer 9 · 2024-11-05T22:40:31+00:00

Just my guess, since you said they used fetch(). Without seeing all the code, not much more I can do here... maybe... especially if the first example worked fine, without adding some fetch().

We don't know the whole scope here. Maybe he wants to be redundant? What happens if the script source fails, yet he has the built-in fetch() API, which doesn't need additional libraries? Another solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Location</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // Fallback if jQuery fails to load from primary CDN
        window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"><\/script>');
        // Fallback if jQuery fails to load from secondary CDN
        window.jQuery || document.write('<script src="jquery.min.js"><\/script>');
    </script>
</head>
<body>
    <h1>Your Location</h1>
    <div id="location">Loading...</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (window.jQuery) {
                // jQuery is loaded
                $.ajax({
                    url: "https://api.snoopi.io/check?apikey=a11...00b",
                    dataType: "jsonp",
                    jsonpCallback: "unBounce"
                });
            } else {
                // jQuery failed to load, use fetch as a backup
                fetch('https://api.snoopi.io/check?apikey=a11...00b')
                    .then(response => response.json())
                    .then(json => {
                        document.getElementById('location').innerHTML = json.City + ", " + json.State;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        document.getElementById('location').innerHTML = 'Failed to retrieve location';
                    });
            }
        });

        function unBounce(json) {
            $('#location').html(json.City + ", " + json.State);
        }
    </script>
</body>
</html>