JSONP with Sencha Touch not working

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);

Answer 2

this is the example of php server:

$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');

//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

while you debug it in chrome or firefox,you can find that the response was joined with Ext.util.JSONP.callback({})

that is how jsonp "retrieving data from a page that is in a domain that is NOT the same as the originating domain of the running page" ,and give the data to your running page.