Delete row from table after button clicked - javascript

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();
};

Related

how to pass value from dynamic table to bootstrap modal

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>

How to Uncheck checkbox when i choose YES option from modal?

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);
});
}

update and delete in the same 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>

Multi-tabbed page with multiple modals (bootstrap)

I am trying to create a page that has multiple tabs. In each tab, there is a table and on each row there is a button that opens up a modal. My code works fine as long as only one of my tabs have a modal. However, once I have 2 tabs or more with modals, the content of both tabs will show up on one page, instead of being separated into separate tabs.
Here is my code:
edit-profile.ejs:
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<% include ./partials/edit-profile/_edit1%>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<% include ./partials/edit-profile/_edit2%>
</div>
</div>
<center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>
In my _edit1.ejs partial, I have:
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit1-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>
In _edit2.ejs, I have similar content:
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>
Can anybody help me figure out why my tables are showing up on the same page when both tabs have modals? The modals have different IDs.

Here, it's working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs tabs-left">
<li class="active">Edit 1</li>
<li>Edit 2</li>
</ul>
<!-- Tab content -->
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<div id="edit1-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td>user1#test.com</td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> Microsoft</td>
<td> User 2</td>
<td>user2#test.com</td>
<td>Address2</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="edit2-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button>
</center>
</div>
</body>
</html>

Html & Angular : why doesn't my variable update?

I've got some global variables in my html code responsible for showing and / or hiding a new table entry field and an edit table entry field. For some reasons, each time I try to show or hide one of those fields using the buttons in my table, it doesn't work.
Here's my code:
<!--Page HTML du module News du dashboard.-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
<meta charset="UTF-8">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
Ajouter une annonce
<span class="glyphicon glyphicon-new-window"></span>
</button>
<br>
<br>
<table class="table table-striped table-responsive table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="col-md-1 text-center">
<span class="glyphicon glyphicon-pushpin"></span>
</th>
<th class="col-md-7">News</th>
<th class="col-md-1">Auteur</th>
<th class="col-md-1">Date</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td class="text-center">
<b> {{x.pinned}} </b>
</td>
<td>
<b>{{x.title}}</b>
<button type="button" class="btn btn-default pull-right" ng-click="body = !body">
<span class="fa fa-chevron-up" ng-show="body"></span>
<span class="fa fa-chevron-down" ng-hide="body"></span>
</button>
<div class="check-element animate-hide" ng-show="body">
<p>{{x.body}}</p>
</div>
</td>
<td>
{{x.author}}
</td>
<td>
{{x.date}}
</td>
<td>
<div class="text-center">
<button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<div class="page-header">
<h3>Nouvelle news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="checkbox">
<label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="add = !add">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="newEntry()">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
<div ng-show="updt">
<div class="page-header">
<h3>Editer une news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="updt = !updt">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./controller.js"></script>
</body>
</html>
For instance, when I click on the first button (Ajouter une annonce), my "add" and "updt" div fields are shown or hidden accordingly. Same when I use the cancel button in those divs. But the button each table row:
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
doesn't seem to update my "add" and "updt" variables. And I know that my function prepareUpdt is called, so I know that ng-click is reached.
Where's the problem ?

This is due to a scoping issue with ng-repeat. More information is here.
Basically, add and updt do not exist in the outer scope (outside of the ng-repeat scope), and therefore their values never change when you click the button in the table.
To resolve, I suggest that you change each definition (line ~11, 55) of
ng-click="add = !add; updt = false"
to
ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"
And
<div ng-show="add">
to
<div ng-show="viewObj.add">
..and..
<div ng-show="updt">
to
<div ng-show="viewObj.updt">
Also,
~77 to:
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
and
~95 to:
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">
You also have a line around ~36 ng-click="body = !body". Since you are using that within the ng-repeat scope, you should be fine, however, bear in mind that will not be available outside of ng-repeat.

You shouldn't put this logic in your view. You should declare the variables in your controller and change them in your controller inside the function prepareUpdt(). This way angular will double bind these variables and update your view upon changes.
vm.updt = true;
vm.add = true;
function prepareUpdt() {
// your other code
vm.updt = !vm.updt;
vm.add = false;
}
and in your html:
<div ng-show="vm.add">
...
<div ng-show="vm.updt">

Categories