my table does not show table border and hyperlink, I am using thymeleaf and spring boot. I see the data from database when i type localhost:8080 without border, I should also see a Addbutton link in that page, but it is not shown.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>Employee Management System</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div class ="container my-2">
<h1>Employees List</h1>
<a th:href="#{/showNewEmployeeForm}" class="btn btn-primary btn-sm mb-3"> Add Employee </a>
<table border="1" class="table table-striped table-responsive-md">
Can you try this
<div class='table-responsive'>
<table class="table table-striped border-1">
//your table data
</table>
</div>
Related
I've a page in MVC which I want to reload automatically every 2 seconds without doing a refresh, I have seen examples
with Ajax but all referenced using buttons or in POST-GET events. I only want it to reload without refresh,
What can I do to perform that function?
Thank you
This's my view
#model MVC_PCMonitoring_Dash.Models.TablesPCModels
#{
ViewBag.Title = "Home Page";
}
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="~/Content/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
</div>
<div class="img bg-wrap text-center py-4" style="background-color: #A40033;">
<div class="user-logo">
<div class="img" style="background-image: url(Images/logo.jpg)"></div>
<h3>TOTAL PC</h3>
</div>
</div>
<ul class="list-unstyled components mb-5">
<li class="active">
Home
</li>
<li>
PC 1
</li>
<li>
PC 2
</li>
<li>
Exit
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<p align="right">#DateTime.Now</p>
<center>
<img src="~/Images/welcome.png" alt="centered image" />
</center>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use timer and ajax in this case.
setInterval(function(){ --ajax call to refresh---},2000) //2000 means 2 min
I am using Ajax call in Spring Boot App, Not able to do Table sorting for the columns, Anyway of doing client side sorting in Ajax ?
Since you didn't include any client-side code I'll just make a few assumptions:
Solution 1: You may have additional unwanted divs in your table. The Bootstrap3 sortable table is picky when it comes to structure. Don't put any divs beneath or above the tr values. Do something like this:
<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;">
<thead>
<tr>
<th><b>Requested By</b></th>
<th><b>Request Type</b></th>
<th><b>Reason</b></th>
<th><b>Requested Date</b></th>
<th><b>Status</b></th>
</tr>
</thead>
<tbody>
<tr th:each="request : ${requests}" th:if="${request.get('requestStatus') == 'Pending'}">
<td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td>
<td th:text="${request.get('requestType')}">Request Type</td>
<td th:text="${request.get('requestText')}">Reason</td>
<td th:text="${request.get('dateRequested')}">Requested Date</td>
<td th:switch="${request.get('requestStatus')}">
<th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="nnit">Pending</span></th:block>
<th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block>
<th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="nnit">Rejected</span></th:block>
</td>
</tr>
</tbody>
</table>
Solution 2: There's a small chance you included your scripts outside of your fragment if you're using Thymeleaf as a templating engine.
Template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head lang="en">
<title>Sample Springboot Application</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<!-- Internal Stylesheet -->
<link href="../static/css/style.css" th:href="#{/css/style.css}" rel="stylesheet" media="screen"/>
<!--Font Awesome-->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"/>
</head>
<body>
<div class="container" style="width: 100% !important;">
<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/table:: table"></div>
<div th:replace="fragments/footer :: footer"></div>
</div>
</body>
</html>
Fragment (Correct):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
<!-- Include all scripts before closing fragment div -->
</div>
Fragment (Incorrect):
<div th:fragment="table" xmlns:th="http://www.w3.org/1999/xhtml">
<!-- Get table code from this link and paste here: http://stackoverflow.com/questions/31888566/bootstrap-how-to-sort-table-columns -->
<!-- Whoops! You included your scripts (below) after your fragment's closing div! -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
Ran into a bit of a problem with combining Laravel and Vue.js to populate a table.
Essentially, I was trying to use the v-repeat property in combination with a http:get request using the vue-resources extension. The problem is that no values appear to be getting passed through by Vue - I simply get the {{first_name}} and {{email_address}} in brackets.
I can confirm that the API method that is called by the http:get request is in fact spitting out data (manually accessing the URL in the browser reveals data).
Here is the code in the routes.php file that is responsible for outputting the data:
get('api/v1_users',function()
{
return App\User::all()->toJson();
});
And here is what it spits out in the browser:
[{"email_address":"test123#gmail.com,"first_name":"John","password":"test123"}]
The Chrome console displays no errors nor warnings.
Here is my blade file:
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link media="all" type="text/css" rel="stylesheet" href="{{ URL::asset('css/bootstrap.min.css') }}">
<!-- Custom styles for this template -->
{!! Html::style('css/navbar.css') !!}
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">User Password Operations</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="inactive">Reset New User</li>
<li class="inactive">Pending Users</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Pending 1.0 Users</h1>
<p>A list of 1.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div id = "user">
<tr v-repeat = "user: v1_user">
<td>
#{{ first_name }}
</td>
<td>
#{{ email_address }}
</td>
<td>
<button type="button" class="btn btn-success">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
<div class="jumbotron">
<h1>Pending 2.0 Users</h1>
<p>A list of 2.0 users that have a change!me password as a result of this tool, and are awaiting password change.</p>
</div>
<table class="table table-bordered">
<tr>
<td>
<b>Name</b>
</td>
<td>
<b>Email</b>
</td>
<td>
<b>Select</b>
</td>
</tr>
<div>
<tr v-repeat = "user: v1_user">
<td>
#{{user.first_name}}
</td>
<td>
#{{user.email_address}}
</td>
<td>
<button type="button" class="btn btn-success" v-on= "click: onClick">Revert Password To Original</button>
</td>
</tr>
</div>
</table>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Vue.js file REP -->
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.min.js"></script>
<!-- Main Vue file-->
<script src="/js/main.js"></script>
</body>
</html>
Here is the accompanying javascript file with the Vue.js code: (main.js)
new Vue({
el: "#user",
data:
{
v1_user:[],
},
ready : function()
{
this.fetchV1IntermediaryUsers();
},
methods:
{
fetchV1IntermediaryUsers: function() {
this.$http.get('/api/v1_users',function(v1users) {
this.$set('v1_user',v1users);
});
}
}
});
You have multiple DIV's with the same ID's. ID's in HTML must be unique. When you start a VUE instance you bind it to an element, in this case which is in your code twice. Remove the ID's and add an ID to the <Body> tag, then check your code.
Hi I'm just playing around a bit with polymer and got a problem.
First here is the Page I'm editing: http://beta.sgbvm.de/app/site/berichte.php
The most things works pretty well (e.g. transitions etc) but when i scroll down the list and then click on a card the site stays at the bottom, but i want it to scroll up.
By now i searched the for nearly 5 hours but i cant figure out how to scroll back to the top after i click on a card.
I read something about accessing the shadowDom but i didnt unterstand what they where talking.
<html>
<head>
<title>SG Bergedorf/VM - mobile Seite</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/platform/platform.js"></script>
<link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
<link rel="import" href="../components/core-icon/core-icon.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.html">
<link rel="import" href="../components/paper-fab/paper-fab.html">
<link rel="import" href="../components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../components/paper-ripple/paper-ripple.html">
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
</head>
<body style="background-color:#F0F0F0;" unresolved touch-action="auto">
<core-drawer-panel>
<core-header-panel drawer style="background-color:#fff;">
<core-toolbar style="background-color:#3a3a3a;"><div class="bottom titleDrawer">SG B/VM</div></core-toolbar>
<core-menu class="drawer">
<div class="headline"><b>Wähle:</b></div>
<core-item icon="mail" label="Nachrichten" onClick="self.location.href='index.php'"></core-item>
<core-item icon="content-paste" label="Spielberichte" onClick="self.location.href='berichte.php'"></core-item>
</core-menu>
</core-header-panel>
<core-header-panel id="mainContainer" mode="waterfall-tall" main>
<core-toolbar class="tall animate">
<core-icon-button icon="menu" class="buttonDrawer" onclick="document.querySelector('core-drawer-panel').togglePanel();"></core-icon-button>
<div flex></div>
<div class="bottom indent title">Berichte</div>
</core-toolbar>
<core-animated-pages class="content" style="background-color:#F0F0F0;" transitions="hero-transition cross-fade slide-up">
<section id="page1" style="background-color:#F0F0F0;" cross-fade horizontal layout wrap>
/** Left out a bit here **/
</section>
<section id="page2" style="background-color:#F0F0F0;">
<div id="ergebnisBig" style="width:100%" cross-fade>
<table cellpadding='0' border='0' cellspacing='0' style='width:100%; background-color:#3a3a3a;' id="placeholderTable" hero>
<tr style="width:100%;">
<td style="width:40px;">
<paper-fab icon="arrow-back" role="button" class="mini" onclick='changeBack();' slide-up></paper-fab>
</td>
<td class='ergebnisBig' id='placeholderErgebnis'>
</td>
<td style="width:40px;">
<a name="top" id="top"> </a>
</td>
</tr>
<tr>
<td id="placeholderHalbzeit" class='halbzeitBig' colspan="3"></td>
</tr>
<tr>
<td id="placeholderTeams" class='teamsBig' colspan="3"></td>
</tr>
</table>
</div>
<div style="width:100%;" horizontal center-justified layout>
<div id="placeholderText" class="card" style="width:93%;padding:10px;" slide-up>
</div>
</div>
</section>
</core-animated-pages>
</core-header-panel>
</core-drawer-panel>
</body>
</html>
core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).
document.querySelector('#mainContainer').scroller.scrollTop = 0;
Ok So almost everything works fine for me. When I try to use this as a template in Dreamweaver and create web pages, the links work and the drop down menu works too. But the drop down only works if the pages I've created are in the same root directory. If I create other folders and save web pages in there, I can get to those pages from the drop down, but once I'm at the page that's inside of another folder and try to use the drop down to navigate from there, I can't. It won't drop down again. I have to click on another link that isn't inside of the folder, like the home link for example. I thought maybe it was a path issue but I've also tried to make the paths absolute instead of relative but that hasn't worked either. I have been Googling for days to see if anyone else has had this same issue come up for them but haven't had any luck.
I have a feeling it's going to be something so easy and simple that I'm not thinking of or overlooking but I'm just not having any luck.
Below is the code that I've been using as an example from the download. If anyone can point me in the right direction, that would be so wonderful!
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="../css/main.css">
<script src="../js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>In the Root</li>
<li>In Subfolder</li>
<li>Absolute</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"> <\/script>')</script>
<script src="../js/vendor/bootstrap.min.js"></script>
<script src="../js/plugins.js"></script>
<script src="../js/main.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>