How to pass values in a modal popup using jQuery

Question

In a table I display several links whose value (user id) is extracted from a database. By clicking on the link appears a modal pop up in which I would like to pass the selected value.

Here is the table:

<table>
    <tr>
        <td>Username</td>
        <td>Id</td>
    </tr>

<?php
    include ‘db_connection.php’;
    $sql = "SELECT * FROM users";
    $result = mysql_query($sql);
    while($row = mysql_fetch_array($result)){
?>
<tr>
    <td><?php echo $row[userID]?></td>
    <td>
        <div id='basic-modal'>
            <a href="?id=<?php echo $row[userID]?>"  class='basic'>Show</a>
        </div>
     </td>
</tr>

<?php } ?>

</table>

If I click on the link Show appears the modal pop up:

<div id="basic-modal-content">
    <?php
        if(isset($_GET[‘userID’])){
            $userID = $_GET[‘userID’];
            echo ‘UsuerID: ‘ .$userID;
        }
    ?>
</div>

This is the script I used

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();
            return false;
    });
});

Since I have little familiarity with the jQuery framework I would like to ask you how can I pass the selected value within the modal and then use it.

Answer 1

jquery allows you to use the .data() attribute

    <div id='basic-modal'>
        <a href="?id=<?php echo $row[userID]?>"  data-mydata="<?php echo $row[userID]?>" class='basic'>Show</a>
    </div>

and then u can retrieve data from 'data-mydata' attribute:

jQuery(function ($) {
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content')
              .text($(this).data('mydata'))
               .modal();
            return false;
    });
});