2

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?

Typhoon101
  • 1,647
  • 7
  • 24
  • 43
  • Can you post your code? – Jnatalzia Jul 16 '14 at 15:11
  • http://stackoverflow.com/questions/24168040/upload-multiple-files-with-php-and-jquery/24168617#24168617 – Alexander Ceballos Jul 16 '14 at 15:11
  • Code has now been added – Typhoon101 Jul 16 '14 at 15:38
  • 1
    Inspect the appended content - does the source match exactly where the image is stored? – tymeJV Jul 16 '14 at 15:40
  • Yes it does. As I said originally, even if I hover over the link in Firebug, the thumbnail shows. In Firefox, if I right click the image and then click "show image" the image is shown correctly in a new tab. i.e., the source is correct – Typhoon101 Jul 16 '14 at 15:42
  • 1
    FWIW, the Fiddle I mocked up to test with works as expected. http://jsfiddle.net/daveSalomon/mY4eP/2/ . Your CSS isn't setting the image to display:none; or anything like that? – Dave Salomon Jul 16 '14 at 15:54
  • @Typhoon101 I think we need to see more code. Do you have a link? – imtheman Jul 16 '14 at 15:56
  • No, unfortunately, I don't have a link. The files are all local. If what I am doing should work (and judging by the JSFiddle, it should), then there are obviously other elements that are interfering. I will strip the code back to nothing, and build it up bit by bit, seeing where it starts to break. Now I know I am not trying to do something impossible, it gives me a starting point. Thanks for all your help – Typhoon101 Jul 16 '14 at 16:14
  • Well, after several hours of debugging, I found the answer, and ironically, it has nothing to do with jQuery. Basically, I am using a cache manifest. If I remove the manifest from my html tag, the images show. Adding it back again and the images do not show. Very strange why this is happening. My manifest only contains five unrelated images (menu buttons etc). No reason I can see why this would effect the loading of images. Any ideas? – Typhoon101 Jul 16 '14 at 22:28

0 Answers0