I am facing the issue when i check the checkbox the modal popup shows and confirm to the user do you want to check this row, when i check and select the option YES the whole row background color change, and when i uncheck the checkbox background color of table row remove but button is still check. How can i sort out this issue?
Code
.highlight {
background-color: #5bff5b !important;
}
<div class="panel panel-default no-display" >
<div class="panel-heading">
<i class="fa fa-money" aria-hidden="true"></i>
Accounting
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-responsive align-center dataTable multiple-filter no-footer" >
<thead class="transaction-table">
<tr>
<th>Statement number</th>
<th>Affiliate Code</th>
<th>Period start - end</th>
<th>Amount EUR</th>
<th>Due Date</th>
<th>Status</th>
<th class="text-center" >Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1234567</td>
<td>2020-10-10</td>
<td>32323</td>
<td>2020-10-20</td>
<td class="text-center">
<span class="label label-success">
Due
</span>
</td>
<td class="text-center">
<input type='checkbox' data-toggle="tooltip" data-original-title="Mark as settled" name='chkOrgRow'/>
<i class="fa fa-paper-plane hand send_report" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Send report"></i>
<i class="fa fa-thumb-tack hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Mark as on-hold"></i>
<i class="fa fa-history hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="On-hold history"></i>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="ModalConfirmSettled">
<div class="modal-dialog">
<div class="modal-content">
<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">Mark as settled</h4>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="buttons btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="buttons btn btn-primary" id="confirm" >Yes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<div class="modal fade" id="payout_details_modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content col-xs-12 no-gutter">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Merchant Pay-out details</h4>
</div>
<div class="modal-body">
<div class="mini-loader text-center">
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
</div>
<div class="col-xs-12" id="pay_out_details">
</div>
</div>
</div>
</div>
</div>
Javascript
$(function () {
var checkbox_one= '';
$("[name='chkOrgRow']").change(function(e) {
$('input[name=chkOrgRow]').prop('checked', false);
// console.log('clicked');
checkbox_one = $(this);
openmodal();
});
$('.buttons').on('click', function () {
var yes = $(this).text();
if (yes === 'Yes') {
// console.log('yes');
$("#ModalConfirmSettled").modal('hide');
$('input[name=chkOrgRow]').prop('checked', true);
checkbox_one.parents('tr').toggleClass('highlight');
//return true;
} else {
console.log('close');
}
});
});
function openmodal() {
$('#ModalConfirmSettled').modal('show', function (data) {
console.log('data:' + data);
});
}
That happens because in both cases you press YES on modal and this line is executed.
$('input[name=chkOrgRow]').prop('checked', true);
Change JS to this:
$(function () {
var checkbox_one= '';
$("[name='chkOrgRow']").change(function(e) {
// console.log('clicked');
checkbox_one = $(this);
openmodal();
});
$('.buttons').on('click', function () {
var yes = $(this).text();
if (yes === 'Yes') {
// console.log('yes');
$("#ModalConfirmSettled").modal('hide');
if(!$('input[name=chkOrgRow]').prop('checked')){
$('input[name=chkOrgRow]').prop('checked', false);
}else{
$('input[name=chkOrgRow]').prop('checked', true);
}
checkbox_one.parents('tr').toggleClass('highlight');
//return true;
} else {
console.log('close');
}
});
});
Please refer below code, problem is with toggle class if you selct "Yes" option if its already selected. Instead I used add/remove class, Rest of the logic is same:
$(function() {
var checkbox_one = '';
$("[name='chkOrgRow']").change(function(e) {
checkbox_one = $(this);
openmodal();
});
$('.buttons').on('click', function() {
var yes = $(this).text();
if (yes === 'Yes') {
$("#ModalConfirmSettled").modal('hide');
checkbox_one.parents('tr').toggleClass('highlight');
} else {
console.log('close');
}
$('.highlight').css("background-color") ? $('input[name=chkOrgRow]').prop('checked', true) : $('input[name=chkOrgRow]').prop('checked', false);
});
});
function openmodal() {
$('#ModalConfirmSettled').modal('show', function(data) {
console.log('data:' + data);
});
}
.highlight {
background-color: #5bff5b !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="table-wrapper" id="pay_out_page">
<div class="col-md-12">
<div class="panel panel-default no-display">
<div class="panel-heading">
<i class="fa fa-money" aria-hidden="true"></i> Accounting
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-responsive align-center dataTable multiple-filter no-footer">
<thead class="transaction-table">
<tr>
<th>Statement number</th>
<th>Affiliate Code</th>
<th>Period start - end</th>
<th>Amount EUR</th>
<th>Due Date</th>
<th>Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1234567</td>
<td>2020-10-10</td>
<td>32323</td>
<td>2020-10-20</td>
<td class="text-center">
<span class="label label-success">
Due
</span>
</td>
<td class="text-center">
<input type='checkbox' data-toggle="tooltip" data-original-title="Mark as settled" name='chkOrgRow' />
<i class="fa fa-paper-plane hand send_report" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Send report"></i>
<i class="fa fa-thumb-tack hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="Mark as on-hold"></i>
<i class="fa fa-history hand mark_as_settled" data-toggle="tooltip" title="" data-id="2121" aria-hidden="true" data-original-title="On-hold history"></i>
</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="ModalConfirmSettled">
<div class="modal-dialog">
<div class="modal-content">
<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">Mark as settled</h4>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="buttons btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="buttons btn btn-primary" id="confirm">Yes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
<div class="modal fade" id="payout_details_modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content col-xs-12 no-gutter">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Merchant Pay-out details</h4>
</div>
<div class="modal-body">
<div class="mini-loader text-center">
<i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
</div>
<div class="col-xs-12" id="pay_out_details">
</div>
</div>
</div>
</div>
</div>
I have fixed your code and create a fiddle as well:
https://jsfiddle.net/efnk0mbz/
$(function () {
var checkbox_one= '';
$("[name='chkOrgRow']").click(function(e) {
$('input[name=chkOrgRow]').prop('checked', false);
// console.log('clicked');
checkbox_one = $(this);
openmodal();
return false;
});
$('.buttons').on('click', function () {
var yes = $(this).text();
if (yes === 'Yes') {
// console.log('yes');
$("#ModalConfirmSettled").modal('hide');
if($('input[name=chkOrgRow]').prop('checked')){
$('input[name=chkOrgRow]').prop('checked', false);
}else{
$('input[name=chkOrgRow]').prop('checked', true);
}
checkbox_one.parents('tr').toggleClass('highlight');
//return true;
} else {
console.log('close');
}
});
});
function openmodal() {
$('#ModalConfirmSettled').modal('show', function (data) {
console.log('data:' + data);
});
}
Related
I'm trying to print data from my modal. The modal displays the proper value, but when I click the print button, the first data in my database appears.
Flow:
Admin Panel
Table containing the user data
Button of Modal
Modal with Print button
innerHTML for printing
I can't figure out what's wrong. Can someone help me?
<script type="text/javascript">
function printDiv(){
var divToPrint=document.getElementById('cts-card');
var newWin=window.open('','_blank','height=600,width800');
newWin.document.open();
newWin.document.write('<html><title>ISKULTrace</title><style>.card-title{font-size:20px;}</style><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){window.close();},750);
}
</script>
MODAL:
<button type="button" class="badge icon-left btn-dark" data-bs-toggle="modal"
data-bs-target="#qr<?php echo $row['u_id'];?>">
<i class="fa fa-qrcode" aria-hidden="true"></i> QR Code
</button>
<!--Dark theme Modal -->
<div class="modal fade text-left" id="qr<?php echo $row['u_id'];?>" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel150" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-dark white">
<span class="modal-title" id="myModalLabel150">Card</span>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<div id="cts-card" style="overflow: auto;" align="center">
<div class="card">
<div class="card-content">
<br>
<div class="card-body">
<table class="table table-bordered mb-0" style="width: 3.5in;border-collapse: collapse;">
<tr>
<td align="center" style="padding-top:5%;">
<img class="mx-auto d-block" src="../assets/images/logo/logo.png" alt="Logo" style="width: 70%;">
</td>
</tr>
<tr>
<td align="center">
<img class="img-fluid w-100" src="../temp/<?php echo $row['qr']; ?>.png" alt="Contact Tracing Card">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-times" aria-hidden="true"></i> Close</span>
</button>
<button type="button" class="btn btn-dark ml-1" id="print-card" data-bs-dismiss="modal" onclick="printDiv();">
<span class="d-none d-sm-block"><i class="fa fa-print" aria-hidden="true"></i> Print</span>
</button>
</div>
</div>
</div>
</div>
I have created a dynamic table by fetching data from SQL using PHP. each row has an edit button that is linked to modal. I want to pass the value from table to modal so that I can edit it.
I have tried looping trough table row and able to get the values of different columns. However, every time I clicked any edit buttons, only the last of the row is being passed on to the input on modal.
here is my markup:
Modal
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<?php foreach($categories as $category){ ?>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
<?php echo $category['categoryID']; ?>
</td>
<td class="footable-visible" id="tdCategory">
<?php echo $cakeOrdering->escape($category['category']); ?>
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
Script
<script type="text/javascript">
$(document).ready(function () {
var table = document.getElementById("main-table");
$('#main-table tr').each(function(i, row){
var $row = $(row);
var category = $row.find('td:nth-child(2)').text().trim();
console.log(category);
$('#category').val(category);
});
});
</script>
This is the output
Output
When I tried to print values into console.
Console.log
To achieve what you require you can hook to the show.bs.modal event. In the event handler you can get a reference to the button which was clicked. You can use that reference to traverse the DOM to find the related td which holds the name of the category. Finally you can set the value of the input in the modal with that category name.
As an aside I would strongly suggest you remove the id attributes from the HTML content you create in the PHP loop as id need to be unique within the DOM. Similarly, remove the inline style attributes as styling should be places within external stylesheets.
With all that said, try this:
$('#modalCategory').on('show.bs.modal', e => {
var $button = $(e.relatedTarget);
$('#category').val($button.closest('td').prev().text().trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_1
</td>
<td class="footable-visible">
Category 1
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even">
<td class="footable-visible footable-first-column">
<span class="footable-toggle"></span>
CategoryID_2
</td>
<td class="footable-visible">
Category 2
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
You are setting value of category in input box inside each loop that's the reason last value is set. Instead you can write click event on edit button so on click of this button get category name and put it inside modal input-box.
Demo code :
$(document).ready(function() {
//on click modal buton
$(".editCategory").on("click", function() {
var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name
$('#category').val(category); //set value
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<form role="form" method="POST" action="php/add_category.php">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control" name="categoryID" id="categoryID">
<label for="category">Category</label>
<input type="text" class="form-control" name="category" required id="category">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
</div>
</div>
</form>
</div>
</div>
Table
<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
<thead>
<tr>
<th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
<th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
<th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
</tr>
</thead>
<tbody>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1
</td>
<td class="footable-visible">
abc
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
<tr class="footable-even" style="">
<td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2
</td>
<td class="footable-visible">
abcd
</td>
<td class="text-right footable-visible footable-last-column">
<div class="btn-group">
<button class="btn-white btn btn-xs">Delete</button>
<!--use class here-->
<button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
in my project i have table(images). there is checkboxes column, when the user check record and press delete button record will be deleted. thats work fine.
then there is visible column(boolean) which is by default(true). So when record is checked and click hide/show button it will update visible value(from 1 to 0 or from 0 to 1)
My problem is that, delete and show/hide buttons work individually. i want both work at the same time. I don't know how combine them in the same table.
this is my view(in which only show/hide work)
<button type="submit" class="btn btn-danger" id="deleteImg"><i class="fa fa-trash"></i> Delete</button>
<form action="{{url('admin/images/hideimg')}}" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('post')}}
<div class="pull-right form-group" style="padding: 12px">
<button class="btn btn-warning" id="hideImg">
Hide/Show</button>
</div>
#if($images)
<table class="table panel panel-default" id="table">
<thead class="panel-heading">
<tr>
<th><input type="checkbox" id="options"> </th>
<th>Visible?</th>
<th>photo</th>
<th></th>
</tr>
</thead>
<tbody id="tablecontents" class="panel-body">
#foreach($images as $image)
<tr class="row1" data-id="{{ $image->id }}">
<td><input class="checkboxes" type="checkbox" id="option" name="checkBoxArray[]" value="{{$image->id}}" data-imageid="{{$image->id}}"></td>
<td>{{$image->visible == 1?'yes':'no'}}</td>
<td ><img src="/uploads/{{$image->path}}" id="img" ></td>
<td>
</td>
</tr>
#endforeach
</tbody>
</table>
#endif
</form>
form action="delete/images" method="post" class="form-inline">
{{csrf_field()}}
{{method_field('delete')}}
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" style="text-align: center" id="modalLabel">Delete Confirmation</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="text-center">Are you sure you want to delete the following service?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close</button>
<button type="submit" class="btn btn-danger" name="delete_all" value="Delete">
<span id="" class='glyphicon glyphicon-trash'></span> Delete</button>
</div>
</div>
</div>
</div>
</form>
Hi I have the same problem as this thread twitter bootstrap modal won't work on first call
I tried to follow the answer and replace $('#modal').modal('toggle') to $('#modal').modal('show'). It still only registers on the second click. (you have to click on the poster 2 times to show modal, and you have to click on 'Select' button 2 times to close it).
Here's my code: Javascript
var zipcode = 92660;
var showDate = '2018-06-10';
var selectedMovieTitles = [];
var selectedMoviePosters = [];
var selectState = false;
var tmsURL = 'http://data.tmsapi.com/v1.1/movies/showings?startDate=' + showDate + '&zip=' + zipcode + '&api_key=' + tmsAPIKey;
$('#button').on('click', function () {
getMovieList();
});
function litmitMovieSelect() {
$('#limitSelection').modal('show');
}
function selectMovie() {
$(this).on('click', function () {
$('#movieInfoModal').modal('hide');
if (selectedMovieTitles.length >= 3) {
litmitMovieSelect();
}
else {
selectState = true;
selectedMovieTitles.push($(this).attr('data-title'));
selectedMoviePosters.push($(this).attr('data-poster'));
$(`.posters[data-title='${$(this).attr('data-title')}']`).css('border', '3px solid #008000');
$(`.posters[data-title='${$(this).attr('data-title')}']`).attr('data-state-selected', selectState);
console.log('selected movie titles: ' + selectedMovieTitles);
}
});
}
function launchModal() {
$(this).on('click', function () {
selectState = false;
$(this).css('border', '');
var titleToBeRemove = $(this).attr('data-title');
if (selectedMovieTitles.indexOf(titleToBeRemove) !== -1) {
selectedMovieTitles.splice(selectedMovieTitles.indexOf(titleToBeRemove), 1);
}
$('.modal-title').text($(this).attr('data-title'));
var movieInfoDiv = $(`<div>
<p><strong>Actors:</strong> ${$(this).attr('data-actors')}</p>
<p><strong>Director:</strong> ${$(this).attr('data-director')}</p>
<p><strong>Genre:</strong> ${$(this).attr('data-genre')}</p>
<p><strong>Year:</strong> ${$(this).attr('data-year')}</p>
<p><strong>Duration:</strong> ${$(this).attr('data-runtime')}</p>
<p><strong>Rating:</strong> ${$(this).attr('data-rating')}</p>
<p><strong>Plot:</strong> ${$(this).attr('data-plot')}</p>
</div>`)
$('.modal-body').html(movieInfoDiv);
var selectButton = $(` <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-title="${$(this).attr('data-title')}" data-poster="${$(this).attr('data-poster')}">
Select
</button>`)
selectButton.on('click', selectMovie);
$('#movieInfoModalFooter').html(selectButton);
$('#movieInfoModal').modal('show');
});
}
function getMovieList() {
var movieTitles = [];
axios.get(tmsURL)
.then(function (tmsResp) {
console.log(tmsResp);
tmsResp.data.forEach(function (element) {
movieTitles.push(element.title);
});
console.log(movieTitles);
movieTitles.forEach(function (element) {
var omdbURL = 'https://omdbapi.com/?t=' + element + '&apikey={}';
axios.get(omdbURL)
.then(function (omdbResp) {
console.log(omdbResp);
var posterDiv = $(`<img class='posters m-3' id='${omdbResp.data.imdbID}'
data-title='${omdbResp.data.Title}'
data-actors='${omdbResp.data.Actors}'
data-director='${omdbResp.data.Director}'
data-genre='${omdbResp.data.Genre}'
data-plot='${omdbResp.data.Plot}'
data-year='${omdbResp.data.Year}'
data-runtime='${omdbResp.data.Runtime}'
data-rating='${omdbResp.data.imdbRating}'
data-poster='${omdbResp.data.Poster}'
src=${omdbResp.data.Poster}
>`);
posterDiv.on('click', launchModal);
$('#movie-display').append(posterDiv);
})
.catch(function (err) {
console.error(err);
});
});
}).catch(function (err) {
console.error(err);
});
}
Here's the HTML:
<div class="modal fade" id="litmitSelection" tabindex="-1" role="dialog" aria-labelledby="litmitSelection" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
Sorry, You Can Only Select Up To 3 Movies.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Movie Info Modal -->
<div class="modal fade" id="movieInfoModal" tabindex="-1" role="dialog" aria-labelledby="movieInfoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer" id="movieInfoModalFooter">
<!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<!-- <button type="button" class="btn btn-primary">Select</button> -->
</div>
</div>
</div>
</div>
Something like this would suffice.
Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs
$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
// on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); // See how its usefull right here?
/*
You now have a reference to which element caused the modal to showup , you can use this to do anything as shown below
*/
var row = el.closest(".data-row");
// get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
// fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->
I have a delete button in every row of my table. when the user clicks on the delete button, a modal will pop out prompting the user "Are you
sure you want to delete this Record?". If the user clicks yes, the row will be deleted from the table.
I tried doing
$(this).closest('tr').remove();
But it's not working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Form</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-md-12">
<table id="mytable" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>3</td>
<td>Jane</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog"
aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" id="confirmdeletebtn">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#confirmdeletebtn").click(function() {
alert("in delete btn");
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
One way would be to toggle a selected class on the row when the delete button in the row is clicked ...then remove the row with that class with the modal button
$('.deletebtn').click(function(){
// remove selected class from other rows
$('tr.selected').removeClass('selected');
// add selected class to current row
$(this).closest('tr').addClass('selected');
});
$("#confirmdeletebtn").click(function() {
$('tr.selected').remove();
});
The bootstrap modal provides the relatedTarget (the clicked element) to the shown.bs.modal and show.bs.modal events.
This way you can store the reference and use it when deleting
$(document).ready(function() {
$('#deletemodal').on('shown.bs.modal', function(e) {
// store the clicked element as data on the confirm button
$('#confirmdeletebtn').data('triggered-from', e.relatedTarget);
});
$("#confirmdeletebtn").click(function() {
// retrieve the button that triggered the action and use it
var trigger = $(this).data('triggered-from');
$(trigger).closest('tr').remove();
$('#deletemodal').modal('hide');
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-md-12">
<table id="mytable" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
<tr>
<td>3</td>
<td>Jane</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" id="confirmdeletebtn">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
</body>
The this keyword there refer to the confirmation button in the modal dialog that has nothing to do with which tr to be deleted.
First, you'll have to listen for clicks on a .deletebtn button. This function when fired should show the modal dialog and listens for the click event on the #confirmdeletebtn button. If the user clicks it then you should delete the tr that was close the the .deletebtn button that was clicked (thus a reference of it should be saved once it was clicked).
$(function(){
var clickedBtn = null;
$(".deletebtn").click(function(){
clickedBtn = this;
// show the modal dialog
});
$("#confirmdeletebtn").click(function(){
if(clickedBtn){ // make sure we have assigned a reference
$(clickedBtn).closest("tr").remove();
clickedBtn = null; // not necessary
// close the modal dialog.
}
});
// add listeners for the close and abort buttons of the modal dialog if not already handeled by bootstrap or whatever you're using.
});
enter code here
function DeleteRows() {
alert("in delete btn");
$(this).closest('li').remove();
};