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
Related
I am doing the pagination in UI side using angular14. But the issue I am facing is that if the items in a page is less than the "itemsPerPage" value then my pagination bar is moving its place. Can't I have the static pagination bar?
I am using NgxPaginationModule for the pagination.
component.html code
<div class="container mt-5">
<div *ngIf="successMsg" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{successMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">Employee Name</th>
<th scope="col">Employee Designation</th>
<th scope="col">Employee Photo</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor= 'let i of readData | paginate: { itemsPerPage: 3, currentPage: p, totalItems: total}'>
<th scope="row">{{i.id}}</th>
<td>{{i.name}}</td>
<td>{{i.des}}</td>
<td><img class="smaller" [src]= "i.image" [alt]= "i.image"> </td>
<td>
<button class="btn btn-sm btn-danger" (click)="deleteID(i.id)">
Delete
</button>
<a [routerLink]="['/create',i.id]" class= "btn btn-sm btn-primary">Update</a>
</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>
</div>
Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
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 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 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.