0

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?

flag

71% accept rate
It should absolutely be possible. I just tested that JSON string in IE7 and it worked fine, I was able to successfully find the value of json.var1[1]. The problem must be elsewhere, can you post your getJSON function? – Jack Sleight Feb 25 '09 at 23:58
getJSON is from the jQuery library. – Brian Fisher Feb 26 '09 at 0:06
yep - my fault - was a cacheing issue - see my answer. thanks! – Bill Feb 26 '09 at 15:18

5 Answers

3

OK, figured it out. Wasn't a JSON/JavaScript issue at all but a cacheing issue. When I was developing this I must have initially tested IE7 when test-ajax.php wasn't working or was producing a different JSON structure and then I changed test-ajax.php to what I posted above and I updated my JavaScript BUT IE7 was using a cached version of what it originally received from test-ajax.php. And I tested this - if I clear the cache in IE7 it works and then if I change the values in the JSON structure (but not the structure itself) IE7 continues to use the cached JSON structure.

Solution:

I added

header("Cache-Control: no-cache, must-revalidate");
header("Expires: 0");

in my test-ajax.php page and now IE7 is checking the server properly for a newer version of test-ajax.php when it makes an AJAX call.

Thanks everyone!

link|flag
1

Try adding the following line to the end of the test-ajax.php file:

echo ';';
link|flag
Tried that and it doesn't work. I changed echo json_encode($output); to echo json_encode($output) . ';'; and it breaks it in FF as well as IE :) – Bill Feb 26 '09 at 15:04
1

I don't immediately see anything wrong, but here's some things to try

  1. Get Charles. Look at the request/response from the getJSON() call. Is the content being returned as expected? Is the status code of the response 200, or is it something else?
  2. Determine if IE knows about the json variable at all. Modify your code to try stuff like this

(Probably want to run these alerts only 1 at a time)

$.getJSON("test-ajax.php", function(json){
  alert( typeof json );
  alert( typeof json.var1 );
  alert( typeof json.var1[1] );
});
link|flag
0

Do you get the same results if you try accessing the value like this?

json["var1"][1]

... instead of this:

json.var1[1]
link|flag
0

I've run into problems when using reserved words for object literal properties. It works fine in Firefox and Safari, but bombs in IE. Here's the one that usually trips me up:

{
    class : 'my-css-class'
}

That's what I'd check for first. YMMV.

link|flag

Your Answer

get an OpenID
or
never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.