Am I using jquery getJSON correctly? Nothing appears on the page in godaddy

Question

I have a json file and an index file that uses jquery 1.10 getJSON and I'm trying to get data from the json file to display. I've got it to work on my localhost but when I move the index file to the subdomain mbsk8.zerogravity-web.com and the JSON file to the base domain www.zerogravity-web.com , the section of the page that is supposed to be updated is blank. This leads me to believe that this is a cross domain request issue.

No values are being added to console.log either.

Here is what I've tried to handl cross domain requests:

• Added "?callback=?" to the end of the URL
• Added a name around the JSON object: jsonResponse(JSON formatted object)

The folder structure on my godaddy account is:

json file: /LloydIce/json/skschedule.json

index file: /LloydIce/m/index.html (m) is the subdomain for mobile, using jquery mobile

Code for index.html

Header section for jquery resources

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

Script section in header

$(document).on('pagebeforeshow','#OpenSkate',function() {
$('#publicHolder').empty();
    $.getJSON('http://www.zerogravity-web.com/LloydIce/json/skschedule.json?callback=?',function(data)
{
  $.each(data, function(index, data){

    var collapsible = $('<div data-role="collapsible"></div>');
    console.log(this.day);
    collapsible.append('<h2>' + this.day + '</h2>');


      $.each(data.activities, function(index, data){
        if(this.type === "Public"){
        console.log(this.notes + ", " + this.activity);
        collapsible.append('<p><strong>' + this.activity + '</strong></p>');


        $.each(data.times, function(index, data){
          collapsible.append('<p><strong>Start:</strong> ' + this.start + ', <strong>End:</strong> ' + this.end + '</p></div>');

                    });
                    }
                });
            var collapsibleSet = $("#publicHolder");
            collapsibleSet.append(collapsible);
            collapsibleSet.trigger('create');
            });

        }); 
    });

Code for JSON file:

jsonResults(
[
    {
    "day": "Monday",
    "activities": [
        {
            "type": "Class",
            "notes": "Ages 3-5",
            "activity": "Snowbunnies 1 ",
            "times": [
                {"start":"6:00 PM","end":"6:45 PM"}
            ]
        },
        {
            "type": "Public",
            "notes": "N/A",
            "activity": "Open Skate ",
            "times": [
                {"start":"11:30 AM","end":"5:00 PM"},
                {"start":"7:30 PM","end":"9:30 PM"}
            ]
        }
    ]
}
]
);

chrome dev tools Network - Header tab

   Request URL:http://www.zerogravity-web.com/LloydIce/json/skschedule.json?callback=jQuery110206146174017339945_1388711470249&_=1388711470252
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:__utma=183972909.883508564.1382898602.1388360907.1388663932.3; __utmz=183972909.1382898602.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:www.zerogravity-web.com
Referer:http://mbsk8.zerogravity-web.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Query String Parametersview sourceview URL encoded
callback:jQuery110206146174017339945_1388711470249
_:1388711470252
Response Headersview source
Accept-Ranges:bytes
Access-Control-Allow-Origin:http://mbsk8.zerogravity-web.com
Access-Control-Allow-Origin:http://mbsk8.zerogravity-web.com
Connection:Keep-Alive
Content-Length:563
Content-Type:application/json
Date:Fri, 03 Jan 2014 01:48:53 GMT
ETag:"233-4ef071c1e30e4"
Keep-Alive:timeout=5, max=100
Last-Modified:Fri, 03 Jan 2014 01:48:42 GMT
Server:Apache

Chrome dev tools Network - preview and response tabs:

jsonResults(
[
    {
        "day": "Monday",
        "activities": [
            {
                "type": "Class",
                "notes": "Ages 3-5",
                "activity": "Snowbunnies 1 ",
                "times": [
                    {"start":"6:00 PM","end":"6:45 PM"}
                ]
            },
            {
                "type": "Public",
                "notes": "N/A",
                "activity": "Open Skate ",
                "times": [
                    {"start":"11:30 AM","end":"5:00 PM"},
                    {"start":"7:30 PM","end":"9:30 PM"}
                ]
            }
        ]
    }
]
);

Chrome dev tools console

Uncaught ReferenceError: jsonResults is not defined skschedule.json?callback=jQuery110206146174017339945_1388711470249&_=1388711470252:1
(anonymous function)

If I remove the jsonResults from the JSON file the information in the Network preview tab looks like this

[{day:Monday,...}]
    0: {day:Monday,…}
activities: [{type:Class, notes:Ages 3-5, activity:Snowbunnies 1 , times:[{start:6:00 PM, end:6:45 PM}]},…]
0: {type:Class, notes:Ages 3-5, activity:Snowbunnies 1 , times:[{start:6:00 PM, end:6:45 PM}]}
activity: "Snowbunnies 1 "
notes: "Ages 3-5"
times: [{start:6:00 PM, end:6:45 PM}]
0: {start:6:00 PM, end:6:45 PM}
end: "6:45 PM"
start: "6:00 PM"
type: "Class"
1: {type:Public, notes:N/A, activity:Open Skate ,…}
activity: "Open Skate "
notes: "N/A"
times: [{start:11:30 AM, end:5:00 PM}, {start:7:30 PM, end:9:30 PM}]
0: {start:11:30 AM, end:5:00 PM}
end: "5:00 PM"
start: "11:30 AM"
1: {start:7:30 PM, end:9:30 PM}
end: "9:30 PM"
start: "7:30 PM"
type: "Public"
day: "Monday"

After all that, I'm still not getting the results to appear on my page.

Answer 1

since you add jsonResults to wrap your json data, this becomes a jsonp request, not an ajax request anymore. please google "difference between ajax and jsonp".

jQuery.ajax({
    url : your url,
    dataType : 'jsonp',
    jsonpCallback : 'jsonResults',
    ......
});