href javascript function call

Question

I am trying to call a function on href but its showing undefined function but the function itself is working when I call it inside album loop. Is there some other way of calling the function after appending the href? I tried using jquery onclick with the id of anchor but that doesn't work either and got no error. Any idea how I should be calling?

function getPhotosByAlbumID(albumID){
    FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
        $(photos.data).each(function(index, value){
            console.log(value.source);
        });
    });
}

FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
    $(me_album.data).each(function(index, value){                           
        FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {                     
            $('#facebook-cover').append('<li id="'+value.id+'"><a href="javascript:getPhotosByAlbumID('+value.id+');" id="album"><img src="'+picture.data.url+'" /></a></li>'); 
        });
    });
});

Error: Uncaught ReferenceError: getPhotosByAlbumID is not defined

All appended like so..

<ul id="facebook-cover">
<li id="4758611198834"><a href="javascript:getPhotosByAlbumID(4758611198834);" id="album"><img src="image-link"></a></li>   
</ul>

Search 'javascript scope'. Also watch out for duplicate IDs and it' best to attach your handler within your external JS rather than in your HTML. — ahren
– ahren, Commented Mar 21, 2013 at 10:12

ahren · Accepted Answer · 2013-03-21 10:22:48Z

1

try

var li=$('<li id="'+value.id+'"></li>');
var anchor=$('<a href="#" id="album"></a>');
anchor.click(function(){
getPhotosByAlbumID(value.id);
return false;

});
var img=$('<img src="'+picture.data.url+'" />');

anchor.append(img);
li.append(anchor);

this way your click event must work. unless there is any error inside getPhotosByAlbumID(); you can also return false from the same function

edited Mar 21, 2013 at 10:22

ahren

17k5 gold badges52 silver badges70 bronze badges

answered Mar 21, 2013 at 10:19

Sangeeta

3881 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reason · Accepted Answer · 2013-03-21 10:42:22Z

My guess would be that the js-file is not properly included in the page where the html is. One easy way of testing if this is the problem would be to just put the javascript in the same file as your links. If this solves the problem, you have an include error.

Like so:

<script type="text/javascript">
function getPhotosByAlbumID(albumID){
    FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
        $(photos.data).each(function(index, value){
            console.log(value.source);
        });
    });
}

FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
    $(me_album.data).each(function(index, value){                           
        FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {                     
            $('#facebook-cover').append('<li id="'+value.id+'"><a href="javascript:getPhotosByAlbumID('+value.id+');" id="album"><img src="'+picture.data.url+'" /></a></li>');
        });
    });
});
</script>

<ul id="facebook-cover">
<li id="4758611198834"><a href="javascript:getPhotosByAlbumID(4758611198834);" id="album"><img src="image-link"></a></li>   
</ul>

Daniel Imms · Accepted Answer · 2013-03-21 10:47:57Z

0

I notice you originally had a significant amount of indentation in your JS code. Is your getPhotosByAlbumID function within some other function perhaps? Something like this:

var module = (function () {
    ...
    function getPhotosByAlbumID(albumID){
    ...
}

If so you need to make it accessible. Here is some info on the module pattern which may be useful.

answered Mar 21, 2013 at 10:47

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Collectives™ on Stack Overflow

href javascript function call

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest