Jquery ajax json data is not handled correctly by IE(6~9) :(

I would be thankful for any help!

I'm using the following code to create areas with "random" products. The JSON data received from php开发者_如何学Go-script is like this:

{"New":[{"product_id":"50",...},...],
"Best":[{"product_id":"26",...},...],
...}

"New" products must go to <div id="New">, and so on.

Problem 1: Although it works fine with all fine browsers, IE(6~9) leaves all divs empty.

Problem 2: I would like to have this ajax-JSON data to be cached by the client. As can be seen in FireBug, these requests are not cached. Do I have to resort to plug-ins?

 $.ajax({
    url: "/index.php?AjaxRequest&action=5",
    dataType: "json",
    success: function(data){
    $.each(data, function(key, value) { 
    var new_str ='<ul>';
    $(value.sort(function() {return 0.5 - Math.random()}).slice(0,3)).each(function(){
    new_str+='<li><a href="#" class="right_sidebar" onclick="location.href=\''+this.link+'\'">';
    new_str+= '<img class="right_sidebar_thumb" src="'+this.image+'" alt="'+this.name+'"/></a></li>';
    });
    new_str+='</ul>';
        $('#'+key).append(new_str);
    });
    }});

Check that the last item in the JSON object does not have a comma after it. I know this can break IE as it can't handle there being an empty item

I don't know if this is your problem but when I work with JSON I very often have problems with the structure of my JSON. To help find the problem I use an online JSON validator which I find very good: http://jsonlint.com/

Jquery expects there to be only one element with a given id. Try switching to

<div class=’new-product’/>

and match with

$('.new-product')

as for catching, try using the error method

$.ajax({
  error: function(){
  }
});

Finally found the solution! It turns out IE was caching jquery requests. Adding cache: false resolved the problem. Down with IE!