Столкнулся с проблемой, что был продублирован 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();
}
})
}
})();
