I am using Spring MVC 3 and Thymeleaf. I want to display string in the table but there are no results (blank table cell). What am I doing wrong? My controller class:
#Controller
#RequestMapping(value="table", method = RequestMethod.GET)
public class TableController {
#Autowired
DaneEndpoint daneEndpoint;
public String tabela(Model model){
model.addAttribute("tytul", daneEndpoint.getAll().get(0));
model.addAttribute(model);
return "table";
}
}
and html page (table.html):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3 align="center">table</h3>
<div align="left">
<form action="table.html" th:object="${tytul}" method="get">
<fieldset>
<div align="center">
<table border="1">
<thead>
<tr>
<th th:text="">tytul</th>
</tr>
</thead>
<tbody>
<tr>
<td th:text=""><span th:text="#{table.tytul}"/></td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Thanks for help.
<span th:text="#{table.tytul}"/>
`
fetches value from message properties so if table.html is opened directly in browser,it will be blank
If this page is accessed through application, since ,
<th th:text="">
is not valid thymeleaf expression syntax(because of empty string) , parse error will occur.. And
<td th:text=""><span th:text="#{table.tytul}"/></td>
contains span as child of td so, th:text need not be included in td as th:text in td will replace ultimately..
further meta tag is not closed..
Try this
> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head>
> <title></title>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> </head> <body>
> <h3 align="center">table</h3>
> <div align="left">
> <form action="table.html" th:object="${tytul}" method="get">
> <fieldset>
> <div align="center">
> <table border="1">
> <thead>
> <tr>
> <th >tytul</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td><span th:text="#{table.tytul}"/></td>
> </tr>
> </tbody>
> </table>
> </div>
> </fieldset>
> </form>
> </div> </body> </html>
And if value on table need to be displayed when directly opened in browser for prototyping purpose, try this
> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head>
> <title></title>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body>
> <h3 align="center">table</h3>
> <div align="left">
> <form action="table.html" th:object="${tytul}" method="get">
> <fieldset>
> <div align="center">
> <table border="1">
> <thead>
> <tr>
> <th >tytul</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td><span th:text="#{table.tytul}"/> <span th:remove="all">content</span></td>
>
> </tr>
> </tbody>
> </table>
> </div>
> </fieldset>
> </form>
> </div> </body> </html>
Seems like you were missing an ending </tr> and ending </div>. try adding that.
Related
Im trying to generate and pdf and show it using Laravel-7 but when i generate my pdf it is blank
So this is my ProductController and its PDF method:
public function PDFProducts(){
$products = Product::all();
$pdf = \PDF::loadView('pdf-products', compact('products'));
return $pdf->stream('products.PDFProducts');
}
And this is my route:
Route::get('/pdfproduct', 'Backend\ProductController#PDFProducts')->name('products.PDFProducts');
And this is my pdf view named pdf-products.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Productos</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-body">
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($products as $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td >{{ $product->coin }}</td>
<td class="numero">{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td class="numero">{{$product->list_priceUSD}}</td>
<td class="numero">{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
</tr>
#endif
#endforeach
</tbody>
</table>
</div><!-- /.card-body -->
</body>
</html>
And in my view-products.blade.php i have the following button:
<a title="PDF" id="pdf" class="btn btn-sm btn-info btn btn-success" href="{{route('products.PDFProducts')}}" ><i class="fas fa-print" ></i></a>
And this is how my PDF looks like:
This is what i get in my dev tools console while inspecting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body cz-shortcut-listen="true">
<div class="container"></div>
</body>
</html>
And not my h1
Try edit your controller to:
public function PDFProducts(){
$products = Product::all();
view()->share('products', $products);
$pdf = \PDF::loadView('pdf-products',
compact('products'));
return $pdf->stream('products.PDFProducts');
}
I have a spring boot app that uses thyemeleaf for html and boostrap for design.
I'm looking for a table that can do the following functions
Sort option in the header. Upon clicking it sort all rows according to the value of the particular col
Allow search of values in one particular row
Limit the rows showed in page. E.g. page 1 shows 30 rows, clicking on 2 shows 30 rows
I looked around and saw usage of Javascript but I'm not sure how to use Javascript. Any help if appreciated!
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Coronavius tracker application</h1>
<p class="lead">This application tracks the coronavirus situation around the globe</p>
<hr class="my-4">
<div class="container">
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<p class="font-weight-bold" th:text="${worldPop}"></p>
</h3>
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
Using datatables, I was able to get the table with the desired function. My code is as attached
<!DOCTYPE html>
<!-- To use thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
<title>Home</title>
</head>
<body>
<!-- Creates a big gray field -->
<div class="jumbotron">
<!-- Big words -->
<h1 class="display-4">Coronavirus tracker</h1>
<!-- Big words description -->
<p class="lead">Tracking this pandemic one at a time</p>
<!-- Marks bottom part of jumbotron -->
<hr class="my-4">
<div class="container">
<!-- Gride layout with each col detonated by class ="col" -->
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
<p class="font-weight-bold" th:text="${percentage}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<div class="font-weight-bold" th:text="${worldPop}"></div>
</h3>
</div>
</div>
</div>
</div>
<!-- #id give id to the table and match the javascript
#page-length to match the default entries per page
#data-order to set the default way to display order. It is now 1st col in descending order -->
<table class="table table-striped" id="dataTable" data-page-length='50' data-order='[[1, "desc"]]'>
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
I get an error when trying to open /users. I can’t figure out how to fix a mistake in my code. The error appeared after I added httpSecurity.
Class Controllers:
#GetMapping("/users")
public String userPage(Model m) {
m.addAttribute("Users", dao.findAll());
return "users";
}
users.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="layout::head"> </head>
<body>
<div th:include="layout :: navigationPanel"></div>
<h1>User list:</h1>
<div th:if="${#lists.isEmpty(Users)}">
No users...
</div>
<table th:if="${!#lists.isEmpty(Users)}">
<tr> <th>UserID</th>
<th>Name</th>
<th>Surname</th>
<th>Login</th>
<th>Password</th>
<th sec:authentication="!isAuthenticated()">Edit</th>
<th sec:authorize="!isAuthenticated()">Delete</th>
</tr>
<tr th:each="Users:${Users}">
<td th:text="${Users.userid}"></td>
<td th:text="${Users.name}"></td>
<td th:text="${Users.surname}"></td>
<td th:text="${Users.login}"></td>
<td th:text="${Users.password}"></td>
<td sec:authentication="!isAuthenticated()"><a th:href="#{/edit/__${Users.userid}__}">Edit</a></td>
<td sec:authentication="!isAuthenticated()"><a th:href="#{/delete/__${Users.userid}__}" >Delete</a></td>
</tr>
</table>
<div th:include="layout::footer"></div>
</body>
</html>
In #GetMapping you return "users" but your template name is "user-list"
and write th:if={!Users.isEmpty()} this one creates an issue. Do you check
whether you get the output from your database or not
Add the following dependency to your pom.xml
org.thymeleaf.extras.
thymeleaf-extras-springsecurity4.
Change your html tag to <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
Right now when I am parsing some html (front page of hacker news for example), it works fine. I can call class on something like doc = Nokogiri::HTML(open('news.ycombinator.com')) and I will get back Nokogiri::HTML::Document < Nokogiri::XML::Document
The issue is, in the terminal, I am seeing the HTML and not the actual Nokogiri Element. I want to see it because it shows me valuable info like the Nokogiri Elements Children, or an array of links or or or.
I get the HTML using the Watir Gem using the following method:
[1] pry(main)> browser = Watir::Browser.new(:firefox)
#<Watir::Browser:0x2c5654b29ef00c22 url="about:blank" title="">
[2] pry(main)> browser.goto('news.ycombinator.com')
"http://news.ycombinator.com"
[3] pry(main)> browser.html
Where browser.html is an instance variable (I think?) containing un-parsed HTML.
Here is what I get back right now if I call doc = Nokogiri::HTML.parse(browser.html)
And here is what I would like to get back:
Where am I going wrong?
adding raw code as requested:
Nokogiri::HTML::Document < Nokogiri::XML::Document
[31] pry(main)> doc = Nokogiri::HTML.parse(browser.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html op="news">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="news.css?stXbi7LCyutClfTUMe1b">
<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
<title>Hacker News</title>
</head>
<body>
<center><table id="hnmain" width="85%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f6ef">
<tbody>
<tr><td bgcolor="#ff6600"><table style="padding:2px" width="100%" cellspacing="0" cellpadding="0" border="0"><tbody><tr>
<td style="width:18px;padding-right:4px"><img src="y18.gif" style="border:1px white solid;" width="18" height="18"></td>
<td style="line-height:12pt; height:10px;"><span class="pagetop"><b class="hnname">Hacker News</b>
new | past | comments | ask | show | jobs | submit </span></td>
<td style="text-align:right;padding-right:4px;"><span class="pagetop">
login
</span></td>
</tr></tbody></table></td></tr>
<tr id="pagespace" title="" style="height:10px"></tr>
<tr><td>
<table class="itemlist" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="athing" id="19388248">
<td class="title" valign="top" align="right"><span class="rank">1.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388248" href="vote?id=19388248&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Getting Too Absorbed in Your Side Projects<span class="sitebit comhead"> (<span class="sitestr">bennettnotes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19388248">42 points</span> by _davebennett <span class="age">1 hour ago</span> <span id="unv_19388248"></span> | hide | 27 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19384878">
<td class="title" valign="top" align="right"><span class="rank">2.</span></td> <td class="votelinks" valign="top"><center><a id="up_19384878" href="vote?id=19384878&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Facebook’s Data Deals Are Under Criminal Investigation<span class="sitebit comhead"> (<span class="sitestr">nytimes.com</span>)</span>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="subtext">
<span class="score" id="score_19384878">661 points</span> by tysone <span class="age">13 hours ago</span> <span id="unv_19384878"></span> | hide | 156 comments </td>
</tr>
<tr class="spacer" style="height:5px"></tr>
<tr class="athing" id="19388091">
<td class="title" valign="top" align="right"><span class="rank">3.</span></td> <td class="votelinks" valign="top"><center><a id="up_19388091" href="vote?id=19388091&how=up&goto=news"><div class="votearrow" title="upvote"></div></a></center></td>
<td class="title">
Krita 4.2.0: First painting application with HDR support on Windows<span class="sitebit comhead"> (<span class="sitestr">krita.org</span>)</span>
</td>
...
It sounds like you want:
doc = Nokogiri::HTML browser.html
I have created the application that stores the Information about dogs in the database,while running the project the tables where created but dogs information were not updates.
There is an error in running this below html file
The following code is not working
<html lang="en">
<head>
<!-- META SECTION -->
<title>Dog Rescue</title>
<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" />
<!-- END META SECTION -->
<!-- BEGIN STYLE -->
<style>
table, th, td {
border: 1px solid black;
padding: 1px;
}
</style>
<!-- END STYLE -->
</head>
<body>
<h2>Current Dogs In Rescue</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Rescue Date</th>
<th>Vaccinated</th>
</tr>
</thead>
<tbody>
<tr th:each="dogs : ${dogs}">
<td th:text="${dogs.id}">Text ...</td>
<td th:text="${dogs.name}">Text ...</td>
<td th:text="${dogs.rescued}">Text ...</td>
<td th:text="${dogs.vaccinated}">Text...</td>
</tr>
</tbody>
</table>
</div>
<h2>Add A Dog</h2>
<form action="#" th:action="#{/}" method="post">
<label>Name<input type="text" name="name" id="name"></input></label>
<label>Vaccinated<input type="text" name="vaccinated" id="vaccinated"></input></label>
<label>Rescued<input type="text" name="rescued" id="rescued"></input></label>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
The html file is not fetching the information.
Kindly help me
Whole Project is available in
https://github.com/arulsuju/DogRescue.git
You are using the same variable name for iteration as the list variable (dogs)
, Consider using different name for iteration variable like (dog), so the code should be:
<tr th:each="dog : ${dogs}">
<td th:text="${dog.id}">Text ...</td>
<td th:text="${dog.name}">Text ...</td>
<td th:text="${dog.rescued}">Text ...</td>
<td th:text="${dog.vaccinated}">Text...</td>
</tr>