This is my earlier question which is not answered..as I am still looking for help
https://stackoverflow.com/questions/27230092/how-to-implement-popover-for-table-rows
I am trying show details of the selected table row on Popup, with my approach i could see data on Popover only for the first row of table.
Below is my code snaps, please help me to sort this
HTML Code :
<!DOCTYPE html>
<html ng-app="AngFactory">
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="js/angular-resource.js"></script>
<script src="js/jQuery.js"></script>
<script src="modal/ConfigModal.js"></script>
<script src="main.js"></script>
<script src="services.js"></script>
<script src="mainController.js"></script>
<link href="css/myStyle.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body ng-controller="mainController">
<table class="hoverTable">
<thead >
<tr>
<th>PO Number</th>
<th>Document Type</th>aq
<th>Company Code</th>
</tr>
</thead>
<tr ng-repeat="X in resultSet " >
<td id="pop-over-link" ng-click="getPO_IT(X)">
<a ><test-directive></test-directive>{{X.PONumber}}</a>
</td>
<td >
{{X.DocType}}
</td>
<td >
{{X.CCode}}
</td>
</tr>
</table>
aq
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
</body>
</html>
JS Code :
app.directive('testDirective', function($compile) {
return {
restrict: 'EAC',
templateUrl:'TemplateID.html',
link: function(scope, elements, attrs) {
$("#pop-over-link").popover({
'placement': 'right',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
});
scope.testFunction = function() {
alert("it works");
console.log("maybe");
}
}
}
});
TemplateID.html
<body>
<div id='pop-over-content' style='display:none'>
<h3>Data goes here</h3>
{{X.PONumber}}
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
<button class='btn btn-primary' ng-click='testFunction()'>Close</button>
</div>
</body>
Related
I am start working with DataTable.js and when I want to integrate in my project which is done in ASP.NET CORE MVC 5.0 I get error like
Uncaught TypeError: $(...).DataTable is not a function
I try to google and I found that this error may come when you JQuery is older version, but I updated to newest version 3.7.1
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
WHat else I look is I try to change calling of function to call by ID and by class but nothing change as well.
Here is my layout page as well where I include datatable.min.js and datatable.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - BergClinic</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="~/datatables/datatables.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/fontawesome/css/all.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">BergClinic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Patient" asp-action="Index">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Doctor" asp-action="Index">Doctors</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="AdmissionPatient" asp-action="Index">Admission patient</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-white-50 bg-primary">
<div class="container">
© 2021 - BergClinic
</div>
</footer>
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#10"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
In my Index View Page I also create calling of datatable in following meaner
#model IEnumerable<BergClinics.Models.Doctor>
#{
ViewData["Title"] = "Index";
}
<div class="container p-3 bg-white">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-primary">Doctor's List</h2>
</div>
</div>
<br /><br />
#if (Model.Count() > 0)
{
<table class="table datatable-responsive datatable-doctor" style="width:100%">
<thead>
<tr>
<th>
Doctor Name
</th>
<th>
Code
</th>
<th>
Speciality
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model)
{
<tr>
<td width="25%">#obj.Firstname #obj.Lastname</td>
<td width="25%">#obj.Code</td>
<td width="25%">#obj.Speciality</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Edit" class="btn btn-primary mx-2">
<i class="fas fa-edit"></i>
</a>
<a asp-controller="Doctor" asp-route-Id="#obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
<i class="far fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p> No Doctor exists.</p>
}
</div>
<script>
$('.datatable-doctor').DataTable({
dom: 'Bfrtip',
//buttons: [
// {
// text: '<i class="btn btn-info"><i class="fas fa-plus"></i> Create New Doctor</a>',
// className: 'btn bg-blue',
// action: function (e, dt, node, config) {
// window.location.replace("/Doctor/Create");
// }
// }
//],
columnDefs: [
//Ovaj dio je potreban
{
responsivePriority: 1,
targets: -1
},
{
targets: [0],
orderable: true,
searchable: true,
printable: true,
width: "120"
}
]
});
</script>
Does anyone know where I made mistake ? What is wrong here ?
When you load jQuery you create a new instance of $ and jQuery which don't have any plugins you had previously loaded and attached to previous instances of jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
You are loading four different versions of jQuery!
Load one and make sure it is the current version.
Remove all of the lines quoted above except the first one.
You are trying to call DataTables in a script loaded in the body of the document, which is above the footer where you have:
<script type="text/javascript" src="~/datatables/datatables.min.js"></script>
<script type="text/javascript" src="~/datatables/datatables.js"></script>
You need to load the plugin before you call it.
You also shouldn't load the plugin twice.
Move one of those lines so it is immediately after the line where you load jQuery. Remove the other one.
I was trying to iterate though an array defined in the data section of a Vue instance, so the table head could be determined automatically. But when I ran the code, the console output was as follows:
Here's the code (.js file combined):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Demo</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<h3>
Staffs
</h3>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th v-for:"term in items">
{{term}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>6556</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<ul class="pagination">
<li>
Prev
</li>
<li v-for="n in 5">
{{n}}
</li>
<li>
Next
</li>
</ul>
</div>
<div class="col-md-4 column">
<button class="btn btn-default" type="button">button</button>
</div>
</div>
</div>
<script>
'use strict';
console.log("here we go!");
var tab = new Vue({
el: '#mytable',
data: {
items: ['aa','bb']
}
});
</script>
</body>
</html>
And the appearance was like:
Replace
v-for:"term in items"
With
v-for="term in items"
I want to have a fixed menu, this fixed menu is called: fixed_admin.html:
<!DOCTYPE html>
<!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="images/puzzle.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!-- <link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" /> --> <!-- penso di poterlo togliere -->
<link rel="stylesheet" href="styles/mainBoot.css">
<link rel="stylesheet" href="styles/scrollbar.css">
<link rel="stylesheet" href="styles/noscroll_numberfield.css">
<!-- <script src="scripts/emailchecker.js"></script> -->
<!-- <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> -->
<!-- <script src="scripts/number-directive.js"></script> -->
<script type="application/javascript"></script>
<title>Pannello Amministratore</title>
<!-- Bootstrap core CSS -->
<link href="./styles/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./styles/dashboard.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style id="holderjs-style" type="text/css"></style></head>
<body ng-app="myApp" background="images/sfondoblu3.png">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">FDDispenser</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Pannello Amministratore</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Mostra Dipendenti</li>
<li>Mostra Catalogo</li>
<li>Mostra Macchinette</li>
<li>Mostra Acquisti</li>
</ul>
<ul class="nav nav-sidebar">
<li class="active">Aggiungi/Modifica Dipendente</li>
<li>Crea/Modifica Catalogo</li>
<li>Aggiungi/Modifica Famiglia</li>
<li>Aggiungi/Modifica Categoria</li>
<li>Aggiungi/Modifica Produttore</li>
<li>Aggiungi/Modifica Ingrediente</li>
<li>Aggiungi/Modifica Fabbrica di produzione</li>
<li>Aggiungi/Modifica Macchinetta</li>
<li>Aggiungi/Modifica Tipologia Macchinetta</li>
<li>Aggiungi/Modifica Accessori</li>
</ul>
<ul class="nav nav-sidebar">
<li>Assegna Macchinetta a Dipendente</li>
<li>Posiziona Macchinetta sul Territorio</li>
<li>Assegna Prodotti a Macchinetta</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-view></div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="./Dashboard Template for Bootstrap_files/jquery.min.js.download"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="scripts/main-admin.js"></script>
<script src="scripts/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./scripts/bootstrap.min.js.download"></script>
<script src="./scripts/docs.min.js.download"></script>
</body></html>
When I click on "Mostra Dipendenti" I want to see in the middle of the same page another page (in ), using ng-route from this js page called main-admin.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home_admin.html"
})
.when("/showemp", {
templateUrl : "show_employee.html"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
The page that I want to see when I click that button is "show_employee.html":
<body ng-app="StaffManagement" ng-controller="StaffController">
<h2 class="sub-header" style="color:#4e67c3;">Elensco dipendenti</h2>
<div class="table-responsive">
<table id="thetable">
<tr>
<th class="th2">Nome</th>
<th class="th2">Cognome</th>
<th class="th2">Data di Nascita</th>
<th class="th2">Telefono</th>
<th class="th2"> Sesso </th>
<th class="th2"> StaffId </th>
<th class="th2">Email</th>
</tr>
<tr ng-repeat="staff in staffs">
<td> {{ staff.name }}</td>
<td> {{ staff.surname }}</td>
<td> {{ staff.birthDate }}</td>
<td> {{ staff.phone }}</td>
<td>
<div ng-switch on="staff.gender">
<span ng-switch-when="true">Uomo</span>
<span ng-switch-when="false">Donna</span>
</div>
</td>
<td> {{ staff.idstaff }}</td>
<td> {{ staff.staffLogin.email }}</td>
</tr>
</table>
</body>
<script src="./scripts/bootstrap.min.js.download"></script>
<script src="./scripts/docs.min.js.download"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script> -->
<script src="scripts/deployeePanel.js"></script>
<script src="scripts/rest-services.js"></script>
<script src="scripts/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<!-- <script src="scripts/emailchecker.js"></script> -->
<script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script>
<!-- <script src="scripts/number-directive.js"></script> -->
<script type="application/javascript"></script>
If I open only show_employee.html it works well:
But when I open it from the button on fixed_admin.html, angular part is empty:
No error from the console:
I don't understand why angular doesn't work when I use ng-route. I want to see the element of the first image in fixed_admin.html#/showemp, but it is empty
Solved adding controller: "StaffController" and the controller in main-admin.js:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home_admin.html"
})
.when("/showemp", {
templateUrl : "provaEmp.html",
controller: "StaffController"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
app.controller("StaffController", function($scope, $filter, $http) {
$scope.staffs = [];
$scope.staffLast = [];
$scope.staffForm = {
idstaff : -1,
staffType: {
idstaffType: 2,
type: "Dipendente"
},
name: "",
surname: "",
birthDate: "",
phone: "",
gender: true,
working: true,
staffLogin: {
idstaffLogin: -1,
email: "",
// pass: "",
}
};
$scope.staffLoginForm = {
idstaffLogin: -1,
email: "",
// pass: ""
};
$scope.selectg = [
{name:'uomo', type: true},
{name:'donna', type: false}
];
$scope.name = "Giacomo";
$scope.staffForm.name = "Giacomo";
$scope.staffForm.surname = "Brunetta";
$scope.staffForm.phone = "3222565625";
$scope.staffForm.idstaff = "1";
$scope.staffForm.email = "asdasd#dasd.it";
});
I've been trying to make the DataTables plugin work but I can't manage it. Here is the entire html code of my page. The apache server shows no error about not finding the css or js files. Here is my entire html code and the relevant js code since I have not really a clue where the problem might be.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap extra CSS -->
<link href="DataTables/datatables.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/tutorial.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="navbar">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">ASDB</h3>
<nav>
<ul class="nav masthead-nav">
<li>Home</li>
<li>Background</li>
<li class="dropdown active">
Database access<span class="caret"></span>
<ul class="dropdown-menu">
<li>Input Form</li>
<li class="divider"></li>
<li class="active">Query the database</li>
<li class="divider"></li>
<li>Tutorial</li>
<li>References</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="group">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a data-toggle="collapse" href="#dq" data-parent="#group">
Database queries
</a>
</li>
<li>
<a data-toggle="collapse" href="#im" data-parent="#group">
IMs
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="accordion-group">
<div class="collapse in" id="dq">
<h1>Database queries</h1>
<p>Have fun!!</p>
</div>
<div class="collapse" id="im">
<h1>IMs</h1>
<table id="ind-table" class="display"><thead><tr><th>IMs</th><th>Number of studies</th></tr></thead><tbody>
<tr><td>First IM</td>
<td>100</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="first_im"></label>
</div>
</td>
</tr>
<tr><td>Second IM</td>
<td>12</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="second_im"></label>
</div>
</td>
</tr>
<tr><td>Third IM</td>
<td>153</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="third_im"></label>
</div>
</td>
</tr>
</tbody></table>
<h3><button class="btn btn-default"><b>Visualize</b></button></h3>
<ul>
<li>First IM: Wikipedia Link</li>
<li>Second IM: Wikipedia Link</li>
<li>Third IM: Wikipedia Link</li>
</ul>
</div>
</div>
Toggle Menu
<!-- </div> -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script src="js/query.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The code on query.js is
$(document).ready(function() {
$('#ind-table').dataTable( {
"order": [[ 2, "desc" ]]
} );
} );
After running this code my table is not getting any of the formatting that is supposed to come with DataTables. Am I missing something?
You need to put three <th></th> tags in the <thead> section. Then the problem will be solved
<thead>
<tr>
<th>IMs</th>
<th>Number of studies</th>
<th> </th>
</tr>
</thead>
I'm developing a web app using Twitter-Bootstrap editable and Java Servlet Backend.
Using JSTL to render table data, and hooking up editable data form is not working.
JS developer console, show undefined, so it's not recognizing element id's produced inside foreach in JSTL.
Tried to wrap editable JS call on document ready, does not work.
I guess the problem is how to make id of elements written by JSTL available for scripting.
<%--
Document : index
Created on : 20/Abr/2013, 23:52:35
Author : Arthur
--%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap DatePicker CSS-->
<link href="css/datepicker.css" rel="stylesheet" media="screen">
<!-- Bootstrap Editable CSS-->
<link href="css/bootstrap-editable.css" rel="stylesheet" media="screen">
<!-- JQUERY -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap JS-->
<script src="js/bootstrap-2.0.2.js"></script>
<!-- Bootstrap DatePicker JS-->
<script src="js/bootstrap-datepicker.js"></script>
<!-- Bootstrap EdiTable JS-->
<script src="js/bootstrap-editable.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.dropdown-toggle').dropdown();
});//]]>
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
background-color: #f5f5f5;
}
</style>
<title>.:StaffGest:.</title>
</head>
<body>
<!-- <div class="navbar navbar-inverse navbar-fixed-top">-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">.:StaffGest:.</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Funcionários<b class="caret"></b>
<ul class="dropdown-menu">
<li>Novo</li>
<li>Editar</li>
<li>Apagar</li>
<li class="divider"></li>
<li class="nav-header">Pesquisar</li>
<li>Pesquisar Funcionário</li>
<li>Listar Todos</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="container">
<h1>Lista Funcionários:</h1>
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Data Nascimento</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="employee">
<tr>
<td>${employee.firstName}</td>
<td><a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.lastName}</td>
<td><a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"><fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/></td>
<td><a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.email}</td> </tr>
</c:forEach>
</tbody>
</table>
</div> <!-- /container -->
<script>
$('#firstName').editable({
});
$('#lastName').editable({
});
$('#dob').editable({
});
$('#email').editable({
});
</script>
</body>
</html>
Here's your mistake:
<c:forEach ...>
<a id="firstName" ...>
<a id="lastName" ...>
<a id="dob" ...>
<a id="email" ...>
</c:forEach>
Multiple elements with same id is illegal in HTML. The behavior in HTML DOM and JS is unspecified.
Give them an unique ID based on e.g. iteration index or iterated item's ID or, better, if they need to behave the same in editable(), just the same class name:
<c:forEach ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
</c:forEach>
This way you can keep your JS DRY:
<script>
$('.editable').editable({
});
</script>