javascript 通过在锚标记中使用 data-id 属性，使用 jquery 将值传递给模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34101558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
pass value to modal popup using jquery by using data-id attribute in anchor tag
提问by Sridhar G.K
<div class="login-group">
<div class="form-group">
<table cellspacing="0" cellpadding="0" border="0" class="container">
<?php
$selectquery = "Select * from tblservices where category_id = 1";
$qry=mysqli_query($con,$selectquery);
if($qry)
{
$rowcount=mysqli_num_rows($qry);
if($rowcount>0)
{
$countI = 1;
while($obj=mysqli_fetch_array($qry))
{
if($countI==0)
{
?>
<tr>
<td class="bgimg">
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<?php echo $obj["service_name"]; ?>
</a>
</td>
<td>
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
</a>
</td>
</tr>
<?php
$countI = $countI + 1;
}
else if($countI %2 ==0)
{
?>
<!--<a href="#" data-id="<?php echo $obj["value1"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">show value</a>-->
<tr>
<td>
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
</a>
</td>
<td style="font-size:20px; text-align: center;" class="bgimg">
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<?php echo $obj["service_name"]; ?>
</a>
</td>
</tr>
<?php
$countI = $countI + 1;
}
else
{
?>
<tr>
<td style="font-size:20px; text-align: center;" class="bgimg">
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<?php echo $obj["service_name"]; ?>
</a>
</td>
<td>
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
</a>
</td>
</tr>
<?php
$countI = $countI + 1;
}
}
}
}
?>
</table>
</div>
the above code displays the values from the database, with the data-id as service id in the anchor tag
上面的代码显示了来自数据库的值，在锚标签中使用 data-id 作为服务 id
and this data-id should be displayed in the modal popup, find below
并且此数据 ID 应显示在模态弹出窗口中，请在下面找到
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
</div>
<div class="modal-body">
<input type="text" name="service_id" class="hiddenid"/>
<div class="form-group">
<table align="center">
<tr>
<td colspan="2"> <p class="white_text">Preferred slot 1</p></td>
</tr>
<tr>
<td style="padding-right: 10px;"><input type="date" id="theDate" name="slot1_dt" required> </td>
<td><input type="time" id="timePicker1" name="slot1_tm" required> </td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;"><p class="white_text">Preferred slot 2</p></td>
</tr>
<tr>
<td style="padding-right: 10px;"><input type="date" id="theTomorrow" name="slot2_dt" required> </td>
<td><input type="time" id="timePicker2" name="slot2_tm" required> </td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button>
<button type="button" class="btn btn-default" style="font-size: 14px !important;" data-dismiss="modal">Close</button></center>
</td>
</tr>
</table>
<?php
if(isset($_REQUEST["book"]))
{
if($_REQUEST["book"])
{
$service_id=$_REQUEST["service_id"];
$customer_id=$_REQUEST["cust_id"];
$slot1_dt=$_REQUEST["slot1_dt"];
$slot2_dt=$_REQUEST["slot2_dt"];
$slot1_tm=$_REQUEST["slot1_tm"];
$slot2_tm=$_REQUEST["slot2_tm"];
$slot1=$slot1_dt." ".$slot1_tm;
$slot1 = date("Y-m-d H:i:s",strtotime($slot1));
$slot2=$slot2_dt." ".$slot2_tm;
$slot2 = date("Y-m-d H:i:s",strtotime($slot2));
$insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`)
VALUES ('$customer_id','$service_id','$slot1','$slot2')";
$res=mysqli_query($con, $insertqry) or die(mysqli_error($con));
if($res)
{
echo("successful.....");
}
}
}
?>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
and the jquery used for value passing is
用于值传递的 jquery 是
<?
$(".modalLink").click(function () {
var passedID = $(this).data('id');
$('#id').val(passedID);
//modifies input in modal
$(".modal-body .hiddenid").val(passedID);});
?>
these codes are under single php file and js is stored as separate file
这些代码在单个 php 文件下，js 存储为单独的文件
and on ouput i can't able to get the data-id value to be passed
并且在输出上我无法获得要传递的数据 ID 值
the text field still remains null.
文本字段仍然为空。
anyone please help me.
任何人请帮助我。
采纳答案by Nana Partykar
Firstly, Remove href="#"with href="#myModal".
首先，删除href="#"与href="#myModal".
<a href="#" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<img src="<?php echo '../assets/img/'.$obj['service_image']; ?>" alt="" >
</a>
Secondly, this is not the way to call data-id.Remove var passedID = $(this).data('id');with var dataId=$(this).attr('data-id');Like below.
其次，这不是使用下面的 Like调用data-id.Remove的方式。var passedID = $(this).data('id');var dataId=$(this).attr('data-id');
<?
$(".modalLink").click(function () {
var passedID=$(this).attr('data-id');
.
.
?>
If it works, well and good. If not, follow my code step by step, it will work.
如果它有效，那么好。如果没有，请按照我的代码一步一步来，它会起作用。
So, i will suggest you to make one page for modal only (somepage.php). Where you pass 'dataId' in proper manner using ajax.
所以，我建议你只为模态制作一页（somepage.php）。当您通过“dataId用正确的方式” ajax。
1)Write your <a></a>tag as below. href="#myModal"is mandatory.
1)写下你的<a></a>标签如下。href="#myModal"是强制性的。
<a class="modalLink" href="#myModal" data-toggle="modal" data-id="<?php echo $obj["service_id"]; ?>">
<?php echo $obj["service_name"]; ?>
</a>
2)In footer, Place this code. (like footer.php)
2）在页脚中，放置此代码。（如footer.php）
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
3)Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script>in your JSfile.
3）通过ajax调用你的'somepage.php'（单独的页面。存在模态体的地方）。把它<script></script>放在你的JS文件中。
<script>
$('.modalLink').click(function(){
var dataId=$(this).attr('data-id');
$.ajax({url:"somepage.php?dataId="+dataId,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
4)Create somepage.php(If you want to change this page name. Change in <script></script>too. Both are related.)
4）创建somepage.php（如果要改这个页面名称，<script></script>也改进去。两者是相关的。）
somepage.php
某个页面.php
<?
// Access $dataId like this way and use any where you want in this modal.
$dataId=$_GET['dataId'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
</div>
<div class="modal-body">
<input type="text" name="service_id" class="hiddenid" value="<?echo $dataId;?>"/>
<div class="form-group">
<table align="center">
<tr>
<td colspan="2"> <p class="white_text">Preferred slot 1</p></td>
</tr>
<tr>
<td style="padding-right: 10px;"><input type="date" id="theDate" name="slot1_dt" required> </td>
<td><input type="time" id="timePicker1" name="slot1_tm" required> </td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;"><p class="white_text">Preferred slot 2</p></td>
</tr>
<tr>
<td style="padding-right: 10px;"><input type="date" id="theTomorrow" name="slot2_dt" required> </td>
<td><input type="time" id="timePicker2" name="slot2_tm" required> </td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button>
<button type="button" class="btn btn-default" style="font-size: 14px !important;" data-dismiss="modal">Close</button></center>
</td>
</tr>
</table>
<?php
if(isset($_REQUEST["book"]))
{
if($_REQUEST["book"])
{
$service_id=$_REQUEST["service_id"];
$customer_id=$_REQUEST["cust_id"];
$slot1_dt=$_REQUEST["slot1_dt"];
$slot2_dt=$_REQUEST["slot2_dt"];
$slot1_tm=$_REQUEST["slot1_tm"];
$slot2_tm=$_REQUEST["slot2_tm"];
$slot1=$slot1_dt." ".$slot1_tm;
$slot1 = date("Y-m-d H:i:s",strtotime($slot1));
$slot2=$slot2_dt." ".$slot2_tm;
$slot2 = date("Y-m-d H:i:s",strtotime($slot2));
$insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`)
VALUES ('$customer_id','$service_id','$slot1','$slot2')";
$res=mysqli_query($con, $insertqry) or die(mysqli_error($con));
if($res)
{
echo("successful.....");
}
}
}
?>
</div>
</div>
<div class="modal-footer">
</div>
Enjoy Coding.
享受编码。
UPDATED CODE(On @Sridhar'sDemand)
更新代码（根据@Sridhar 的需求）
1) Change href="#"to href="#myModal"everywhere it's present in your code for modal pop up.
1）更改href="#"到href="#myModal"无处不在它出现在你的代码的模态弹出。
<td class="bgimg">
<a href="#myModal" data-id="<?php echo $obj["service_id"]; ?>" data-toggle="modal" data-target="#myModal" class="modalLink">
<?php echo $obj["service_name"]; ?>
</a>
</td>
2) Use this code in JS.
2) 在JS 中使用此代码。
JS
JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('.modalLink').click(function(){
var ID=$(this).attr('data-id');
$.ajax({url:"NewPage.php?ID="+ID,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
3) Place this code in footer.
3) 将此代码放在页脚中。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding-top: 150px;">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
4) Create NewPage.php(If you want to change page name of this page. Please change in Point-2 <script></script>tag too. Both are related)
4) 创建NewPage.php(如果你想改变这个页面的页面名称。请也改变Point-2<script></script>标签。两者是相关的)
NewPage.php
新页面.php
Access IDthrough _GETand do whatever you want with this ID
ID通过_GET这个访问并做任何你想做的事情ID
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Choose your slot</h4>
</div>
<div class="modal-body">
<?php echo $_GET['ID'];?>
</div>
<div class="modal-footer"></div>
