I have an odd problem with JQuery. On my page, I have an empty div. On the click of a button, a JQuery AJAX process runs, pulling a list of image filenames from a database. This AJAX call returns a JSON string
In the .Done method of the AJAX call, I loop through the filenames and for each image, append an img tag to the hidden div.
The result is a load of squares with no image - exactly the same as when the image doesn't exist at the location requested. The image definitely does exist, and in fact, hovering over the link path in Firebug shows a thumbnail of the correct image. For some reason, it just doesn't display on the page.
Here is the JSON that returned
{
"response":"success",
"images":[
{
"id":"ByqYIPCuztjNIRC",
"imageName":"1405516853-IMGP4658.JPG",
"projectId":"Jbo4mudcCTlyeG0"
},
{
"id":"YwX6xJXfM6EjjSk",
"imageName":"1405517307-IMGP4651.JPG",
"projectId":"Jbo4mudcCTlyeG0"
}
]
}
... and here is the .Done method which handles the JSON
.done(function(msg)
{
// Remove any images already present
$('div.imageContainer').remove();
// Add each new image to the page, surrounded with a DIV
$.each(msg.images, function(i, item){
$('#uploadImageForm')
.after('<div class="imageContainer" id="image-' + item.id + '"><img src="/images/' + item.imageName + '" /></div>');
})
}
Can anyone help?