Note, in my example url: "json-data.wct" it is my equivalent to your
"PHP" for our web server. In this case, json-data-wct, is simply a
dump of:
MyJSON({"items": [
{ id: "111", organization: "open2space",
start: new Date("2007-09-24 20:13:00"),
end: new Date("2007-09-24 16:13:00"),
duration: "2", work_type: "Programming",
project: "simpleTracker",
description: "Test 8" },
{ id: "112", organization: "open2space",
start: new Date("2007-09-24 19:14:00"),
end: new Date("2007-09-24 22:14:00"), duration: "3",
work_type: "Programming", project: "simpleTracker",
description: "Test 9" },
{ id: "113", organization: "open2space",
start: new Date("2007-09-24 19:14:00"),
end: new Date("2007-09-24 22:14:00"),
duration: "3",
work_type: "Programming",
project: "simpleTracker",
description: "Test 9" },
{ id: "114",
organization: "open2space",
start: new Date("2007-09-24 18:14:00"),
end: new Date("2007-09-24 22:14:00"),
duration: "4",
work_type: "Programming",
project: "simpleTracker",
description: "Tst 10" }
]});
jsonp (note the p) works by you creating a function (in this case
MyJSON) that will handle the data. The response is essentially a
"javascript" that jQuery Ajax will "eval-uate". The javascript is a
callback to this function with the parameter being your actual JSON
data.
--
HLS
On Sep 25, 9:20 am, Pops <[EMAIL PROTECTED]> wrote:
> I did the following to make it work:
>
> I wrapped the data as such:
>
> MyJSON({
> items: [
> your items here
> ]
>
> });
>
> then I created a function:
>
> Function MyJSON(data)
> {
> var json = data.items;
> var tbl = "<table border='1' class=\"tblTimeCards\">";
> tbl += "<thead><tr>";
> tbl += "<th>Id</th>";
> tbl += "<th>Client</th>";
> tbl += "<th>Project</th>";
> tbl += "<th>Start</th>";
> tbl += "<th>End</th>";
> tbl += "<th>Duration</th>";
> tbl += "<th>Description</th>";
> tbl += "</tr></thead>";
> tbl += "<tbody>";
> for (var x = 0; x < json.length; x++) {
> tbl += "<tr>";
> tbl += "<td class=\"tcID\">" + json[x].id + "</td>";
> tbl += "<td class=\"tcClient\">" + json[x].organization + "</td>";
> tbl += "<td class=\"tcProject\">" + json[x].project + "</td>";
> tbl += "<td class=\"tcStart\">" + json[x].start + "</td>";
> tbl += "<td class=\"tcEnd\">" + json[x].end + "</td>";
> tbl += "<td class=\"tcDuration\">" + json[x].duration + "</td>";
> tbl += "<td class=\"tcDesc\">" + json[x].description + "</td>";
> tbl += "</tr>";
> }
> tbl += "<tbody>";
> $(".tcList").html(tbl);
>
> }
>
> then I changed the ajax call to this:
>
> var xhr = $.ajax({
> type: "get",
> url: "json-data.wct",
> dataType: "jsonp",
> error: function (a,b,c) {
> alert("Error retrieving recent records\n\nstatus: " +
> a.status +"\n\n" + a.responseText);
> }
> });
>
> Note the "jsonp".
>
> This worked.
>
> --
> HLS
>
> On Sep 25, 1:38 am, sgrover <[EMAIL PROTECTED]> wrote:
>
> > I'm dong an Ajax call to retrieve some JSON and build a table from this.
> > (code posted below.) The Ajax call is never firing the "success"
> > function, but if I include an "error" function, that is called. Yet in
> > that error function, checking the status code shows a "200" and the
> > response text is my JSON code. The page in question loads just fine on
> > it's own and the JSON looks fine. So I'm not sure why the error
> > condition is being called. I'm sure it's something stupid, but I can't
> > see it. Any tips? I've tried both jQuery 1.1.4 and 1.2.1.
>
> > Shawn
>
> > CODE:
>
> > $.ajax({
> > type: "get",
> > url: "xhr/tc_recent.php",
> > dataType: "json",
> > success: function (json) {
> > alert(json.length);
> > var tbl = "<table class=\"tblTimeCards\">";
> > tbl += "<thead><tr>";
> > tbl += "<th>Id</th>";
> > tbl += "<th>Client</th>";
> > tbl += "<th>Project</th>";
> > tbl += "<th>Start</th>";
> > tbl += "<th>End</th>";
> > tbl += "<th>Duration</th>";
> > tbl += "<th>Description</th>";
> > tbl += "</tr></thead>";
> > tbl += "<tbody>";
> > for (var x = 0; x < json.length; x++) {
> > tbl += "<tr>";
> > tbl += "<td class=\"tcID\">" + json[x].id + "</td>";
> > tbl += "<td class=\"tcClient\">" + json[x].organization + "</td>";
> > tbl += "<td class=\"tcProject\">" + json[x].project + "</td>";
> > tbl += "<td class=\"tcStart\">" + json[x].start + "</td>";
> > tbl += "<td class=\"tcEnd\">" + json[x].end + "</td>";
> > tbl += "<td class=\"tcDuration\">" + json[x].duration + "</td>";
> > tbl += "<td class=\"tcDesc\">" + json[x].description + "</td>";
> > tbl += "</tr>";
> > }
> > tbl += "<tbody>";
> > $(".tcList").html(tbl);
> > },
> > error: function (a,b,c) {
> > alert("Error retrieving recent records\n\nstatus: " + a.status +
> > "\n\n" + a.responseText);
> > }
> > });
>
> > SAMPLE OF RETRIEVED JSON
> > [
> > { id: "111", organization: "open2space", start: new Date("2007-09-24
> > 20:13:00"), end: new Date("2007-09-24 16:13:00"), duration: "2",
> > work_type: "Programming", project: "simpleTracker", description: "Test
> > 8" },
> > { id: "112", organization: "open2space", start: new Date("2007-09-24
> > 19:14:00"), end: new Date("2007-09-24 22:14:00"), duration: "3",
> > work_type: "Programming", project: "simpleTracker", description: "Test
> > 9" },
> > { id: "113", organization: "open2space", start: new Date("2007-09-24
> > 19:14:00"), end: new Date("2007-09-24 22:14:00"), duration: "3",
> > work_type: "Programming", project: "simpleTracker", description: "Test
> > 9" },
> > { id: "114", organization: "open2space", start: new Date("2007-09-24
> > 18:14:00"), end: new Date("2007-09-24 22:14:00"), duration: "4",
> > work_type: "Programming", project: "simpleTracker", description: "Tst 10" }
> > ]
