I'm still looking for a way to set values directly into JavaScript function param in thymeleaf. How to set ${variable} to javascript function param directly? Help me.
function **loadDetailView**(no){
location.href = "/home/docs/holiday/detail-view/"+no;
}
<tbody id="docsTr">
<tr th:if="${size} == '0'">
<td colspan=3>No data.</td>
</tr>
<tr th:unless="${size} == '0'" th:each = "docs : ${list}"
style="cursor:pointer;" onclick="**loadDetailView**(1)">
<td th:text="${docs.board_no}">1</td>
<td th:text="${docs.name}">Brian</td>
<td th:text="${docs.holiday_type}">Annual</td>
</tr>
</tbody>
I think you might be mixing concepts here. A javascript function can't recieve a thymeleaf parameter, because what thymeleaf does is "compiling" the page before sending it to the client. Once it's on the client (and javascript may execute) there is no thymeleaf anymore.
What you can do is make each onclick call to loadDetailView have a different parameter in each <tr>, in the following way:
<tr th:unless="${size} == '0'" th:each = "docs, iter : ${list}"
style="cursor:pointer;" onclick="loadDetailView([[${iter.index}]])">
Which would call loadDetailView with 0, 1, 2, etc depending on the row.
Related
please assist with the below. I am trying to display an arraylist returned from the controller and display it to an Html table but I get the above error.
here is my controller code:
#GetMapping(value="/chart" )
public List<List<CanvasjsChartData.DataPointModel>> chart(Model modelMap) {
List<List<CanvasjsChartData.DataPointModel>> dataPointsList = canvasjsChartService.getCanvasjsChartData();
modelMap.addAttribute("dataPointsList", dataPointsList);
System.out.println("dataPointsList");
return dataPointsList;
}
and this is the table I want to display my list in
<table class="table" id="dataTable" style="width:100%">
<thead>
<th>Level</th>
<th>Occurences</th>
</thead>
<tbody>
<tr th:each="item :${dataPointsList}">
<td th:text="${item.LEVEL}"> </td>
<td th:text="${item.OCCURENCES}"> </td>
</tr>
</tr>
</tbody>
I know for sure the ArrayList has the data I require as shown below I dont know why its giving me the error
Your debug shows you have an List<List<CanvasjsChartData.DataPointModel>> (two Lists inside of each other) -- when your HTML is expecting List<CanvasjsChartData.DataPointModel>. You should fix that in your controller/model by only returning a single list.
You could also display your HTML like this (where you loop over the 0th element of the outer array):
<tr th:each="item :${dataPointsList[0]}">
<td th:text="${item.LEVEL}" />
<td th:text="${item.OCCURENCES}" />
</tr>
These are my simple Thymeleaf table HTML file and Spring MVC controller codes. First below is my table image.
I try to make some html codes to transfer the post id value to view codes when the 'Edit' or 'Delete' link are clicked, but I have no idea how to do. These are my Spring MVC Controller codes and view.html codes.
#Controller
public class PostController {
#Autowired
private PostService postService;
#RequestMapping("/posts/view/{id}")
public String view(#PathVariable("id") Long id, Model model) {
Post post = postService.findById(id);
model.addAttribute("post", post);
return "posts/view";
}
And,
<table id="blogTable" border="1" width ="1000" height="400" align = "center">
<thead>
<tr>
<th>Post ID</th>
<th>Post Title</th>
<th>Post Content</th>
<th>Date</th>
<th>Author</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr th:each="post : ${posts}">
<td th:text="${post.id}">Post ID</td>
<td th:text="${post.title}">Post Title</td>
<td th:text="${post.body}">Post Content</td>
<td th:text="${post.date}">Date</td>
<!-- <td th:text="${post.auther.userName()}">Author</td> -->
<td>
Edit<br/> ==> How to transfer the post.id parameter to th:href?
Delete ==> How to transfer the post.id parameter to th:href?
</td>
</tr>
</tbody>
</table>
I am a beginner in HTML and Spring. How can I put post.id value into view mvc controller through th:href tag?
Use th:href like described in the documentation
th:href is an attribute modifier attribute: once processed, it will compute the link URL to be used and set the href attribute of the tag to this URL.
We are allowed to use expressions for URL parameters (as you can see in orderId=${o.id}). The required URL-encoding operations will also be automatically performed.
If several parameters are needed, these will be separated by commas like #{/order/process(execId=${execId},execType='FAST')}
Variable templates are also allowed in URL paths, like #{/order/{orderId}/details(orderId=${orderId})}
For example (notice the th:href and the parameter postId that receives the value from your variable post):
<td>
Edit<br/> ==> How to transfer the post.id parameter to th:href?
</td>
You can add parameters in parentheses:
<a th:href="#{/index(param1='value1',param2='value2')}">
Thymeleaf evaluates the above to:
<a href="/index?param1=value1,m2=value2">
For example, suppose we set default value to two parameters; name="Dracula" and age = 25.
<a th:href=#{/person(name=${name},age=${age})}></a>
I used in this format and work fine.
<a th:href="#{${urlBase} + '/#!/pedido' + ${other.value}" target="_blank">Link</a>
You can something try like following:
Edit<br/>
Delete
I've created an web app that searches for online car ads and populates the page with a few tables after a post request.It looks like this:
After Search:
Every table element has a save button which should save those values to the database but my problem is that the page gets refreshed after submitting a post request. How can I do this without refreshing the page?
Table:
<form th:action="#{/saveAd}" method="POST">
<table class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th>Imagine</th>
<th>Titlu Anunt</th>
<!-- <th style="width: 16.66%">Link</th> -->
<th>Pret</th>
<th>Oras</th>
</tr>
</thead>
<tbody id="myTable">
<th:block th:each="element : ${lista}">
<trth:onclick="'javascript:rowClicked(\'' + ${element.url} + '\');'">
<td><img th:src="#{${element.img}}" class="size" /></td>
<td th:text="${element.title}"></td>
<td th:text="${element.pret}"></td>
<td th:text="${element.oras}"></td>
<td><input class="btn btn-danger" type="submit"value="Save"></td>
</tr>
</th:block>
</tbody>
Controller:
#RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(#ModelAttribute("adValue") AdValue adValue) {
System.out.println(adValue.getImg());
System.out.println(adValue.getLink());
System.out.println(adValue.getOras());
System.out.println(adValue.getPret());
System.out.println(adValue.getTitle());
return "home";
}
And also, how could I bind the list to a model object after pressing the save button?
I guess you may like this project. It is similar with what you need :
https://github.com/adinafometescu/tutorials/tree/master/spring-elasticsearch
You can use .bootstrapTable(). It a very method to update dynamically your table.
<table id="car-table" class="table table-striped">
<thead>
<tr>
<th data-field="id">Id</th>
<th data-field="title">Title</th>
<th data-field="price">Price</th>
<th data-field="city">City</th>
<th data-width="10" data-formatter="saveButtonFormatter"/>
</tr>
</thead>
</table>
The beauty is that it will map the data-field to a java object.
js stuff:
function saveButtonFormatter(value, row, index){
var adId = row.id;
return "<button class=\"btn btn-danger \" data-title=\"Save\"
data-toggle=\"modal\" onclick=\"saveAd(\'"+adId+"\')\"
</button>"
}
The function saveAd(adId) will call the rest endpoint and will update the bootstrap table on success.
I see that in your thymeleaf you don't have inputs. I suggest to not post your entire object if you don't need user input, just the id.
// anotate the controller class with #RestController
#Autowired
AdService adService;
#PostMapping(path = "/ad/{id}")
public ResponseEntity<?> saveAd(#PathVariable("id") String id) {
adService.saveAd(id);
return new ResponseEntity<>(HttpStatus.ACCEPTED);
}
P.S : don't write code in Romanian :D
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
when i click my table row , i get info object passed to function $root.goToEvent. But i want to pass the upper level of that object , in this case events[[1]] together with info and rules. Screens and code are attached. thanks in advance.
HTML
<table class="mainTable" style="width:820px" border="1" data-bind="with: dataToShow">
<tr>
<td width="200px" valign="top">
<!-- Events List -->
<table class="events" >
<thead><tr><th >События</th></tr></thead>
<tbody id="eventsTable" data-bind="foreach: events">
<!-- ko with: info -->
<tr id="trEvent" data-bind="css: { selected : $data==$root.chosenEvent()}, click: $root.goToEvent">
<td data-bind="text: event_title"></td>
</tr>
<!-- /ko-->
</tbody>
</table>
OBJECT:
https://flic.kr/p/nvsrQB
One option it to bind your function with the appropriate context (this) and initial argument.
Something like:
data-bind="click: $root.goToEvent.bind($root, $parent)"
This would call goToEvent with the value of this set to $root and the first argument being the parent context (an event object in your code).