PDA

View Full Version : Problem with remote JSON, fine with local



niblettes
22 Nov 2010, 11:06 PM
I've just gone through two books (ExtJS in Action, and Learning ExtJS 3.2) and am now starting to build my first sample app. I'm experiencing a problem that has me completely stumped.

This first app is basically an address book -- CRUD for records of people with contact information displayed in a grid. I've been working locally using PHP, ExtJS, Apache and MySql. I managed to create a table, access with PHP and produce valid JSON. My ExtJS app can connect to the PHP, read the JSON and display it in a grid.

To mix things up I decided to host my data remotely on my Dreamhost account. This is where things go wrong. My ExtJS app no longer gets the JSON code, and just shows the spinning "Loading" animation till it times out and displays nothing.

What has me so stumped is that I can connect directly to the URLs for both PHP files (remote and local) and get identical valid JSON code from each. (Actually there is a very slight difference shown in the screenshots below. If I view the source of each, the locally served JSON code begins at the first character space, while the remotely served JSON code begins with 2 newlines and then the code -- could this be the problem??)

The only difference in the ExtJS code is the where I use ScriptTagProxy for the remote data and HttpProxy for local.

Does anyone here have any ideas why with virtually the code, and virutally identical JSON results my apps displays local data but not remote (I hope I didn't just overlook a typo or something equally simple)??

Local ExtJS that displays the Grid


...
// to get the json data
var remoteProxy = new Ext.data.HttpProxy({
url : '<?php echo $data_url_local; ?>'
});

// to read and store the json data
var jsonStore = new Ext.data.JsonStore({
proxy : remoteProxy,
fields : recordFields,
totalProperty : 'totalCount',
root : 'records',
id : 'ourJsonStore',
autoLoad : false,
remoteSort : true
});
...

Remote ExtJS that displays the Grid


...
// to get the json data
var remoteProxy = new Ext.data.ScriptTagProxy({
url : '<?php echo $data_url; ?>'
});

// to read and store the json data
var jsonStore = new Ext.data.JsonStore({
proxy : remoteProxy,
fields : recordFields,
totalProperty : 'totalCount',
root : 'records',
id : 'ourJsonStore',
autoLoad : false,
remoteSort : true
});
...

Local PHP that produces the JSON


<?php
// ********************************
// OPEN DB CONNECTION
// ********************************

// CONFIG
include("db_config_local.php");

//OPEN
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($db_name, $conn);

//PRODUCE
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 3;
$count_sql = "SELECT * FROM ".$db_table_name;
$sql = $count_sql . " LIMIT ".$start.", ".$limit;
$arr = array();
If (!$rs = mysql_query($sql)) {
Echo "{success:false}";
}else{
$rs_count = mysql_query($count_sql);
$results = mysql_num_rows($rs_count);
while($obj = mysql_fetch_object($rs)){
$arr[] = $obj;
}
$json_string = "({ \"totalCount\":\"".$results."\",\"records\":".json_encode($arr)."})";
echo (trim($json_string));
}

// *******************************
// CLOSE DB
// *******************************

mysql_close($conn);
?>
Remote PHP that produces the JSON


<?php
// ********************************
// OPEN DB CONNECTION
// ********************************

// CONFIG
include("db_config.php");

//OPEN
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($db_name, $conn);

//PRODUCE
$start = ($_REQUEST['start'] != '') ? $_REQUEST['start'] : 0;
$limit = ($_REQUEST['limit'] != '') ? $_REQUEST['limit'] : 3;
$count_sql = "SELECT * FROM ".$db_table_name;
$sql = $count_sql . " LIMIT ".$start.", ".$limit;
$arr = array();
If (!$rs = mysql_query($sql)) {
Echo "{success:false}";
}else{
$rs_count = mysql_query($count_sql);
$results = mysql_num_rows($rs_count);
while($obj = mysql_fetch_object($rs)){
$arr[] = $obj;
}
$json_string = "({ \"totalCount\":\"".$results."\",\"records\":".json_encode($arr)."})";
echo (trim($json_string));
}

// *******************************
// CLOSE DB
// *******************************

mysql_close($conn);
?>


Local - JSON view source screenshot
23466
.
Remote - JSON view source screenshot
23467
.
Local - JSON and Firebug screenshot
23468
.
Remote - JSON and Firebug screenshot
23469

Condor
23 Nov 2010, 2:38 AM
Read the API docs for ScriptTagProxy again. Your server is returning the wrong format for a ScriptTagProxy.

niblettes
23 Nov 2010, 12:32 PM
Neither of the books I've been using explained this one simple thing from the API: "the server must wrap the data object with a call to a callback function"

A number of forum posts around the net mention the need to pass JSON back in parens (which I did) in order to work with ExtJS's browser security workaround, but none that I read mentioned the need to wrap the data in the callback function.

I didn't check the API docs because I assumed the books I have would have explained such a simple matter. As it turns out, assuming book authors and their editors provide complete and accurate information isn't always a wise plan -- always check the API docs.