使用javascript变量作为img src

Question

I am using the facebook Api to get some album names and their cover photos. From this names and photos i am trying to create a jquery Mobile page that presents them in a list.

Some of my javascript code looks like this :

// Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        albumName[i] = response.data[i].name;
                        albumCover[i] = response.data[i].cover_photo;
                        albumId[i] = response.data[i].id;

                        FB.api( albumCover[i], function(response) {
                            if(!response || response.error) {
                                // render error
                                alert("Noo!!");
                            } else {
                               // render photos
                               document.getElementById('coverPhoto').src = response.picture;
                            }
                        });


                        $("ul").append('<li>'+
                        '<a href="testFile.HTML" data-transition="slidedown">'+
                          '<img src= "nothing.jpg" id = "coverPhoto" />'+
                          '<h2>' + albumName[i] + '</h2>'+
                          '<p> Test Paragraph</p>'+
                        '</a>'+
                         '</li>')
                     .listview('refresh');

                    }
                }
            });

Array AlbumName[] has the names of the albums , and repsonse.picture has the cover picture of every album.

As you can see in then i dynamically create a listView with the names and the pictures i get from the call. However THIS is the result . The names of the albums are all ok , but the photos are messed up. On the "network" tab i see that i get all the cover photos from the albums. But it seems that i overwrite the cover photo only in the first cell of the listView. Why though?

Answer 1

As it was said id must be unique you should specify a class for each element instead, with jQuery it must looks like this :

$( ".coverPhoto" ).each(function( index ) {
       this.src = response.picture;
   );
});

Where coverPhoto is your class.

Answer 2

You give the same ID to each <img> :

<img src= "nothing.jpg" id = "coverPhoto" />

ID must be unique

Answer 3

As stated by Dark Falcon, IDs MUST be unique.

Try something along these lines:

...
'<img src="nothing.jpg" id="coverPhoto'+i+'" />'+
...

And in your loading code:

(function(i) {
    FB.api( albumCover[i], function(response) {
        if(!response || response.error) {
            // render error
            alert("Noo!!");
        } else {
            // render photos
            document.getElementById('coverPhoto'+i).src = response.picture;
        }
    });
})(i);

Answer 4

The issue is the way you're rendering your photos. You are selecting element by ID but all the elements have the same ID. Each element should have a unique ID or else your selector won't work.

You should render the photo into your template instead of rendering the template and then replacing the src of the image. Maybe something like this:

// Additional initialization code such as adding Event Listeners goes here

var albums; // a place to get album info outside this function

FB.api('593959083958735/albums', function(response) {
  if(!response || response.error) {
    // render error
    alert("Noo!!");
  } else {
    // render photos
    for(i=0; i<response.data.length; i++){
      albums[albumID] = response.data[i] // for accessing the album info eslewhere

      var albumName = response.data[i].name;
      var albumCover = response.data[i].cover_photo;
      var albumID = response.data[i].id;

      FB.api( albumCover, function(response) {
        if(!response || response.error) {
          // render error
          alert("Noo!!");
        } else {
          // render photos
          $("ul").append('<li>'+
            '<a href="testFile.HTML" data-transition="slidedown">'+
            '<img src="'+response.picture+'" id="coverPhoto-'+albumID+'" />'+
            '<h2>'+albumName+'</h2>'+
            '<p>Test Paragraph</p>'+
            '</a>'+
            '</li>')
          .listview('refresh');
        }
      });
    }
  }
});