I already asked this question yesterday but I think I didn't explain my problem good. So I was trying to delete a table row if the return button is clicked but I also want to make sure that the click wasn't an accident so there should be a modal popup which asks again and if you click yes then the modal should close and the row should get removed. My problem is that the second click function which should get triggered in the modal if you click yes is not getting triggered.
Here is my code snippet:
$(document).ready(function() {
var rowToDelete;
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus');
});
$('#booked').click(function() {
$('.ret').click(function() {
var id = $(this).val();
alert(id); //to test if this function gets triggered
$('#myModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
})
});
$('#booked').addClass('active'); //not necessary
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on("click", '#myModal .delBtn', function() {
var rowId = $(this).data('row-id');
alert("you removed" + rowId); //this alert never appears so this function is not getting triggered
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="booked">
<div class="row scrollableBooked">
<div class="table-responsive">
<table class='table table-bordered' id='bookedtable'>
<thead>
<tr>
<th colspan='6' class='bookedHeader'>Booking for: example booking</th>
</tr>
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>Info</th>
<th>Return</th>
</tr>
</thead>
<tbody>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 12)</td>
<td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 25)</td>
<td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 64)</td>
<td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 34)</td>
<td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
This is a test.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn">Yes</button>
</div>
</div>
</div>
</div>
</div>
</body>
There were two issues with your code:
The modal that you were calling was myModal whereas it should be deleteModal.
You were binding the click function on the class ret inside the click of the #booked div.
Below is the changed code snippet of your code:
$(document).ready(function() {
var rowToDelete;
$('#deleteModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus');
});
$('.ret').click(function() {
var id = $(this).val();
alert(id); //to test if this function gets triggered
$('#deleteModal .delBtn').data('row-id', id); //set data id
rowToDelete = $(this).closest('tr'); //store row in variable
});
$('#booked').addClass('active'); //not necessary
$('#book').removeClass('active');
$('#admin').removeClass('active');
});
$(document).on("click", '#deleteModal .delBtn', function() {
var rowId = $(this).data('row-id');
alert("you removed" + rowId); //this alert never appears so this function is not getting triggered
});
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="booked">
<div class="row scrollableBooked">
<div class="table-responsive">
<table class='table table-bordered' id='bookedtable'>
<thead>
<tr>
<th colspan='6' class='bookedHeader'>Booking for: example booking</th>
</tr>
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>Info</th>
<th>Return</th>
</tr>
</thead>
<tbody>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 12)</td>
<td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 25)</td>
<td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 64)</td>
<td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
<tr>
<td>Device 1</td>
<td>12345 </td>
<td>lorem ipsum (id 34)</td>
<td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<p><b> Are you sure you want to return this device? </b></p>
This is a test.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</div>
</body>
Alright. You issue is #myModal. The modal you are trying to select is #deleteModal. There are 2 places that you use #myModal. Change them to #deleteModal and you are good to go.
The click event is not firing because the element id 'myModal' does not exist. If you replace myModal with deleteModal, the alert will pop up.
$(document).on("click", '#deleteModal .delBtn', function () {...
Related
I have some JSON data that contains four sections, and I want my html div to be cloned depending on how many sections there are. So if I have 100 sections in my JSON, the div should be cloned 100 times.
My div is getting cloned and the JSON data is getting appended to each one, but the problem is that the divs are getting cloned more than once. The first JSON section gets cloned 4x, the second one 3x, the third one 2x, etc. There's a pattern here but I'm not sure why it's happening.
JSON
JS snippet:
import $ from 'jquery';
import jsonData from "./test.json";
let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");
onlyTitles.forEach(title => {
let $clonedDiv = $("#template").clone();
$clonedDiv.removeAttr("id");
$clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
$clonedDiv.find("#filledRowBody").removeAttr("id");
$("#titleBody").append($clonedDiv);
})
HTML snippet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">
<h3 id="display-form-job-title"></h3>
<div class="button-group">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>
<!-- Button trigger PDF -->
<button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
</div>
<hr>
<h4>Hiring Goals:</h4>
<div class="col-12">
<table class="table order-list" id="hiring-goals-table">
<thead>
<tr>
<td>Number of Hires</td>
</tr>
</thead>
<tbody class="tbody-hire">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h4>Open Searches:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td>Role</td>
<td>Location</td>
<td>Active</td>
</tr>
</thead>
<tbody class="tbody-search">
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h4>Roles Filled:</h4>
<div class="col-12">
<table class="table order-list" id="role-table">
<thead>
<tr>
<td class="thead-emp">Name</td>
<td class="thead-role-fill">Role</td>
<td class="thead-loc-fill">Location</td>
<td class="thead-act-fill">Active</td>
</tr>
</thead>
<tbody>
<tr id="filledRowBody">
</tr>
</tbody>
</table>
</div>
</div>
<div id="titleBody">
</div> <!-- col-6 -->
It turned out that #titleBody was inside of the col-6 div which somehow led to the duplications.
So i'm trying to make a pagination style section where the user can change the table information. I can make already that when i press "2" the second table appears and when i click "1" or "<" it returns to the first table. The problem i have is that both tables appear on the page when i start it for the first time and when i use the pagination it only show a single table.
I tried to put on the CSS code the property display: none and it worked but eventually when i click on the "2" button it doesn't appear.
This is the code i have atm:
<div class="col-sm-8">
<div class="col-sm-8c col-md-12 bg-light">
<div class="col-sm-8 col-md-12">
<div id="tabla1" class="tabcontent">
<div class="table-responsive my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mariana</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Evelyn</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Sebastian</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<div id="tabla2" class="tabcontent">
<div class="table-responsive2 my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
And the code for the buttons is this one:
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'tabla1')"><</button>
<button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button>
<button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button>
<button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">4</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">></button>
</div>
And the javascript code:
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
Any way i can make that when i click in the "2" button only the second table appears? This is what it shows on the page when i click the "2" button.
Add the following code to hide all the tables except the first on page load:
document.querySelectorAll(".tabcontent").forEach(function(table, i){
if(i >= 1){
table.style.display = "none";
}
});
Working Code Snippet:
document.querySelectorAll(".tabcontent").forEach(function(table, i){
if(i >= 1){
table.style.display = "none";
}
});
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
<div class="col-sm-8">
<div class="col-sm-8c col-md-12 bg-light">
<div class="col-sm-8 col-md-12">
<div id="tabla1" class="tabcontent">
<div class="table-responsive my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mariana</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Evelyn</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Sebastian</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<div id="tabla2" class="tabcontent">
<div class="table-responsive2 my-3">
<table class="table table table-striped table-hover my-2" style="background-color: #f5f6fa">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Faculty</th>
<th></th>
<th>Progress of<br>donations</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
</div>
</th>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
</div>
</th>
</tr>
<tr>
<td>3</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
</th>
</tr>
<tr>
<td>4</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
</th>
</tr>
<tr>
<td>5</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
</div>
</th>
</tr>
<tr>
<td>6</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</th>
</tr>
<tr>
<td>7</td>
<td>Mary</td>
<td>FCQI</td>
<td>
<center>
<button type="button" class="btn btn-primary btn-sm">Donar</button>
</center>
</td>
<th>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:37%"></div>
</div>
</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<div class="tab" >
<button class="tablinks" onclick="openCity(event, 'tabla1')"><</button>
<button class="tablinks2" onclick="openCity(event, 'tabla1')">1</button>
<button class="tablinks3" onclick="openCity(event, 'tabla2')">2</button>
<button class="tablinks4" onclick="openCity(event, 'tabla2')">3</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">4</button>
<button class="tablinks" onclick="openCity(event, 'tabla2')">></button>
</div>
I have a table inside Bootstrap Modal,work well but i want a tab key to navigate table row, that also work but not like i want, it gose on 1st tab to table body then table heading and then table body and i want like table and the table body.
below my code please help me.
$(document).ready(function() {
$('#reservationTable1').DataTable({
// "ajax": "arrays.txt",
//fixedHeader: true,
scrollY: 300,
//scrollX: false,
"bFilter": false,
paging: false,
});
});
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="width:768px;">
<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>
</div>
<form class="form">
<div class="form-group">
<label for="jquery-search-sample">Search</label>
<input type="text" class="form-control" id="jquery-search-sample" />
</div>
</form>
<div class="modal-body" style="height:500px;overflow: auto;">
<div class="container1">
<section class="">
<div class="container" style="padding:0px;">
<table id="reservationTable1" class="table table-striped table-bordered">
<thead style="border-bottom:1px solid #eee;">
<tr style="background-color :red;">
<th style="padding:10px 37px!important;">
Col1
</th>
<th style="padding:10px 37px!important;">
Col2
</th>
<th style="padding:10px 37px!important;">
Col3
</th>
</tr>
</thead>
<tbody id="reservationTlbBody1" tabindex='0'>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
You can use the tabindex=... attribute, it allows you to specify which order things are focused.
You could alternatively create JS code to catch the tab, and process it.
My HTML code is like this :
<form action="form2_action.php" method="post">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My Javascript code is like this :
$('#submit').on('click',function(e){
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
Demo is like this : http://jsfiddle.net/oscar11/xxx03c6z/
How to call action from modal bootstrap?
So, when clicking on the button "save changes" in the modal bootstrap, How to keep the system to call the action form2_action.php ?
Thank you very much
Give your form an id for referencing in the javaScript code.
<form id="form1">
Then define a function as below:
function formSubmit(){
$('#form1').submit();
}
Call formSubmit on click of Save button.
<button type="button" onClick="formSubmit();" class="btn btn-primary">
Form Submit
$("#modal-submit-btn").click(function(){
$('modal-dialog-id').modal('hide');
$('#form-id').submit();
});
check my script it is working fine.. just put the form tag in bootstrap mode and take values from input to bootstap model. here is the fiddle, you can check: https://jsfiddle.net/kriz1439/v5wpwcv9/
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required> </td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button type="button" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm-save">Submit</button></td>
</tr>
</table>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action ="action.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" > <input type="text" id ="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" > <input type="text" id ="last_name_modal"> </td>
</tr>
<tr>
<td>Age</td>
<td height="40"> <input type="text" id ="age_modal"> </td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<input type="submit" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
<script>
$('#submit').on('click',function(e){
document.getElementById("first_name_modal").value = document.getElementById("first_name").value;
document.getElementById("last_name_modal").value= document.getElementById("last_name").value;
document.getElementById("age_modal").value = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
</script>
Demo is like this : http://jsfiddle.net/oscar11/u4ynjkwa/2/
My html code is like this :
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit" data-toggle="modal" data-target="#confirm-save"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My javascript code is like this :
$(document).on("click", "#submit", function () {
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
});
How to display html required before calling Bootstrap Modal?
Html required is like this :
So, Before calling Bootstrap Modal, the system display html required first if the data is empty
Thank you very much
First of all, you have to remove modal data attributes data-toggle="modal" data-target="#confirm-save" from submit button, otherwise modal will instantly open when click on submit button,
You can validate the inputs and if all valid, trigger the modal with JavaScript
$("#confirm-save").modal("show");
Example Code
$(document).on("click", "#submit", function() {
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var age_modal = $("#age").val();
if (first_name == "") {
alert("FirstName Required");
return false;
} else if(last_name=="") {
alert("LastName Required");
return false;
} else if(age_modal=="") {
alert("Age Required");
return false;
} else {
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name);
$('#last_name_modal').text(last_name);
$('#age_modal').text(age_modal);
}
});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<div class="row">
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td>
<input type="text" id="first_name" required>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td>
<input type="text" id="last_name" required>
</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td>
<input type="text" id="age" required>
</td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td><input type="submit" value="Submit" id="submit"></td> -->
<td>
<input type="submit" value="Submit" id="submit" class="btn">
</td>
</tr>
</table>
</form>
</div>
<div class="modal fade hide" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
Fiddle