Question

I’m using the following code to create divs with “random” products. The JSON data received from PHP is like this:

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

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

Code:

$.ajax({
    url: "/index.php?AjaxRequest&action=5",
    dataType: "json",
    error: function (xhr, status, errorThrown) {
        alert(errorThrown + '\n' + status + '\n' + xhr.statusText);
    },

    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="' + this.link + '" class="right_sidebar">';
                new_str += '<img class="right_sidebar_thumb" src="' + this.image + '" alt="' + this.name + '"/></a></li>';
            });
            new_str += '</ul>';
            $('#' + key).append(new_str);
        });
    }
});

The problem arises only with IE. It iterates only the first time, and fills only the first div, while all other browsers work fine.

The problem is not in duplicate div ids, and JSON is valid, and jQuery gives no errors.

Answer 1

Problem is now resolved!
Needed to turn caching to off: cache:false !
Thanks to everybody!