I am using following code in php while loop :
<tr class="odd gradeX">
<td><?php echo $blog_id; ?></td>
<td><?php echo $blog_title; ?></td>
<td><?php echo $cat_name; ?></td>
<td class="center"><img width="50" src="<?php echo SITE_URL."assets/images/blog_images/$blog_image" ?>"/></td>
<td class="center"><?php echo $uname; ?></td>
<td class="center"><?php echo $added_date; ?></td>
<td class="center"><?php echo $status; ?></td>
<td class="center"><a data-toggle="modal" class="delete" data-id="<?php echo $blog_id; ?>" data-target="#myModal" href="<?php echo AD_SITE_URL."delete.php?name=blog&blog_id=$blog_id" ?>">Delete</td>
</tr>
When I click on delete
link it's showing me a popup box with bellow code :
<form >
<div class="modal-footer">
<input type="submit" id="deletePost" class="btn btn-danger" name="submit" value="YES">
<input type="submit" class="btn btn-success" name="submit" value="NO" data-dismiss="modal">
</div>
</form>
Now when I press Yes
button it's should show me the data-id
value from the delete
link, but every time it's showing me same data-id
value. How can I get each delete
link data-id
value using jQuery ?
I am using following code :
<script>
$(document).ready(function() {
$("#deletePost").click(function() {
var id = $(".delete").attr("data-id");
alert(id);
});
});
</script>
You just need to create a hidden field in your modal and populate its value each time when user click on delete link
Here is working demo
$(function() { $(".delete").click(function() { id = $(this).data('id'); $("#myModal #post-id").val(id); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> <table class="table"> <tr> <th>Id</th> <th>Title</th> <th>Category</th> <th>Desc</th> <th></th> </tr> <tr class="odd gradeX"> <td>1</td> <td>title 1</td> <td>Category</td> <td class="center">data</td> <td class="center"><a data-toggle="modal" class="delete" data-id="1" data-target="#myModal" href="#">Delete</a> </td> </tr> <tr class="odd gradeX"> <td>2</td> <td>title 2</td> <td>Category</td> <td class="center">data</td> <td class="center"><a data-toggle="modal" class="delete" data-id="2" data-target="#myModal" href="#">Delete</a> </td> </tr> <tr class="odd gradeX"> <td>3</td> <td>title 3</td> <td>Category</td> <td class="center">data</td> <td class="center"><a data-toggle="modal" class="delete" data-id="3" data-target="#myModal" href="#">Delete</a> </td> </tr> <tr class="odd gradeX"> <td>4</td> <td>title 4</td> <td>Category</td> <td class="center">data</td> <td class="center"><a data-toggle="modal" class="delete" data-id="4" data-target="#myModal" href="#">Delete</a> </td> </tr> <table> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>Dou you want to delete</p> this is your hidden field for id <input type="text" name="id" id="post-id"> </div> <div class="modal-footer"> <input type="submit" id="deletePost" class="btn btn-danger" name="submit" value="YES"> <input type="submit" class="btn btn-success" name="submit" value="NO" data-dismiss="modal"> </div> </form> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
I hope it will help
var id;
$("#tableid tbody").on('click','.delete', function(e){
// show your modal
id = $(this).attr("data-id");
});
Every time when you click on delete button of this row then set an additional data-id attribute to submit button
$('.delete').on('click',function(){
$('[name=submit]').attr('data-id',$(this).data('id'));
})
& on close the data model you can remove that attribute, (you can repeat removing attribute function when you click submit in ajax success )
$('.close').on('click', function(){
$('[name=submit]').removeAttr('data-id'))
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.