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.
Related
Sorry in advance if I messed up. This is my first post here and English is not my native language.
I'm writing a modal in a webapp that needs to display the move history of a product. Previously, the application receives the history through an HttpServletRequest in java.
When clicking on a button, the modal is displayed.
My problem is that I am unable to filter the list in the display.
Here is the jsp code that contains the button as well as the constraint for the filter: data-noRefALivrer="${listeProduitsFinis.refALivrer}"
...
<input type="hidden" name="inputCurrentRefALivrer">
...
<c:forEach var="listeProduitsFinis" items="${LISTPRODUITFINI}">
<tr class="trProduitFini" data-toggle="modal"
data-id="${listeProduitsFinis.detCmd}"
data-noCmd="${listeProduitsFinis.cmd}"
data-noDetCmd="${listeProduitsFinis.detCmd}"
data-noRefALivrer="${listeProduitsFinis.refALivrer}">
<td style="font-size: 18px;" class="text-center" id="detCMDID">${listeProduitsFinis.detCmd}</td>
<td style="font-size: 18px;" class="text-center">${listeProduitsFinis.refALivrer}</td>
<td style="font-size: 18px;" class="text-center">${listeProduitsFinis.location}</td>
<td>
<button class="btn btn-primary btn-lg btn-block"
style="width: 40px; height: 40px;">
<span style="font-size: 1.5em; color: white"
class="glyphicon glyphicon-time">
</span>
</button>
</td>
</tr>
</c:forEach>
...
Here is the javascript code associated with the jsp file and the modal
document.addEventListener('DOMContentLoaded', function()
{
...
$(".table").delegate('tbody tr', 'click', function(e)
{
var trToUse = $(e.target).closest('tr');
var noRefALivrer = trToUse.attr('data-noRefALivrer')
e.preventDefault();
if (e.target.tagName == 'BUTTON' || e.target.tagName == 'SPAN')
{
$("#inputCurrentRefALivrer").attr('value', noRefALivrer);
$("#titreh4").text("Historique de " + noRefALivrer);
$("#modalAfficherHistorique").modal()
}
else
{
$("#modalAfficherImage").modal()
}
});
...
}
Again "refALivrer" is the main constraint to filter the history.
Finally, here is the jsp code of the modal (in a separate file)
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div id="modalAfficherHistorique" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- modal content -->
<div class="modal-content">
<div class="modal-header" style="background-color: red">
<h4 id="titreh4" class="modal-title text-center"></h4>
</div>
<div class="modal-body text-center">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th scope="col" class="text-center">DE</th>
<th scope="col" class="text-center">À</th>
<th scope="col" class="text-center">DATE</th>
<th scope="col" class="text-center">QUI</th>
<th scope="col" class="text-center">QUOI</th>
</tr>
</thead>
<tbody>
<c:forEach var="listeHistorique" items="${LISTHISTORIQUE}">
<c:if test="${listeHistorique.refALivrer == param.inputCurrentRefALivrer}">
<tr>
<td style="font-size: 10px;" class="text-center">${listeHistorique.oldLocation}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.newLocation}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.date}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.user}</td>
<td style="font-size: 10px;" class="text-center">${listeHistorique.operation}</td>
</tr>
</c:if>
</c:forEach>
</tbody>
</table>
</div>
<div class="modal-footer" style="background-color: red">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Note that the h4 tag does indeed display the "refALivrer"
Also note that if I remove the "c:if", the history is displayed correctly, but without a filter.
TY all for your help!
I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>
Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.
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 () {...
I have implemented 2 tab datatable. However when the page first load it will show both datatable.
I cant seem to find the solution. Please help.
Below is the snippet of my code and attached an image.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#example1-tab1"
aria-controls="example1-tab1" role="tab" data-toggle="tab">Pending
Approval</a></li>
<li role="presentation"><a href="#example1-tab2"
aria-controls="example1-tab2" role="tab" data-toggle="tab">Approved</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab1">
<div class="row">
<div class="col-md-6">
<h3>Pending Approval</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-success btn-xs approve-off" type="submit"
value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}"
class="btn btn-danger btn-xs reject-off" type="submit"
value="reject">
<span class="fa fa-times"></span> Reject
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Approved</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-danger btn-xs delete-ocoff" type="submit"
value="delete">
<span class="fa fa-times"></span> Delete
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
As shows in the image, the 2 tabs appear but both the datatable appears. After selecting the tabs only 1 table shows. This just occurs when the page first load.
I have searched thoroughly on this but couldn't find any thing to resolve my problem. i have a tag on which i need to pass argument to knockout function alongside i have to show the results of bindings in a css modal so now the problem is my link is calling knockout function perfectly but my modal popup is not showing up.
here is my link
0
here is my modal dialog
<div id="openDetailModal" class="modalDialog" >
<div class="modal-dialog-xl">
<div class="modal-content">
<div class="modal-header">
<a href="#close" title="Close">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
<h4 class="modal-title">
Detail
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tblContactLog" class="table table-striped table-bordered">
<thead>
<tr>
<th width="3%">SNo.</th>
<th width="4%">Registration No</th>
<th width="8%">First Name</th>
<th width="8%">Last Name</th>
<th width="8%">Contact</th>
<th width="7%">Message Subject</th>
<th width="7%">Message Description</th>
<th width="5%">Campaign Type</th>
<th width="5%">Date</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: ContactLogList() -->
<tr>
<td width="3%" data-bind="text:$index()+1">1</td>
<td width="4%" data-bind="text:RegistrationNo">Some</td>
<td width="8%" data-bind="text: FirstName">1</td>
<td width="8%" data-bind="text: LastName">1</td>
<td width="8%" data-bind="text: Contact">Some</td>
<td width="7%" data-bind="text: MessageSubject">One</td>
<td width="7%" data-bind="text: MessageDescription">English</td>
<td width="5%" data-bind="text: CampaignType">1</td>
<td width="5%" data-bind="text: CreationDate">1</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
</div>
</div>
i tried using jquery call
$("#openDetailModal").modal('show')
it just fades my page but do not show dialog.
following is the link which explains a little of my problem. it does not work for me