CODEWITHSUNDEEP
javascriptjquerycoffeescript
agconti
agconti

Reputation: 18103

$.getJSON, Call back doesn't run

The Problem: The call back on my $.getJSON request doesn't run.

On page load, nothing is logged to the console or updated on the page, but when the function is pasted in to the console it executes correctly.

jQuery:

 $(function() {
    $.getJSON('http://freegeoip.net/json/', function(location, textStatus, jqXHR) {
      console.log("callback running");
      console.log(textStatus);
      console.log(jqXHR);
      $('#region-name').html(location.region_name);
    });
 });
  console.log(typeof $ !== "undefined" && $ !== null);

  console.log($.getJSON != null);

Both of the console logs after the function log true.

The above version is reduced for SO. Here is the full script.

#Geo.Coffee
$ ->
    $.getJSON(
        'http://freegeoip.net/json/?callback=?',
        (location, textStatus, jqXHR) ->  # example where I update content on the page.
            console.log "callback running"
            console.log textStatus
            console.log jqXHR  
            $('#region-name').html location.region_name  
            $('#areacode').html location.areacode
            $('#ip').html location.ip  
            $('#zipcode').html location.zipcode  
            $('#longitude').html location.longitude  
            $('#latitude').html location.latitude 
            $('#country-name').html location.country_name  
            $('#country-code').html location.country_code
            $('#city').html location.city 
            $('#region-code').html location.region_code
            $('container main content').append "<p>#{location.country_code}</p>"
            localStorage['loc'] = location.country_code
            if localStorage.loc is "US" then alert "Your From The US."  
    )#.fail(-> alert "fail").done( (loc) -> alert "done")
    console.log localStorage.loc
console.log $?
console.log $.getJSON?

compiled js:

(function() {
  $(function() {
    $.getJSON('http://freegeoip.net/json/?callback=?', function(location, textStatus, jqXHR) {
      console.log("callback running");
      console.log(textStatus);
      console.log(jqXHR);
      $('#region-name').html(location.region_name);
      $('#areacode').html(location.areacode);
      $('#ip').html(location.ip);
      $('#zipcode').html(location.zipcode);
      $('#longitude').html(location.longitude);
      $('#latitude').html(location.latitude);
      $('#country-name').html(location.country_name);
      $('#country-code').html(location.country_code);
      $('#city').html(location.city);
      $('#region-code').html(location.region_code);
      localStorage['loc'] = location.country_code;
      if (localStorage.loc === "US") {
        return alert("Your From The US.");
      }
    });
    return console.log(localStorage.loc);
  });

  console.log(typeof $ !== "undefined" && $ !== null);

  console.log($.getJSON != null);

}).call(this);

html:

<p id="region-name"></p>
<p id="areacode"></p>
<p id="ip"></p>
<p id="zipcode"></p>
<p id="longitude"></p>
<p id="latitude"></p>
<p id="country-name"></p>
<p id="country-code"></p>
<p id="city"></p>
<p id="region-code"></p>

correct fiddle: http://jsfiddle.net/5DjEq/1/

Upvotes: 2

Views: 1844

Answers (3)

kirschkern
kirschkern

Reputation: 1387

I had the same problem. Turned out to be my addblocker. uBlock Origin blocked several ip services. After disabling it, everything worked fine.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Your element id is the problem remove the #

<p id="region-name"></p>

Demo: Fiddle

Or escape the id selector like $('#\\#region-name').html(location.region_name); - demo: Fiddle

Also since the remote resource supports jsonp I would recommend using it if you want to support IE <= 8 - now you are using CORS support provided by the remote resource

$(function () {
    $.getJSON('http://freegeoip.net/json/?callback=?', function (location, textStatus, jqXHR) {
        console.log("callback running");
        console.log(textStatus);
        console.log(jqXHR);
        $('#region-name').html(location.region_name);
    });
});

Demo: Fiddle

Looks like your coffeescript has a indentation problem

$ ->
$.getJSON(
          'http://freegeoip.net/json/?callback=?',
          (location, textStatus, jqXHR) ->  # example where I update content on the page.
              console.log "callback running"
              console.log textStatus
              console.log jqXHR  
              $('#region-name').html location.region_name  
              $('#areacode').html location.areacode
              $('#ip').html location.ip  
              $('#zipcode').html location.zipcode  
              $('#longitude').html location.longitude  
              $('#latitude').html location.latitude 
              $('#country-name').html location.country_name  
              $('#country-code').html location.country_code
              $('#city').html location.city 
              $('#region-code').html location.region_code
              $('container main content').append "<p>#{location.country_code}</p>"
              localStorage['loc'] = location.country_code
              if localStorage.loc is "US" then alert "Your From The US."  
          )#.fail(-> alert "fail").done( (loc) -> alert "done")

Demo: Fiddle

Upvotes: 4

vodolaz095
vodolaz095

Reputation: 6986

you need to make jsonp request

$.getJSON('http://freegeoip.net/json/?callback=?',

Upvotes: 2

Related Questions