[英]How to create a popup window via href link for each row after calling database
目前我有一个表显示SQL数据库中的各个列，包括计数。 我正在尝试创建一些允许用户单击它的内容，并出现一个带有该历史记录的弹出框（也来自数据库）。
我尝试了几件事。 我试图对我的另一个php文件做一个href。 在正确加载数据的同时，它打开了一个新的网页，这是我不想要的。
我目前的代码是尝试使用javascript / jquery做一个弹出框。 但这总是表现出来，也搞砸了桌子。
一些代码已被删除
#Original SQL database call is in this line
echo('<table class="odds_table">');
echo('<thead>');
echo('<tr>');
echo('<th>Date</th>');
echo('<th>Teams</th>');
echo('<th>WagerCount</th>');
echo('</tr>');
echo('</thead>');
echo('<tbody>');
while ( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) {
echo('<tr>');
echo('<td rowspan="2">'.substr($row['GameDateTime'],0,10).'<br/>'.substr($row['GameDateTime'],11,8).'</td>');
echo('<td>'.$row['VisitorTeamID'].'</td>');
echo('<td rowspan="2"><a class="wagerhistory" href="#">'.intval($row['WagerCount']).'</a></td>');
echo('<div class="wagerhistorytable" title="Wager History for '.$row['VisitorTeamID'].' @ '.$row['HomeTeamID'].'">');
# This is where I do another database call to get the history
echo('<table><thead><tr><th>Wagers</th><th>Time</th></tr></thead><tbody>');
while ( $row = $wager_history->fetch(PDO::FETCH_ASSOC) ) {
echo('<tr>');
echo('<td>');
echo($row['Wagers']);
echo('</td>');
echo('<td>');
echo(date('Y-m-d H:i:s',$row['date_timestamp']/1000));
echo('</td>');
echo('</tr>');
}
echo('</tbody></table>');
echo('<td>'.$row['HomeTeamID'].'</td>');
echo('</tr>');
}
echo('</table>');
然后是我的javascript文件
<script>
$(".wagerhistory").click(function(event) {
$(this).parent().parent().children(".wagerhistorytable").dialog({
close: function( event, ui ) {
$('.wagerhistorytable').dialog('destroy');
}
});
});
</script>
首先在<a></a>标签中创建anchor Tag并创建一个类openModal 。 在<script></script>使用此类来获取data-id值
<?php
$id = $row['admin_id']; ?>
<tr>
<td>
<a class="btn openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>"></a>
</td>
</tr>
?>
将此代码放在下面的同一页面中。
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
JS（data-id = ..在这里传递。）
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({
url:"ajax_modal.php?id="+id,
cache:false,
success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php （在同一目录下创建一个页面ajax_modal.php。如果您要更改此页面名称。也可以更改标记。两者都是相关的。）
<?php
// Get `id` from `<script></script>`
$id = $_GET['id'];
$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn));
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
//echo your php output you want
</div>
</div>
如果repl发生了什么，这里是一个更清晰的代码版本：
<html>
<head>
<!-- include the bootstrap cdn links. 1 for CSS, 3 for JS. -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
/* cursor class because 'javascript:void(0)' and '#' in a link that
does not direct me anywhere kinda bothers me. */
.cursor {
cursor: pointer;
}
</style>
</head>
<body>
<?php
# i assigned the following variable to simulate the amount of rows you have.
$totalRowCount = 7;
$i = 0;
while ($i < $totalRowCount) {
/* modal and trigger (buttons/links) are thrown inside the while loop.
notice the iterator is appended to the data-target's id as well as the
id for the modal being called. so if you use your $row['id'] in place
of the $i, you can call each game's info separately. */
?>
<!-- Modal Trigger -->
<a class="text-primary cursor" data-toggle="modal" data-target="#exampleModal<?=$i;?>">
Row <?=$i;?> Info
</a>
<br />
<br />
<!-- Modal -->
<div class="modal fade" id="exampleModal<?=$i;?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Game <?=$i;?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php
/* replace 'data for game $i' with your $row['data'], or whatever
info is going to populate the modals. */ ?>
Data for Game <?=$i;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
$i++;
} #end while ($i < $totalRowCount)
?>
</body>
</html>
硒问题，打开弹出窗口时关闭主窗口。 如何从此链接获取href？
[英]Problem with selenium, closing the main window when opening the popup. How get href from this link?
如何通过window.location.href传递类和数据弹出参数
[英]how to pass class and data-popup parameters via window.location.href
如何使用tampermonkey将特定的onclick弹出链接转换为直接链接href？
[英]How to convert a specific onclick popup link to direct link href with tampermonkey?
如何从javaScript中的url（href链接）获取php变量，并在鼠标悬停时使用传递的php数据生成一个小的弹出窗口
[英]How to get php variable from url (href link) in javaScript and generate a small popup window on mouseover with passed php data
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.