I am using "jquery": "^3.4.0" and DataTables 1.10.18.
I am having the following table:
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(() => {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
I am trying to put a click listener on the clicked edit button.
However, I currently only get undefined back. Instead I would like to get the id within the first column back.
Any suggestions what I am doing wrong?
I just use your code as example and make some changes in jQuery.
Please try this, hope this works for you.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
$(document).on("click", "#edit-row", function(){
console.log('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.
Check this answer for more information.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function(event) {
var c = this.id;
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function() {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target.
To get the id that you have in the first column you can find the closest table row then select the first table column to get that text value.
You need to use a class selector for all those rows instead of id selector #edit-row as id should be unique in the HTML page.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$(".edit-row").click((e) => {
var c = e.target.id
var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
console.log(hashId)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you
Considering your ultimate goal (editable DataTable), I'll allow myself to suggest few improvements to your app, so that you don't really need to get id of clicked row and do all the HTML heavy lifting on your own.
Instead of using external AJAX-call to populate your DataTables, I'd recommend to use embedded ajax option
$("#posts").DataTable({
//specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
//where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
//if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
...
ajax: {
url: "/getdata"
dataSrc: ''
}
})
use columns.render option to modify cell contents, to make it appear as a badge or drop-down menu
dataTable = $("#posts").DataTable({
...
columns: [
{ data: "id", title: "Id" },
{
data: "status",
title: "Status",
//render status as a badge, having class, based on status value
render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
}
...
]
})
and essential point - leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row
$("#posts").DataTable({
...
columns: [
...
{
data: null,
title: "Actions",
//render 'Actions' column as a drop-down menu wrapper,
//appending 'row' attribute with corresponding row number
//as a value
render: (data, type, row, meta) => `
<div class="dropdown" row="${meta.row}">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i>Edit
<i class="icon-bin"></i>Delete
</div>
</div>
`
}
]
});
use above row numbers in order to modify target table row, using DataTables API methods (e.g. row().remove() for deletion), I'll use simplest example (deletion of the row in the front-end), since you didn't share much details as for whether you want to modify both back end and front end data or only the latter
//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
//grab dropdown wrapper and obtain row number
const rowNumber = $(this)
.closest(".dropdown")
.attr("row");
//delete corresponding table row and re-draw the table
dataTable.row(rowNumber).remove();
dataTable.draw();
});
Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser's Dev Tools, using this link.
P.S. if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties ('id', in particular) of clicked row
Related
I work wit DataTables and would like to realize drag and drop reordering.
My Code a the moment:
HTML
<div class="table-responsive">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
JS
var tablePositionen = $('#tablePositionen').DataTable({
columnDefs: [
{ targets: [0], orderable: true, className: 'reorder' },
{ targets: '_all', orderable: false }
],
"ordering": false,
"paging": false,
rowReorder: true,
"lengthMenu": [[10], [10]],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
My Table looks like this:
And If now drag and drop the second row above the first row, the other columns values will not be the correct one:
Where is my mistake??
The changes I made to resolve your issue:
(1) Added a "sequence" column as the first column in the table.
(2) Changed the DataTable initialization options to hide that sequence column, and, instead, allow the user to perform a drag from anywhere in a row (as opposed to the default location which is the first column only).
(3) Removed the remaining unneeded options (although you can add back anything you need such as "paging": false). Note that some options contradicted each other, such as paging and lengthMenu.
(4) Made a minor change to the language URL (too many forward slashes). This is not relevant to the drag/drop issue.
Here is the result:
$(document).ready(function() {
var tablePositionen = $('#tablePositionen').DataTable({
rowReorder: {
selector: 'tr'
},
columnDefs: [
{ targets: 0, visible: false }
],
"language": {
"url": "https:////cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
}
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- row reorder -->
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/>
</head>
<body>
<div style="margin: 20px;">
<table id="tablePositionen" class="table table-lg hover table-striped">
<thead>
<tr>
<th>Seq.</th>
<th>Bezeichnung</th>
<th>Menge</th>
<th>Preis</th>
<th>Gesamt</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Article 1</td>
<td>1,00</td>
<td>10,00 €</td>
<td>10,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>Article 2</td>
<td>2,00</td>
<td>56,00 €</td>
<td>56,00 €</td>
<td class="text-right">
<div class="dropdown">
<a href="#" class="btn btn-outline-light btn-sm btn-floating"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Bearbeiten</button>
<button class="dropdown-item" type="button">Löschen</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Just to add: All of the row reorder examples use an initial column to support reordering (the Seq. column I added). This is required - although I don't recall seeing this explicitly mentioned in the documentation. For your case, I chose to hide this initial (but required) column, and use the "full row" drag option.
can you help me how to print it into pdf on the table with input value.
sorry im just a student and my supervisor need this project for my output
and i cant add my materialize js and css because for body limit
and i add a add button for new Row for the table with a input that can print it to the pdf. just help me in converting to pdf and i can handle the rest of formating in pdf
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bureau of Internal Revenue</title>
</head>
<body class="scrollspy bg">
<nav>
<div class="nav-wrapper white" >
<div class="container">
<img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
<a href="" style="margin-left:1%;" class="brand-logo black-text"> Bureau of Internal Revenue
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Create</li>
</ul>
</a></div>
</div>
</nav>
<div class="showcase container">
<div class="bg-showcase">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<br>
<br>
<br>
<br>
<h1 class="white-text center"><b>Welcome</b></h1>
<h1 class="center white-text"><b>to</b></h1>
<h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
</div>
</div>
</div>
</div>
<form action="">
<div class="row">
<div class="col s12 l10 offset-l1">
<div class="card">
<div class="card-content">
<div class="">
<h3><b>Index of Success Indicators</b></h3>
<table class="striped">
<thead>
<tr>
<th>Major Final Outputs</th>
<th>Performance Measures</th>
<th>Performance Targets</th>
<th>Success Indicator
<p>(Measure + Target)</p></th>
<th>Organization Outcome Sectoral Goals</th>
</tr>
</thead>
<thead>
<tr>
<th>A. Strategic Priority</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>B. Core Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>C. Support Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
</table>
<div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s12 l6">
<h4>Links</h4>
<ul>
<li>Home</li>
<li>Back to Top</li>
<li>About Developer</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey darken-2">
<div class="container">Bureau of Internal Revenue © 2019</div>
</div>
</footer>
</body>
<div id="create" class="modal">
<ul class="container center" style="margin-bottom: 3%;">
<h2>Create</h2>
<li>Index of Success Indicators</li>
<br><br>
<li>Performance Monitoring and Coaching</li>
<br><br> <li>CSC Individual Development Plan</li>
<br><br> <li>Individual Performance Commitment And Review</li>
</ul>
<div class="modal-footer">
close
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// Init Sidenav
$('.button-collapse').sideNav();
// Scrollspy
$('.scrollspy').scrollSpy();
$('.modal').modal({
dismissible:true,
inDuration:300,
outDuration:200,
ready:function(modal,trigger){
console.log('Modal Open',modal,trigger);
}
});
jQuery(function(){
var counter = 1;
jQuery('a.addline').click(function(event){
event.preventDefault();
var newRow =jQuery('<tr class="number">'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter + '<th><input type="text" name="" class="center" id=""/></th>' +
counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
counter ++;
jQuery('tbody.line').append(newRow);
});
});
function demoFromHTML(){
var pdf= new jsPDF('p','pt','letter');
source = $('#isi')[0];
specialElementHandlers={
'#bypassme':function(element,renderer){
return true
}
};
margins = {
top:80,
bottom:60,
left:40,
width:552
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width':margins.width,
'elementHanlders':specialElementHandlers
},
function(dispose){
pdf.save('testing.pdf');
}
,margins);
};
});
</script>
</body>
</html>
I tried for tow days to add search field and sorting data table using jquery but always i show this error :
Uncaught TypeError: $(...).DataTable is not a function
I changed the script source order but can't run
PS : I'm using thymeleaf, bootstrap
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}"></td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
This a screen shoot
This error comes because of this code snippet did not take the insecure link so you put https:// for loading data tables. check it with other editor with http:// that woks for me.
the body of the first column have no values. data tables shows this type if errors and alert because missed values.
some times the
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">1</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">2</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
Thank you for your answer, i resolved the problem. The source of the problem was a conflict with anathor jquery local file
I have
an account > index page with a table, and other modals, that I slice into a small blade views. On that page, I have 100000 accounts.
Problem
There is a section of PHP on top of my edit modal that is making 100000 curls requests, and cause a huge delay on my account > index page.
My goal
is to prevent rendering those blades right up front and only render if the user click on the Pencil icon.
Here is my account.index blade
#extends('layouts.internal.master')
#section('content')
<div class="panel account-panel" style="padding: 30px;">
<div class="panel-body">
<div class="col-sm-2">
<a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
</div>
<div class="table-responsive" style="margin-bottom: 0;">
<table class="table" id="account-table">
<thead>
<tr>
<th>#</th>
<th>Account ID</th>
<th>Customer Type</th>
<th>Name</th>
<th>Email</th>
<th class="text-center">Auto Provisioning</th>
<th class="text-center">AP</th>
<th style="min-width: 90px;">Action</th>
</tr>
</thead>
<tbody>
<?php
$x = 0;
?>
#foreach( $accounts as $account )
#if($account->email_address !== 'admin#benunets.com')
<tr>
<td>{{$x += 1 }}</td>
<td>{!! $account->account_id !!}</td>
<td>
{{-- <img src="{{ $image }}" width="30px"> --}}
<span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
<td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
<td>{!! $account->email_address !!}</td>
<td class="text-center" >
#if($user != null AND $user->auto_provisioning == 1)
{!! Helper::intBoolToIcon($user->auto_provisioning) !!}
#else
<i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
#endif
</td>
<td class="text-center" ><b>{!! $count_cpe !!}</b></td>
<td class="text-center">
<!-- Buttons -->
<div class="tool-buttons">
<ul class="button-list">
<!-- Edit -->
<li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>
<!-- Delete -->
<li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
</ul>
</div>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
</div>
</div>
</div>
#include('account.modal.account.destroy')
#include('account.modal.account.create')
#include('account.modal.account.edit')
#section('pagescripts')
<script type="text/javascript">
/*=============================================================================================
= Edit =
============================*/
//Edit Mode
$('.account-edit').click( function() {
var id = $(this).data("id");
console.log(id);
//Style
var val2 = $("#auto_provisioning_switch-"+id).val();
//Set the AP switch
if(val2 == 1){
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
$("[name='auto_provisioning_switch']").val(1);
$('#service_plan_div-'+id).show();
// Set the service plan dd menu
var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
ajax.done(function (service_plan) {
console.log(service_plan+' | id : ' + id );
$('#service_plan-'+id).val(service_plan);
});
}else{
$("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
$("[name='auto_provisioning_switch']").val(0);
$('#service_plan_div-'+id).hide();
}
});
</script>
#stop
I only want to render
#include('account.modal.account.edit')
when I clicked on the pencil to edit.
OR
#include('account.modal.account.destroy')
when I clicked on the trash to delete.
How do I do that ?
Any hints on how to prevent that will be a huge help !!!
You can't cause the blade rendering to change with javascript code becuase the blade rendering is happening on your server and the javascript is happening on your browser.
What you CAN do is add javascript that hides the sections when a user interacts with your page.
Show or hide an element using javascript in all browsers
The website that I’ve made works perfectly fine without a build system. However, I am currently having a problem with the bootstrap modals with the Yeoman: Angular + Gulp build system. Whenever I click on the list item the modal does not appear, it takes me straight to blank page. I haven’t been able figure out the cause of this event.
At some point, the modals appeared to work without having to make any adjustments to the scripts. I restarted the grunt server again, and I was back to where I was. I don’t understand why the modals don’t appear and take me to blank page. Any ideas?
I was thinking this may had to do something with the Angular Routing, but I am not sure. I’ve already made some adjustments, and I am not receiving any sort of error message in the console. I need some advice on how to fix the problem. Any help will be appreciated.
The link to my code GitHub Repo
angular.module('sanMiguelApp')
.controller('Events',['$scope',function($scope){
$scope.eventname = [
{name:'Cinco De Mayo',date:'September',image: '../../images/cinco-de-mayo.jpg',number: 'first'},
{name:'River Fest',date:'September',image: '../../images/river-fest.jpg',number: 'second'},
{name:'School of Rock',date:'September',image: '../../images/school-of-rock.jpg',number: 'third'},
{name:'Golf Tournament',date:'September',image: '../../images/golf-tournament.jpg',number: 'fourth'},
{name:'20th Anniversary',date:'September',image: '../../images/anniversary.jpg',number: 'fifth'}
];
}])
.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.setTab = function(newTab){
$scope.tab = newTab;
};
$scope.isSet = function(tabNum){
return $scope.tab === tabNum;
};
}]);
<div class="row">
<div class="col-md-5">
<img ng-src="images/student.jpg" class="img-responsive thumbnail" alt="San-Miguel-Building">
</div>
<div class="col-md-7">
<div class = "motto text-center animated zoomIn">"Transforming lives throught education,commitment and love."</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="https://cdn1.iconfinder.com/data/icons/education-vol-2/48/074-512.png" alt="San Miguel">
<div class="caption">
<h3 class = "text-center">School Announcements</h3>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" style = "height:50px" src="https://cdn0.iconfinder.com/data/icons/construction-2/512/announcement.png" alt="Announcement">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" ng-controller= "TabController">
<div class="thumbnail">
<img class = "img-responsive" style="height:100px" src="http://www.cogransystems.com/wp-content/uploads/2013/07/sports-icon.png" alt="...">
<div class="caption">
<h3 class = "text-center">Sports Schedule</h3>
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{active:isSet(1)}">
<a href ng-click="setTab(1)">Basketball</a>
</li>
<li role="presentation" ng-class="{active:isSet(2)}">
<a href ng-click="setTab(2)">Soccer</a>
</li>
<li role="presentation" ng-class="{active:isSet(3)}">
<a href ng-click="setTab(3)">Softball</a>
</li>
</ul>
<table class="table" ng-show="isSet(1)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Basketball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(2)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Soccer</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<table class="table" ng-show="isSet(3)">
<thead>
<tr>
<th>Date</th>
<th>Opponent</th>
<th>Softball</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">3/12</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/16</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
<tr>
<th scope="row">3/19</th>
<td>San Miguel</td>
<td>#McKinley Park</td>
</tr>
</tbody>
</table>
<!-- <div class="list-group text-center">
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Basketball
<i class="fa fa-male fa-2x fa-fw pull-left"></i>Soccer
<i class="fa fa-female fa-2x fa-fw pull-left"></i> Soccer
<i class="fa fa-male fa-2x fa-fw pull-left"></i> Softball
</div> -->
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="thumbnail" ng-controller ="Events">
<img class = "img-responsive" style="height:100px" src="http://ketchikanpubliclibrary.org/wp-content/uploads/2014/10/events-calendar-icon-300x300.png" alt="...">
<div class="caption">
<h3 class = "text-center">Events</h3>
<div class="list-group text-center" ng-repeat = "events in eventname">
</i>{{events.name}}
<div class="modal fade" id="{{events.number}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{{events.name}}</h4>
</div>
<div class="modal-body">
<div class = "row">
<div class = "col-md-12">
<img style = "height:150px,width: 50px"class = "img-responsive" src ="{{events.image}}"
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It probably has something to do with how you are injecting services into your various angular items. If you're not injecting with hard-coded strings at some point then minification is likely to break your app. I'd guess you know that already, but also that perhaps you missed one somewhere.
You can use syntax like:
function PhoneListCtrl($scope, $http) {...}
PhoneListCtrl.$inject = ['$scope', '$http'];
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
or
function PhoneListCtrl($scope, $http) {...}
phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', PhoneListCtrl]);
The first method is less popular, but generally more preferred in terms of best practices.
I luckily found the solution why the modals weren't popping up. I had to omit "href" attribute in my anchor element. Since, I programmed my routing to "#/" for any unknown pages. That is the reason why it was taking me to a blank page rather than popping the bootstrap modal. Lesson learned!
</i>{{events.name}}
<a class="list-group-item" data-toggle="modal" data-target="#{{events.number}}"></i>{{events.name}}</a>