Question

i have this link which when clicked a modal dialog box will appear.

<a href="#" id="addtoteam">
    Add to Team
</a>

and this is the dialog box that will appear after the link is clicked,

$('#addtoteam').click(function(event){
      event.preventDefault();
      var url = '<?php echo BASEURL;?>';
      var teamID = '<?php echo $_SESSION['User']['Team']['id']?>';
      var playerID = $(this).attr('player-id');
      $( "#dialogbox" ).dialog({ 
        autoOpen: true,
        buttons: { 
                  "Use Registration Credits": function(){ 
                    // execute something here before redirecting it to another page, perhaps perform the updating of the registration_credits of each team here
                    window.location = url + '/administration/add_to_team/' + playerID +'/'+ teamID +'/?credit=1'; 
                  },
                  "Pay Extra Charge": function() { 
                  //$(this).dialog("close"); 
                    window.location = url + '/administration/add_to_team/' + playerID +'/'+ teamID +'/?proceed=1';
                  },
                  "Cancel": function() { $(this).dialog("close"); } 
                },
        width: 800
      });
    });

Now this is working, but it only works on the first link. You see my link is a list, for every line there is a link which looks like this,

`abc| def| ghi| Add to Teamlink`
`123| 456" 789| Add to Team link` and so on.

What bothers me is that when I click the abc| def| ghi| Add to Team link link the modal dialog box will appear but if I click any links other than the first link, the box will not appear. What seems to be the problem on my code? Thanks.

Answer 1

You’ll need to use a class name instead of an ID to select all ‘Add To Team’ links.

<a href="#" class="addtoteam">
    Add to Team
</a>

<a href="#" class="addtoteam">
    Add to Team
</a>

<a href="#" class="addtoteam">
    Add to Team
</a>

JS:

$('.addtoteam').click(function(event){
    //code
});