I want to render a table dynamically, based on ajax requests. The Backend is set up properly and when I execute the code the data from the response package is successfully loaded into my variables.
However, when viewing it in the browser, console logs the following error:
[Vue warn]: Failed to generate render function:
SyntaxError: Unexpected token - in
with(this){return _c('div',{attrs:{"id":"app"}},[_m(0),_v(" "),_c('table',[_c('tbody',[_c('tr',_l((header),function(head-item){return _c('th',{domProps:{"textContent":_s(head-item)}})})),_v(" "),_l((data),function(entry){return _c('tr',_l((entry),function(item){return _c('td',{domProps:{"textContent":_s(item)}})}))})],2)])])}
(found in <Root>)
My app.js file:
new Vue({
el: '#app',
data: {
header: [],
data: [],
},
mounted() {
axios.get('/contacts').then(response => this.load_response(response));
},
methods: {
load_response(response) {
this.header = response.data.header;
this.data = response.data.data;
}
}
});
And my html-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">
<title>TestProject</title>
<body>
<div id="app">
<table>
<tr>
<th>TestHeader/th>
</tr>
<tr>
<td>TestItem</td>
</tr>
</table>
<table>
<tr>
<th v-for="head-item in header" v-text="head-item"></th>
</tr>
<tr v-for="entry in data">
<td v-for="item in entry" v-text="item"></td>
</tr>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
When I try it in the browser, the first (dummy) table is shown for half a second or so, before it gets hidden. Then the page is blank.
EDIT: The json received from the server is in the form
{
header: [foo, bar, foobar...],
data:[[foo, bar, footer], [foo2, bar2, foobar2], ...]
}
You cannot use a dash in an identifier in v-for. Try
<th v-for="headItem in header" v-text="headItem"></th>
Dash isn't a valid character for any JavaScript variable.
Related
I might sound strange with this question but I'm very new into those three technologies - Spring, Thymeleaf and Dropzone.
I am currently trying to get a html page resulting from a response from my Spring Controller + Thymeleaf with a request from a Dropzone file upload.
So my Controller receive the file from dropzone, reads it, apply some parsing and return the result as a html page, like a report.
It works as expected if I use a simple form like the one available in Spring tutorial site.
But when I put Dropzone I simply can't get the result from this html page.
I'll leave here my upload html (I've been trying to get the result and print into a div, without success):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My upload form with Dropzone</title>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<script>
Dropzone.options.myDropZone = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
maxFiles: 1,
paramName: "file",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
var submitButton = document.getElementById("btnStartUpload");
submitButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(file, xhr, form) {
form.append("file", file);
});
this.on("success", function(file, response) {
console.log(response);
$(".result").html(response);
});
}
}
</script>
</head>
<body>
<div id="dropzone">
<form id="myDropZone" class="dropzone" th:action="#{/upload}" method="POST" enctype="multipart/form-data">
<div class="previews"></div>
<button id="btnStartUpload">Submit file!</button>
</form>
</div>
<div id="result" class="result"></div>
</body>
My Controller:
#PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String uploadFile (#RequestParam("file") MultipartFile file, ModelMap model)
{
try
{
// parse file and insert a collection into attribute, to be used in the 'result' page.
model.addAttribute("fields", /*collection*/);
return "result";
}
catch (IOException e)
{
e.printStackTrace();
return "failed";
}
}
And then my result html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My result page</title>
</head>
<body>
<table>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
</tr>
<th:block th:each="field : ${fields}">
<tr>
<td th:text="${field.name}"></td>
<td th:text="${field.value}"></td>
<td th:text="${field.description}"></td>
</tr>
</th:block>
</table>
</body>
</html>
Here is my Service ( It just gets a list of entities )
#Service
public class ProcedureService {
#Autowired
ProcedureRepository procedureRepository;
public List getProceduresList() {
List<Procedure> procedureList;
procedureList = procedureRepository.findAll();
return procedureList;
}
}
Here is my Controller. It just puts list he gets to view.
#Controller
public class ServicesController {
#Autowired
ProcedureService procedureService;
#GetMapping("/services")
public String getCustomer(Model model) {
List<Procedure> procedures = procedureService.getProceduresList();
model.addAttribute("procedures", procedures);
return "services";
}
}
And here is my real problem. Thyme leaf just doesn't see the entity in a List ( it sees the list though ). Here is my screen and full code of View
<!DOCTYPE html>
<html lang="en">
<head>
<title>SpringMVC + Thymeleaf + Bootstrap 4 Table 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.0.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Customer Table</h1>
<div class="row col-md-7 table-responsive">
<table id="customerTable" class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Street</th>
<th>Postcode</th>
</tr>
</thead>
<tbody>
<tr th:each="procedure: ${procedures}">
<td th:text="${procedure.}" />
<td th:text="${procedure.getId}" />
</tr>
</tr>
</tbody>
</table>
</div>
</div>
I forgot about html lang="en" xmlns:th="http://www.thymeleaf.org" in html so th wasn't really working.
I am new to angular and i want to implement jquery datatable in my project.When i implement in a demo project it working perfectly but when i implement on my working project it shows an error,below is my codes
my angular.json file
here i add
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
],
i create a module as admin under this module i create a component as manage-blogs and in tis component i bind dynamic data in table.
my index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin Panel</title>
<base href="/">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1,
user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<app-root></app-root>
<!-- jQuery 2.2.3 -->
<script src="assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.6 -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
my manage-blogs-component.ts file
import { Component,ViewChild, OnInit } from '#angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';
declare var $;
#Component({
selector: 'app-manage-blogs',
templateUrl: './manage-blogs.component.html',
styleUrls: ['./manage-blogs.component.css']
})
export class ManageBlogsComponent implements OnInit {
title = 'Manage Blogs';
blogs: Blog;
error: string;
#ViewChild('dataTable') table;
dataTable: any;
constructor(private blogService: BlogService) { }
ngOnInit():void {
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable();
this.blogService.getBlogs().subscribe(
(data: Blog) => this.blogs = data,
error => this.error = error
);
}
}
my manage-blog-component.html file
<div class="box-body">
<table #dataTable class="table table-bordered table-striped">
<thead>
<tr>
<th>#ID</th>
<th>Image</th>
<th>Title</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let blog of blogs">
<td>{{blog.id}}</td>
<td><img src="{{blog.image}}" ></td>
<td>{{blog.title}}</td>
<td>{{blog.created_at | date: 'mediumDate'}}</td>
<td class="action">
Edit
<a href="#" class="btn btn-danger btn-
sm">Delete</a>
</td>
</tr>
</tbody>
</table>
{{error}}
</div>
when i load the page it shows an error
ERROR TypeError: this.dataTable.DataTable is not a function
But in another demo project i put avove code on app.component file it working.
If you are using Angular, Try to use angular-datatable. From my experience, this is the best.
https://www.npmjs.com/package/angular-datatables.
I'm new to angular and I don't know why it looks odd (table not looks like proper ) while running snipet, it doesn't give me look and feel like datatable. I want to give it UI like this, i try to chnage version of css also, but it did not help. Can any one help me to solve this issue. Any help will be appreciated. Thanks in advance.
//Angularjs and jquery.datatable with ui.bootstrap and ui.utils
var app=angular.module('formvalid', ['ui.bootstrap']);
app.controller('validationCtrl',function($scope){
var table = $('#ajaxExample').DataTable({
"ajax" : {
"url": "http://datatable.getsandbox.com/datatable",
"dataSrc": "users",
"headers": "Content-Type : application/json"
},
"columns" : [
{ "data": "name" },
{ "data": "age" },
{ "data": "position" },
{ "data": "office" },
],
});
});
table tr th{
background:#337ab7;
color:white;
text-align:left;
vertical-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datatable using jquery.datatable in angularjs</title>
<link rel='stylesheet prefetch'
href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch'
href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
</head>
<body>
<div class="container" ng-app="formvalid">
<div class="panel" data-ng-controller="validationCtrl">
<div class="panel-heading border">
<h2>Data table using jquery datatable in Angularjs</h2>
</div>
<div class="panel-body">
<table id="ajaxExample" class="display" width="100%" ui-jq="datatable" ui-options="ajaxOptions">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js'></script>
<script
src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js'></script>
<script
src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
</body>
</html>
To attach bootstrap table styling from the dataTables.bootstrap.min.css file, you need to add classes to your table element.
class="table table-striped table-bordered"
Otherwise you get the standard bootstrap table styling.
If you use the HTML tab on the page you link to, it shows you how the table on that page is styled.
In controller i have function public ActionResult Index(int id,int test= 0,int to=10){} I try to change value test from view on click to get test+=10 but i dont know how. I tryed with action link and ajax but its not working. Any ideas?
My view code :
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Countries</title>
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<table>
<tr>
<td><h3>Matches</h3></td>
</tr>
<tr>
</tr>
#foreach (var i in Model.ListMatch)
{
<tr>
<td>#Html.ActionLink(i.Description, "", new { id = i.Id })</td>
</tr>
}
</table>
</div>
</body>
</html>
I return results to ng-view. Can i do something like
This question isn't explained very well, but from what I gather you want to be able to make a change to a value without reloading the page or leaving that view.
In order to do this you have to use AJAX. I know you said you tried AJAX but perhaps you got something wrong. Try this:
$('#yourbutton').click(function() {
$.post( "/YourController/YourFunction", function() {
alert( "success" );
});
});