Locate IP on page (Basic)

I know many of you like to monitor who is online at your site and the most irritating part is bunch of guests look alike surfing different locations of your site. You are curious who they are, where they are from, and you start hopping between your site and some online IP locator service copy-pasting IP strings. Happened with you? Well then, read ahead.

This is the basic tutorial, so in this we are gonna get Country, City and Region for each IP we encounter in Who’s online page, inline, on page. Yes, with minimal template edits we can do that.

Jump in the modifications:
We are gonna edit 3 templates:online, ‘online_row_ip’ & ‘online_row_ip_lookup’.

1. Open template: ‘online_row_ip’, change this code:

 {$user['ip']}

To

 <span class="ip">{$user['ip']}</span> 

2. Open template: ‘online_row_ip_lookup’, keep existing code, add at the beginning:

 &nbsp;<a href="#" class="iplocate">[Locate]</a>&nbsp;

 
3. Open template: ‘online’, locate variable {$footer}, add after that:

<script type="text/javascript">
$(function () {
    $('.iplocate').on('click', function (e) {
        e.preventDefault();
        var ref = $(this);
        ajaxCall($.trim(ref.prev('.ip').text()), function (result) {
            ref.before('[' + result + ']').remove();
        });
    });

    function ajaxCall(ipdata, callback) {
        $.ajax({
            url: "http://ip-api.com/json/" + ipdata + "?fields=country,regionName,city",
            dataType: "json",
            cache: false,
            success: function (msg) {
                var result = (typeof msg == 'object') ? (msg.country + ', ' + msg.regionName + ', ' + msg.city) : "Unable to locate";
                callback(result);
            }
        });
    }
});
</script>

Save all templates. Result:


  screen.gif (Size: 100.19 KB / Downloads: 28)

Note: 

• If your server restricting CROB, you can get Cross-Origin Read Blocking warning in console, you can ignore the warning and the code will still work.
  
• If you are using SSL (https://) this code will not work because in this tutorial we are using FREE ‘ip-api’ and secured XMLHttpRequest is a PAID service. You can purchase pro to make SSL access to API or ………… or there are few workarounds, but that’s another tutorial
  

So, that’s all for now. Happy coding …