Whenever I click on an element, it triggers an input dialog that allows me to upload a photo. The server then responds with a JSON OBJECT containing 4 items: NAME, TYPE, HEIGHT, WIDTH.
My goal is to refresh the element's background with the newly uploaded photo after a successful ajax upload process. Here is what I have tried so far:
JS:
$(document).ready(function() {
$("input[name!='photo_1']").parents('.fileinput-wrapper').find(".label").remove();
$("input[type=file]").on('change', function(){
$(this).parents('label').find('.fileinput-preview').css('background','url(http://localhost/project/assets/images/ajax-loader.GIF) no-repeat center center');
var selectedElement = this;
var name = $(this).attr('name').toString();
$('#upload').ajaxSubmit({
dataType:'json',
data: {name: name},
beforeSubmit: function(){
$(selectedElement).parents('label').find('input[type=file]').attr('disabled','disabled');
},
success: function(data) {
$(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/loading.png') no-repeat center center");
$.each(data, function(index, item) {
$(selectedElement).parents('label').find('.fileinput-preview').css('background', "url('http://localhost/project/uploads/" + item.NAME + "') no-repeat center center");//**replacing part**
});
$(selectedElement).parents('label').find('input[type=file]').removeAttr('disabled');
return false;
},
error: function(xhr) {
alert(xhr.responseText);
return false;
}
});
});
});
It successfully replaces the background, but the image does not load and appears blank. Any suggestions on what I should do next?