JSON structure not working in IE7 (JavaScript)

php javascript json internet-explorer-7

13,847

Solution 1

OK, figured it out. Wasn't a JSON/JavaScript issue at all but a caching 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!

Solution 2

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

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?
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] );
});

Solution 3

The two common problems with IE and ajax are the following :

caching ( solution can be found above)
white space !! ( if your return has any white space before/after the json output, this will fail in IE 7 )

Solution 4

In IE, you have to include the json2.js library as IE has no native JSON parsing. But Firefox & Chrome has.

Solution 5

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

echo ';';

View more solutions

13,847

Author by

lyio

Updated on June 04, 2022

Comments

lyio almost 2 years
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?