generated buttons and making them useful for jquery - php

Question

I'm building a site which allows users to log on to it, and uses jquery to dynamically update the page to show all users who are currently on.
I want to have a button beside each users name that would let another user select that person (a game match-making service, if you will.)
Currently I'm generating the names with a combination of jquery and php.
Jquery does long polling:
function waitForMsg(){
$.ajax({
url: "tictac_code1.php",
type: 'POST',
data: 'longpoll=1',
async: true, /* If set to non-async, browser shows page as "Loading.."*/
cache: false,
timeout:10000, /* Timeout in ms */
success: function(data){ /* called when request to barge.php completes */
$('#loggedinnames').empty();
$('#loggedinnames').append(data);
setInterval(waitForMsg, 10000);
//setTimeout(
// 'waitForMsg()', /* Request next message */
// 1000 /* ..after 1 seconds */
//);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//alert("error in waitformsg.");
addmsg("error", textStatus + " (" + errorThrown + ")");
setInterval(waitForMsg, 10000);
//setTimeout(
// 'waitForMsg()', /* Try again after.. */
// "15000"); /* milliseconds (15seconds) */
}
});
};
$(document).ready(function(){
waitForMsg(); /* Start the inital request */
});
PHP does the sql queries and returns data to the jquery to be displayed.
if (isset ($_POST['longpoll'])) {
if (filter_input(INPUT_POST,'longpoll') == '1') {
$name = $_SESSION['name'];
$result = mysql_query("select name from tictac_names where logged_on='1' AND name!='$name'", $db);
$rowCheck = mysql_num_rows($result);
if ($rowCheck > '0') {
while ($row = mysql_fetch_assoc($result)){
foreach ($row as $val){
$spanid = 'sp_' . $val;
$buttonid = 'b_' . $val;
//echo "<br><span id=\"$spanid\">$val</span></br>";
//<input type ="button" id="nameButton" value ="OK"/><br>
echo "<br><span id=\"$spanid\">$val <input type =\"button\" id=\"$buttonid\" value =\"Button!\"/> </span></br>";
//echo "<br><p><span id=\"$spanid\">$val</span>Click here to play a game with this player.</p></br>";
}
}
} // end rowcheck
}
} //////////// end of the LONGPOLL if
So it successfully puts out the name and a button, but the button's ID is not unique. If I want it to be clickable, I'm sure that the ID will have to be unique, but then there will need to be additional jquery to catch the button click.
How can I make this work?
Should I take a different approach, perhaps names with radio buttons, and a single "Match us!" button?

Answer 1

An alternative to #Craig M 's answer would be to use the built in delegate features in jQuery.
$('#loggedinnames').delegate('span','click',function(){
alert($(this).text());
});
It does the same thing but you can use any selector, not just tag name, and you don't need to code all of the boiler plate delegation code.

Answer 2

You could remove the buttons, and use event delegation to figure out which username the person clicked on. Then do what you need to do with it in the click handler.
To do this, set a click handler on #loggedinnames like so:
$('#loggedinnames').click(function(e) {
if ($(e.target).is('span')) { //e.target is the element that was actually clicked.
alert($(e.target).text());
}
});
The advantage of this approach is that you only have one click handler and don't need to bind an event every time the list of logged in users changes.

Answer 3

What I usually do in this situation is to build the button in JavaScript rather than on the server. Then you can just keep a global variable that serves as a counter, increment it each time you add a button, and use that to put together your unique button ID.
I've used this approach in a lot of situations, and 90% of the time, it works every time.

Answer 4

Give all of your buttons the same class and unique ids. Write an event handler in JQuery using live() for your class where you get the id of this and use it in your code. This way the code works for ALL buttons (including new ones) and you do not have to duplicate any code.
$('#loggedinnames .button').live('click', function() {
someMethod($(this).attr('id')); //run your code here
});