1

I'm trying to follow this tutorial: http://www.9lessons.info/2009/10/json-jquery-ajax-php.html

Here is my code: http://jsfiddle.net/9ujd8s8r/1/

How comes that it doesn't load the JSON data into the page with this code?

$(function () {
    $(".load").click(function () {
        $.getJSON("http://demos.9lessons.info/data.json", function (data) {
            $.each(data.posts, function (i, data) {
                var div_data = "<div class='box'><a href='" + data.url + "'>" + data.title + "</a></div>";

                $(div_data).appendTo("#9lessonsLinks");
            });
        });
        return false;
    });


});
J.Zil
  • 2,397
  • 7
  • 44
  • 78
  • You have not define "9lessonsLinks" id anywhere in the html. define it. due to that your data is not populating. – Code Lღver Sep 12 '14 at 13:40
  • By the way, [mentioned site](http://www.9lessons.info/2009/10/json-jquery-ajax-php.html) has awful code indentation. To be honest, it doesn't have code indentation at all... – Regent Sep 12 '14 at 13:40

2 Answers2

1

Check your console for errors. The following error is showing:

XMLHttpRequest cannot load http://demos.9lessons.info/data.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

For more information see "No 'Access-Control-Allow-Origin' header is present on the requested resource".

Community
  • 1
  • 1
Dan
  • 9,391
  • 5
  • 41
  • 73
0

Your code seems correct. It's a problem of crossdomain. You try to access resource in another server which has not defined that you can.

http://jquery-howto.blogspot.fr/2013/09/jquery-cross-domain-ajax-request.html

T00rk
  • 2,178
  • 3
  • 17
  • 23