3

I developed a web application using IE9 and a text editor. It reads a JSON file, then fills some DIV elements according to that file and the logic of the JavaScript and jQuery code. Under IE9, it works perfectly.

Under Chrome, it fails to execute the $.getJSON() statement, so no data is available. Under FireFox, the $.getJSON() statement apparently runs (alert messages testify to this), but it doesn't read anything.

The JSON file passes JSONLint.

Neither Chrome nor FireFox indicate any errors.

I made a sample file using JSON data from the JSON site, validated it through JSONLint, then ran my code using that file. No difference--Chrome still ignores the $.getJSON() statement.

A relevant section of my code:

    function buildTree(centralID) {
      alert("Can we start, at least?");
     $.getJSON('sample.json', function(data) {
      alert("first success");
      $.each(data.person, function(i, xdata) {

Chrome displays the first alert but not the second.

Any ideas?

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Michael Broschat
  • 875
  • 3
  • 10
  • 17

2 Answers2

2

Is this running on a web server or are you just opening the file in a browser? If you are just opening the file you will have problems.

BNL
  • 7,085
  • 4
  • 27
  • 32
  • Wow, I had no idea. But using localhost on my development machine doesn't change anything. What's the theory here? – Michael Broschat Dec 04 '11 at 00:50
  • The rules for what you can access via Ajax are different, not really sure what they are, I always run everything off WA web server. – BNL Dec 04 '11 at 01:05
  • I'm now remembering that when I went to research something similar a few weeks ago, I found on the Chrome site evidence of a controversy about whether Chrome was correct in disallowing "local access." I had other problems at the time, so quickly forgot this. I presume that, as you probably suggest, if I move everything to a server (from my development machine's IIS), it should work. – Michael Broschat Dec 04 '11 at 10:30
2

You can use the built in error function to display the error and debug it. 

$(document).ready(function(){ // Make sure your jQuery is inside this
$.getJSON("sample.json", function(data) {
    alert('Point 1 Reached.');
    console.log(data); // Here we log to our console
    $.each(data.feed.entry, function(i, item) {
             // Do your stuff here
        }); // End of $.each

// Here Success, Completed & Error do something. chained onto $.getJSON
        }).success(function() { alert("success"); })
          .error(function(jqXHR, textStatus, errorThrown) { // Debug the error!!
                    console.log("error " + textStatus);
                    console.log("error throw " + errorThrown);
                    console.log("incoming Text " + jqXHR.responseText);
                }) // End of .error
          .complete(function() { alert("complete"); });
        });
}); // End of DOM Ready

This should show you the error in the console window of firefox or chrome (console.log will not work in IE and break the script). To bring up the console window in firefox or chrome press F12. If the JSON is not working, it will show an error which you can debug.

Update
Also make sure that this code is in your $(document).ready(). The $.getJSON() might cause unexpected behaviours across browsers if using it otherways.

Anil
  • 21,730
  • 9
  • 73
  • 100
  • I think this is going to do it. I need to take this apart very carefully, but I'm already seeing on the console log that Chrome (at least) cannot "find" the JSON file (which is sitting right there in the same folder). That explains why it isn't opening it, even if not why it can't open it. Thanks for pointing this out and for clarifying the extended $.getJSON() syntax. The docs show this extended syntax, but I wasn't clear how to place my own code. – Michael Broschat Dec 04 '11 at 01:41