-5

I have a jQuery function that gets data from JSON file but I just can't get it to work. I am developing in Brackets editor and when I open site in their live preview everything works great. But when I open html file locally, $.getJSON.error is executed instead of normal $.getJSON

function loadJson(e) 
{
    $('.images').fadeOut(300);
    var jsonURL = "../../../images.json";
    var txt = $(e.target).text();
    setTimeout(function () 
    {
        $('.images').empty();
        $.getJSON(jsonURL, function(json) 
        {
            var imgList = "";
            $.each(json[txt], function () 
            {
                imgList += '<div class="image_container reference">
                                <a href="' + this.imgPath + '">
                                    <img src="' + this.imgPath + '"/>
                                    <div class="overlay">
                                        <span>' + this.name + '</span>
                                    </div>
                                </a>
                            </div>';
            });
            $('.images').append(imgList);
        }).error(function(json) { alert("error"); });
    }, 300);
    $('.images').fadeIn(300);
}

Function gets clicked item label, matches that with array name in the JSON file and then respectively appends those images to a container. It is working as supposed when I run it in Brackets live preview so I really don't know what is going on?

6
  • 1
    just stops working, gives me error - What's the error? Aug 19, 2015 at 8:37
  • Should be an issue with the path to your json file. Its able to resolve the relative path when using brackets , but in browser its unable to do so
    – jozzy
    Aug 19, 2015 at 8:39
  • $.getJSON(jsonURL, function(json) {}).error(function(json) {}); is executed instead of normal $.getJSON
    – orglce
    Aug 19, 2015 at 8:39
  • replace your json url with the exact address to that file instead of the path
    – Jijo John
    Aug 19, 2015 at 8:40
  • 1
    when I open html file locally... - that's your problem right there. Any ajax requests from file:// are seen as a cross-domain request, which you can't do. You need it to be running on a web server so everything is either on a domain or localhost. Aug 19, 2015 at 8:46

1 Answer 1

2

But when I open html file locally, $.getJSON.error is executed

Browsers take security very seriously. When working locally, Chrome will block any Ajax request to a local file. Firefox will only allow you to do so if the requested file is in the same folder (or deeper) than you HTML page.

In short, either place the JSON file in the same folder and use Firefox, or install a local server.

WAMP Server (Windows) is what I use. You will be working locally, but you will be accessing your pages via the http:// protocol (localhost) instead of the file:// protocol. That should fix it! Mac users can install MAMP.

4
  • Thanks. But it is still not working on domain (when I uploaded it). I placed the JSON file in the same folder as jQuery script but it still executes error.
    – orglce
    Aug 19, 2015 at 8:58
  • 1
    When you open your JavaScript console (F12), do you see any error? 404, Blocked request, or JSON formatting error ?
    – blex
    Aug 19, 2015 at 9:08
  • 1
    I solved it. Thanks to your pointing out that there is a console, I figured out that I had to put full path to the JSON file.
    – orglce
    Aug 19, 2015 at 9:49
  • Great! Well, you don't have to (I often don't do it), but you've got to make sure the path is correct.
    – blex
    Aug 19, 2015 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.