CODEWITHSUNDEEP
javascriptjquery
Stefan Perju
Stefan Perju

Reputation: 298

How to assign a different ID to every auto-generated button?

I use Facebook API to get all groups from user and then another function with FQL to make a different div for each group, and assign to each div a button, which links to another page, something like:

$('.groupButton').click(function() {  
  window.location ='anotherpage.html?groupid=' + groupid;
});

But on every button it assigns the last button's groupid. I don't know where's the mistake.

The 2 functions: 

        function getGroupsIds(){
            document.getElementById('content_text').innerHTML = "";
            FB.api('/me/groups',function(resp){
                for (var i=0, l=resp.data.length; i<l; i++){ 
                getGroupInfo(resp.data[i].id);
                }
            });
        }


        function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";

                    $('.groupButton').click(function() {  
                    window.location ='pages/appviz.html?groupid=' + groupid;
                    });


                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

Upvotes: 0

Views: 1566

Answers (4)

Eather
Eather

Reputation: 49

Most probably just remove the following code from inside of loop

 $('.groupButton').click(function() {  
                window.location ='pages/appviz.html?groupid=' + groupid;
                });

And put it outside of the function function getGroupInfo(groupid), because the click function is only to done the action. Try and let us know its worked or not.

function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";
                    groupinput.id = "g"+groupid;

                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

$('.groupButton').click(function() {  
groupid = this.id;
 window.location ='pages/appviz.html?groupid=' + groupid.substr(1);
});

Try this

Upvotes: 0

Jasen
Jasen

Reputation: 14250

You are reassigning the click handler repeatedly in the for loop. This is causing the all buttons with the groupButton class to navigate to the last groupid you processed in the loop.

for (var i=0, l=resp.length; i<l; i++) {
    // this gets reassigned resp.length times
    $('.groupButton').click(function() {
        window.location ='pages/appviz.html?groupid=' + groupid;
    }
}

What you probably want is

function getGroupInfo(groupid){
    FB.api({
        method: 'fql.query',
        query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
    },
    function(resp) {
        ...
        for() { ... }

        groupdiv.appendChild(groupinput);
        content_text.appendChild(groupdiv);

        // assign click handler after building the elements
        $('.groupButton').click(function() {
            window.location = 'pages/appviz.html?groupid=' + this.id;
        });
    }

The $('.groupButton') is the set of all elements with the groupButton class (see Class Selector). So you need this.id to get the id of the instance of button you clicked.

Upvotes: 0

Stefan Perju
Stefan Perju

Reputation: 298

Well, i used javascript, and it worked.

 groupinput.onclick = function(){ window.location.replace('pages/appviz.html?groupid=' + groupid);};

Upvotes: 0

Eather
Eather

Reputation: 49

From where you get the groupid? It is not clear. You can assign the groupid in the button as id. Then get the value when you click the button.

$('.groupButton').click(function() {
groupid = this.id;
window.location ='anotherpage.html?groupid=' + groupid;
});

And the input will be like

<input type='button' id='1' value='Profile' class='groupButton' />

Hope this will help you.

Upvotes: 1

Related Questions