如何使用jQuery在模式弹出窗口中传递值

时间:2014-05-06 12:08:58

标签: php jquery mysql

在表格中,我显示了几个从数据库中提取其值(用户ID)的链接。通过单击链接会出现一个模式弹出窗口,我想在其中传递所选值。

这是表格:

<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>

如果我点击链接显示弹出模式:

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

这是我用过的脚本

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

由于我对jQuery框架不太熟悉,我想问你如何在模态中传递选定的值然后使用它。

1 个答案:

答案 0 :(得分:1)

jquery允许您使用.data()属性

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

然后你可以从'data-mydata'属性中检索数据:

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