I've been attempting to make this function properly. The concept is simple: click the tag, which then triggers a REST service call that returns a JSON result. I extract the country name from the response just for testing purposes. I'm currently utilizing AngularJS.
Every time I click, it shows a Status of 0. If you'd like to take a look at the code, here's the Plunker link: http://plnkr.co/edit/k3Z6Ufi734oYE4ciVJs8
The HTML Code: It's quite straightforward - simply invoke the GetInfo function using ng-click.
<!DOCTYPE html>
<html ng-app="mainModule">
<!--http://plnkr.co/edit/k3Z6Ufi734oYE4ciVJs8-->
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div><b ng-click="GetInfo()">Click Me</b></div>
<b>{{AdditionalInfo.geobytescountry}}</b>
</body>
</html>
This section pertains to the Angular backend system.
var app = angular.module('mainModule', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'World';
var cityDetailsUrl = "http://gd.geobytes.com/GetCityDetails?callback=?&fqcn=new%20york,%20NY,%20United%20States";
$scope.AdditionalInfo = {};
$scope.GetInfo = function ()
{
$http.get(cityDetailsUrl)
.success(function(data, status, header, config){
console.log('ok');
$scope.AdditionalInfo = data;
console.log(data);})
.error(function(data, status, header, config){
console.log('error');
$scope.AdditionalInfo = data;
console.log(status);});
}
});
The provided hyperlink should prompt a JSON response, as I experimented with it in a web browser. It should be something akin to "geobytesinternet":"US","geobytescountry":"United States"