title: jQuery getJSON works locally, but not cross domain
body: <p>I've searched FOREVER and can't come up with a definitive answer to my problem.  So here it is.  I have a JSON file (I went to jsonlint to validate and it says its good) that looks like this (some information modified):</p>
  
  <pre><code>[{
          "position":"1",
          "category":"A",
          "title":"Title to first story",
          "description":"The first story."
      },
      {
          "position":"2",
          "category":"B",
          "title":"Title to second story",
          "description":"The second story"
      },
      {
          "position":"3",
          "category":"B",
          "title":"Title to third story",
          "description":"The third story"
      }
  ]
  </code></pre>
  
  <p>I used jQuery to parse through and put on an html page using this function:</p>
  
  <pre><code>$.getJSON('page.json', function(data) {
    var items = [];
  
    $.each(data.reponse, function(item, i) {
      items.push('&lt;li id="' + i.position + '"&gt;' + i.title + ' - ' + i.description + '&lt;/li&gt;');
    });
  
    $('&lt;ul/&gt;', {
      'class': 'my-new-list',
      html: items.join('')
    }).appendTo('body');
  });
  </code></pre>
  
  <p>It works perfectly!  Now comes my issue, the JSON file will not be hosted locally, and will in fact be hosted on a separate domain.  So I modified my code as follows (after some reading) hoping to get it working:</p>
  
  <pre><code>$.getJSON('http://www.otherdomain.com/page.json?format=json&amp;callback=?', function(data) {
    var items = [];
  
    $.each(data.reponse, function(item, i) {
      items.push('&lt;li id="' + i.position + '"&gt;' + i.title + ' - ' + i.description + '&lt;/li&gt;');
    });
  
    $('&lt;ul/&gt;', {
      'class': 'my-new-list',
      html: items.join('')
    }).appendTo('body');
  });
  </code></pre>
  
  <p>By adding the 'callback' line I stopped getting a "Failed to load resource" error.  However, nothing is happening.  It is like the function I added isn't even there.  I tried to take all of it out and add a simple 'alert(data)', but that didn't even fire.  What am I doing wrong?  A big problem is that I am 100% limited to just HTML and JavaScript to work (not my choice).  Thanks for any help!</p>
  
  <p><strong>EDIT</strong>
  Ok, I don't have ability for the other server to dynamically add anything to the json file.  So I modified by hardcoding a function around the json (smaller sample):</p>
  
  <pre><code>storyData(
  [{
          "position":"1",
          "category":"A",
          "title":"Title to first story",
          "description":"The first story."
      }
  ])
  </code></pre>
  
  <p>Everything now works!  Thanks for all the help!</p>