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.