OK, I'm new to JSON so please forgive me if my question is a little ignorant - I've beat my head against the wall too much and need some expert advice.
I'm trying to get a simple example working where an HTML page uses jQuery's JSON/AJAX functions to make a call to an example PHP page which passes back a simple JSON data structure and then the page uses jQuery to write one of the elements from the data structure to the page. Works in FF. Doesn't work in IE7 arrrggghhhh!
HTML Code (relevant parts):
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function testAJAX() {
$.getJSON("test-ajax.php", function(json){
$("#div1").html(json.var1[1]);
});
}
</script>
</head>
<body>
<input type="button" value="test ajax" onclick="testAJAX();" />
<div id="div1"> </div>
</body>
PHP Code (test-ajax.php):
<?php
include_once('./json.php');
$output = array('var1' => array('value1a', 'value1b', 'value1c'),
'var2' => array('value2a', 'value2b', 'value2c'));
header("Content-type: text/plain");
echo json_encode($output);
?>
json.php has the json_encode() function I'm using - I got it from http://us2.php.net/manual/en/function.json-encode.php. I'm using it because I don't have PHP5 and my sys admins won't install any support for it. Just viewing test-ajax.php directly in your browser prints a serialized JSON structure like this:
{"var1":["value1a","value1b","value1c"],"var2":["value2a","value2b","value2c"]}
which appears to be a valid JSON structure. In my JavaScript I'm trying to reference 'value1b' by doing this: json.var1[1]. FF handles this just fine. IE7 says that is undefined.
What am I doing wrong? How do I take transfer a 2-d array like this
array('var1' => array('value1a', 'value1b', 'value1c'),
'var2' => array('value2a', 'value2b', 'value2c'));
over JSON/AJAX? Or is this not possible?