Question

I was following this tutorial of Sencha Touch: http://www.vimeo.com/15672696
Perfect tutorial, worked flawless.

But when I tried to reuse this code for my own project, I doesn’t work.
Here is wat I did:

In my Sencha touch application I wrote the following function:

showContacts = function()
{
    Ext.util.JSONP.request({
        url: 'http://www.hotcoffee.be/check-relations/index.php/json/contactpersonen',
        callbackKey: "callback",
        params: {
            unique: Math.random()
        },
        callback: function(data)
        {
            var contacts = data.results;
            nameOfPanel.update(contacts);
        }
    });
}

First, I wrote my own JSON file with PHP (codeigniter):

<?
    $row[] = array(
        "name" => $item->name,
        "first_name" => $item->first_name,
        "avatar"=>$item->avatar
    );

    // PASSING THE ARRAY $row TO A VIEW
    // ON THE VIEW I OUTPUT THE ARRAY

    $this->output->set_content_type('application/json')->set_output(json_encode($row));
?>

(Result: see URL of showContacts function)

This didn’t work, so I assumed something was wrong with using a PHP file as JSON, so I created a JSON file:

(Result: http://www.hotcoffee.be/check-relations/json/friends.json)

Now it seems that also this didn’t work. I’m breaking my head over it a lot of houres…
I also receive the following messages in Chrome’s debugger:

Resource interpreted as Script but transferred with MIME type application/json. (contactpersonen:-1)
Uncaught SyntaxError: Unexpected token : (contactpersonen:1)
Resource interpreted as Image but transferred with MIME type text/html. (csi:-1)

Another thing is that I can ensure that the panels and tpl’s are written well, because with hardcoded testdata it does work. Only loading the JSON file is the problem.

Anyone knows how to handle it?
Thank you very much!

Answer 1

I answered a similar question here: Sencha seems to not like Rails' json. It is specific to Rails but the concept still applies.

Essentially James Pearce is correct. What you are returning needs to be wrapped in a tag and the callback function. This will insert the code on your page and run the script, which has the effect of calling the function you provide.

$response = "<script type='text/javascript'>";
$response .= $_GET['callback'] . "(" . json_encode($row) . ")";
$response .= "</script>";
$this->output->set_content_type('application/json')->set_output($response);