Дублирование Ajax запроса
 

Столкнулся с проблемой, что был продублирован ajax запрос. Идея следующая. При клике на элемент на странице подгрузить новые элементы с сервера в json формате, к тому же каждый элемент содержит изображение, его мы то же подгружаем через ajax. Так вот, не понятно по чему запрос на получение последнего изображения дублируются. Так же не получается не получается нормально настроить анимацию вывода.

Код выглядит следующим образом:

$(function () {
            'use strict';

            var getItems = $('#getItems');

            getItems.click(uploadItems);

            var page = 1;
            function uploadItems() {
                $.ajax({
                    type: 'GET',
                    url: '/Home/GetProductDetailsAjax?page=' + page,
                    success: updateResult
                });
            }

            function updateResult(vm) {
                page++;
                var target = $('#result');
                for (var i = 0; i < vm.length; i++) {
                    target.append(
                    '<li>' +
                        '<a href="details.html"><img id="'+ vm[i].productId +'" class="img-responsive" /></a>' +
                        '<div class="special-info grid_1 simpleCart_shelfItem">' +
                            '<h5>'+ vm[i].name +'</h5>' +
                            '<div class="item_add"><span class="item_price"><h6>ONLY $' + vm[i].price + '</h6></span></div>' +
                            '<div class="item_add"><span class="item_price"><a href="#">add to cart</a></span></div>' +
                        '</div>' +
                    '</li>'
                    );

                    getImage(vm[i].productId);
                }

            }

            function getImage(productId) {
                var imageUrl = '/Photo/RenderImage?imageId=' + productId;
                $.ajax({
                    type: 'GET',
                    url: imageUrl,
                    processData: false,
                    success: function () {
                        $('#' + productId).attr('src', imageUrl).fadeIn();
                    }
                })
            }
})();

unsafePtr,
в строке 47 что?

Прошу прощения, когда копировал, пропустил первую строчку, поправил.

unsafePtr,
теоретически все картинки должно дублировать строки 41 и 44 ...

Почему? Мы же должны как то подгрузить наши изображения, или есть более универсальный способ? Не совсем понял в чём именно проблема, я совсем начинающий в jQuery.

а зачем?

function updateResult(vm) {
                page++;
                var target = $('#result');
                for (var i = 0; i < vm.length; i++) {
                    var imageUrl = '/Photo/RenderImage?imageId=' + vm[i].productId;
                    target.append(
                    '<li>' +
                        '<a href="details.html"><img id="'+ vm[i].productId +'" class="img-responsive" src="'+imageUrl+'"/></a>' +
                        '<div class="special-info grid_1 simpleCart_shelfItem">' +
                            '<h5>'+ vm[i].name +'</h5>' +
                            '<div class="item_add"><span class="item_price"><h6>ONLY $' + vm[i].price + '</h6></span></div>' +
                            '<div class="item_add"><span class="item_price"><a href="#">add to cart</a></span></div>' +
                        '</div>' +
                    '</li>'
                    );


                }

            }

Спасибо, а что на счёт анимации? Как в данном случае с ней быть? Создать массив и подождать пока все элементы загрузятся, а потом по одному с задержкой отобразить? Есть ли у Вас рабочий пример?

unsafePtr,
добавьте в строку 19

$('.img-responsive').fadeIn();

Мистика какая-то, если уж мы делаем только один ajax запрос, то откуда тогда:

Ajax запрос на странице у меня только в одном месте, больше нигде это фото получить не пытаюсь.
Я имею ввиду отдельный GET запрос на получение нашего изображения

unsafePtr,
а как иначе получить изображение если не запрашивать сервер ???