Not sure where I've gone wrong, here's the issue:
Here's my code:
<?php
require 'config.php';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Vendor list - VendorBase Pro</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
<!-- Bootstrap core CSS -->
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css?v=1.4.0" rel="stylesheet"/>
<link href="DataTables/DataTables-1.10.20/css/jQuery.dataTables.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<style>
td.details-control {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
td {
overflow:hidden;
table-layout: fixed;
max-width: 500px;
overflow-wrap:break-word;
}
</style>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="assets/img/sidebar-5.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text">
VendorBase Pro
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.php">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
<li class="active">
<a href="table.php">
<i class="pe-7s-note2"></i>
<p>Vendor List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="pe-7s-news-paper"></i>
<p>Reports</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="pe-7s-science"></i>
<p>Settings</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="pe-7s-rocket"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vendor List</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
<p class="hidden-lg hidden-md">Dashboard</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret hidden-sm hidden-xs"></b>
<span class="notification hidden-sm hidden-xs">5</span>
<p class="hidden-lg hidden-md">
5 Notifications
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
<p class="hidden-lg hidden-md">Search</p>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
<p>Account</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<p>
Dropdown
<b class="caret"></b>
</p>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="#">
<p>Log out</p>
</a>
</li>
<li class="separator hidden-lg hidden-md"></li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Vendor Database</h4><br>
<table id='tblVendor' class='display cell-border compact stripe' style="width:100%">
<thead>
<tr>
<th>View</th>
<th>Vendor</th>
<th>Company</th>
<th>Type</th>
<th>Status</th>
<th>Owner</th>
<th>Business Email</th>
<th>Department</th>
<th>Descr</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script> DeedsTech, Inc., Third Party Risk Management Solutions.
</p>
</div>
</footer>
</div>
<!-- Central Modal Medium Info -->
<div class="modal fade" id="activev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Modal Info</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis
ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim,
ab officiis totam.</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary">Get it now <i class="far fa-gem ml-1 text-white"></i></a>
<a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">No, thanks</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Info-->
<!-- make rows in tables clickable -->
<!--
<script>
document.addEventListener("DOMContentLoaded", () => {
const rows = document.querySelectorAll("tr[data-href]");
rows.forEach(row => {
row.addEventListener("click", () => {
window.location.href = row.dataset.href;
});
});
});
</script>
-->
</body>
<!-- Core JS Files -->
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.12.0/js/mdb.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js?v=1.4.0"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>
<script>
function format ( d ) {
return '<table>'+
'<tr>'+
'<td><b>Business Owner:</b></td>'+
'<td>'+d.owner+'</b></td>'+
'</tr>'+
'<tr>'+
'<td><b>Contact Email:</b></td>'+
'<td>'+d.owner_email+'</td>'+
'</tr>'+
'<tr>'+
'<td><b>Description:</d></td>'+
'<td style="max-width=280px;">'+d.descr+'</td>'+
'</tr>'+
'<tr>'+
'<td>More Info:</td>'+
'<td><button>View</button></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var dt = $('#tblVendor').DataTable( {
"responsive": true,
"dom": 'Bfrtip',
"buttons":[
{ extend: 'copy', text: 'Copy to Clipboard', className: 'btn btn-info btn-fill' },
{ extend: 'pdf', text: 'Export PDF', className: 'btn btn-info btn-fill' },
{ extend: 'excel', text: 'Export Excel', className: 'btn btn-info btn-fill' },
{ extend: 'csv', text: 'Export CSV', className: 'btn btn-info btn-fill' }
],
"processing": true,
"serverSide": true,
"ajax": "ajax.php",
'serverMethod': 'post',
"columns": [
{
"width": "5%",
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "name" },
{ "data": "company" },
{ "data": "type" },
{ "data": "status" },
{ "data": "owner", "visible": false},
{ "data": "owner_email", "visible": false},
{ "data": "descr", "visible": false},
{ "data": "dept" },
], "order": [[1, 'asc']],
} );
new $.fn.dataTable.Buttons( dt, {
buttons: [
{
className: 'btn btn-info btn-fill',
text: 'Add New Vendor',
action: function ( e, dt, node, conf ) {
window.location.replace("new.php");
},
},
]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#tblVendor tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#tblVendor'+id+' td.details-control').trigger( 'click' );
} );
} );
dt.buttons( 1, null ).container().appendTo(
dt.table().container()
);
} );
</script>
I have literally tried everything, even searching through CSS (no changes permanently made) and making changes to color schemes and what not. There literally is nothing that has worked so I'm reaching out to you guru's to see where I'm going wrong. I'm hoping it's just a silly oversight and no drastic changes but I'm open to anything.
I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>
You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.
I have a bootstrap modal that contains a bunch of strings. I also have a loop of cards that each has a different 'id'. When I open the modal I want id to be displayed inside the modal (I will use it to get more info later, like name, description and deadline).
This is my loop of JSON objects:
<div class="card-list-body">
{% for assignment in förseningar %}
<div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Archive Card</a>
</div>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 400">
{{assignment.type_of_assignment}} i {{assignment.course}} </h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600">
{{assignment.name}}
</h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: #d21b1b">
Försenad
</h6>
</a>
</div>
<style>
.hor-list {
list-style-type: none;
overflow: hidden;
display: block;
text-decoration: none;
padding: 0px;
margin-right: 5px;
}
.circle {
border-radius: 50%;
height: 30px;
text-align: center;
width: 30px;
}
.list-item {
float: left;
margin-right: 1px
}
.initials {
font-size: 15px;
font-weight: 800;
line-height: 1;
position: relative;
top: 3px;
/* 25% of parent */
}
</style>
<ul class="hor-list2">
{% for teacher in assignment.teachers.all %}
<li class = "list-item2">
<span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
</li>
{% endfor %}
<li class = "list-item2">
<p style="margin-left: 10px; font-size: 15px">
{{assignment.teachers.count}} Lärare:
{% for teacher in assignment.teachers.all %}
{{teacher.user.username|capfirst}}
{% endfor %}
</p>
</li>
</ul>
<hr>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: rgb(82, 130, 202)">
Börja Plugga. Skapa en studieplan
</h6>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
This is a piece of the modal:
<div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
<button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<!--end of modal head-->
<div class="modal-body">
<div class="page-header">
<p class="lead">Assemble three distinct mood boards for client consideration</p>
<div class="d-flex align-items-center">
<button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
<i class="material-icons">add</i>
</button>
</div>
<div>
<div class="progress">
<div class="progress-bar bg-success" style="width:42%;"></div>
</div>
<div class="d-flex justify-content-between text-small">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>3/7</span>
</div>
<span>Due 14 days</span>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="task" role="tabpanel">
<div class="content-list" data-filter-list="checklist">
the javascript:
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
As I said. I want a detail page of a card. So when I press the card I get a popup. I want that popup to contain a more detailed page of the card. I can't figure out how to get the data into the popup modal tho (task-modal) I think this is close but if anyone could help it would be greatly appreciated!
Three issues:
Your javascript is inside the for loop ({% for assignment in förseningar %}), it should be outside. Otherwise it's repeated x times.
var Id = $(event.relatedTarget).data('id') means that the button triggering the modal has a data-id attribute. But yours doesn't, it has an id attribute. So either set data-id="{{ assignment.id }}" in the <div class="card card-kanban" ...> or change to var Id = $(event.relatedTarget).attr('id').
$(event.currentTarget).find('input[name="modal-title"]') means you're looking for an <input name="modal-title"> element in your modal, but I don't see that anywhere. Maybe it got cut-off in which case no issue. But if you're trying to change the modal-title div of your modal, then the selector should be: $(this).find('.modal-title').
Note: I use $(this) instead of $(event.currentTarget). Shouldn't make any difference as the currentTarget is the modal and so is this.
I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>
In here,i have 2 HTML page(a.html,b.html), I use Bootstrap Tab in a.html to show different information.
a.html
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li>iOS</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>abc</p>
</div>
<div class="tab-pane fade" id="ios">
<p>123</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>456</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>789</p>
</div>
</div>
</body>
</html>
Now I have another page(b.html),in (b.html),it has a button,I want if i click the button, I can back to a.html and show out the specific tab(ejb) in dropdown list(Java).How can I do it?
I try Default (Gray) Button,but it is not work.
If need to change the page to php to show out the specific tab, i can change it.
b.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="a.html">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
This is the step you need to try:
I. Add new parameter in the end of the a.php's URL (I mean, in button to be clicked in b.php) This is used to be a signal for a.php to see if it is spesific URL to handle.
For example:
http://www.myweb.com/a.php?q=ejb
So, in b.php, the whole codes will be:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0
/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="http://www.myweb.com/a.php?q=ejb">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0
/js/bootstrap.min.js"></script>
</body>
</html>
This follows is for a.php scripting:
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if ($url=="http://www.myweb.com/a.php?q=ejb"){ //this is the point.
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade in active' id='ejb'>
<p>789</p>
</div>
</div>";
}
else{
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade' id='ejb'>
<p>789</p>
</div>
</div>";
}
?>
Note: From the two (2) you can see that you just need to add in active which tab you need to open or to visit back.
So, the whole codes for a.php will be like this:
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li>iOS</li>
<li class="dropdown">
Java <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" id="test_open_menu" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if ($url=="http://localhost/test/a.php?q=ejb"){
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade in active' id='ejb'>
<p>789</p>
</div>
</div>";
}
else{
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade' id='ejb'>
<p>789</p>
</div>
</div>";
}
?>
</body>
</html>
Sorry for long answer. This is what I can say since I have no good enough in English spoken.
Really hopes this work for you and be inspired for you to modify it in javascript.