I plan on building a very simple webapp on Go using it's html/template module for the front end.
One typical function for the app is as follows:
Get some data from external app
Display that data in a table in one of the Go templates
Permit the user to edit certain rows, sort etc.
Retrieve data from the table to be stored in DB in backend, or sent on to other application.
Very early version of the template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Tran id</th>
<th scope="col">Assembly Instructions</th>
<th scope="col">Miscalleanous</th>
</tr>
</thead>
<tbody>
{{ range . }}
<tr>
<th scope="row">{{.Id}}</th>
<td>{{.TranId}}</td>
<td>{{.Memo}}</td>
<td>{{.AssemblyInstructions}}</td>
<td>{{.AssemblingUnits}}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<!-- /container -->
</body>
</html>
I would like to parse data from the table element and store to db, or process further in subsequent request to another service. Can anyone recommend some ways this could be achieved?
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 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">
I am using bootstrap4 DataTable.I am using spring boot. I have passed my data from my controller like bellow..
List<User> list = new ArrayList<>();
#GetMapping(value = "/staff-details")
public String staffDetails(Model model) {
model.addAttribute("staffList",list );
return "staff-details";
}
It is working fine when like bellow..that means there is no loop
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
When I want to populate data dynamically from database, it is not working..I am using like bellow..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src=" https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
fixedHeader: true
});
});
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr th:each="user: ${staffList}">
<td th:text="${user.firstName +' '+ user.lastName}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.restaurantId}"></td>
<td th:text="${user.restaurantBranchId}"></td>
<td th:text="${user.userRole}"></td>
</tr>
</tbody>
</table>
</body>
Please help me why it is not working in loop..
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>
I've added a kendoDropDownList in one of the cells in a kendoGrid, and it works fine at first. However, when I click on a column header to sort, the cell loses its formatting. Anyone have any idea how to prevent this? Here's a simple sample:
<html>
<head>
<title>test</title>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/kendoui.web.2013.2.716.open-source/js/jquery.min.js"></script>
<script src="/kendoui.web.2013.2.716.open-source/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<table class="gridTable">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="options">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="wrap">Item</td>
<td>
<select class="menuBar" style="width:80px;">
<option>Big</option>
<option>Medium</option>
<option>Small</option>
</select>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$(".gridTable").kendoGrid({
sortable: true
});
$(".menuBar").kendoDropDownList({
});
});
</script>
</body>
</html>
The Grid is reconstructed each time you perform Page/Sort/Group etc. For such cases you need to use the dataBound event of the Grid to re-initialize any widgets or executed any JavaScript code that affects what is displayed in the Grdi.