Use javascript variable as 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?

HTML IDs must be unique. – Dark Falcon Jun 19 '13 at 15:20 — Dark Falcon, Jun 19 '13 at 15:20

Andrew · Accepted Answer · 2013-06-19 15:52:28Z

up vote 1 down vote accepted

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');
        }
      });
    }
  }
});

edited Jun 19 '13 at 15:52

answered Jun 19 '13 at 15:25

Andrew
16.6k21110207

Well if i do it like you said theres not really reason for an id right? BUT why the "photo" variable seems to be empty there? Its a global variable but still outside the function seems empty. Is this normal behavior? I am trying doing what you say but the variable is "undefined" when i try to append. – Johny Jaz Jun 19 '13 at 15:30

... I don't know the facebook API. Is this function asynchronous? If so you need to move your render inside the call. – Andrew Jun 19 '13 at 15:31

yes it is asynchronous! But if u put the append inside the else , then the photos work well as u suggested , BUT the AlbumName is out of scope in there so is undefined :p . haha i dont understand why they are out of scope though? By my programming experience(not js!) they should be in scope.. What am i missing here? – Johny Jaz Jun 19 '13 at 15:40

Why make an array of the album names? Why not just set each one as a variable inside the loop? – Andrew Jun 19 '13 at 15:42

the arrays are used just for the code to look more understandable to other people that will see it later. Dont mind that. Why is there a problem with that? In this particular case through we have a response inside a response. Because first i use the id of the page to get the album names. And the i use the id of every album to get their cover photo link. So we have one response inside another. So i guess is mandatory to have another variable name. – Johny Jaz Jun 19 '13 at 15:44

| show 8 more comments

Pak · Answer 2 · 2013-07-02 14:54:50Z

up vote 1 down vote

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.

edited Jul 2 '13 at 14:54

answered Jun 19 '13 at 15:27

Pak
193215

add a comment |

Niet the Dark Absol · Answer 3 · 2013-06-19 15:23:06Z

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);

Iwo Kucharski · Answer 4 · 2013-06-19 15:22:11Z

up vote 0 down vote

You give the same ID to each <img>:

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

ID must be unique

answered Jun 19 '13 at 15:22

Iwo Kucharski
1,1881036

Yes you are absolutely right. I am trying to fix this now. Thank you very much for your answer – Johny Jaz Jun 19 '13 at 15:27

add a comment |

asked	2 years ago
viewed	466 times
active	1 year ago

current community

your communities

more stack exchange communities

Use javascript variable as img src

4 Answers 4

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

Use javascript variable as img src

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Related

Hot Network Questions