I have an HTML file that needs to update on the fly. Basically, I want to populate that HTML file based upon the details fetched from Database. Now I don't know how to update the HTML using any java API.
Example:
<head>
<title>Sample</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Sample File</h1>
<p>
<span class="abc">abc</span>
<span class="description"> Sample Document</span>
</p>
<table>
<tr>
<th class="label">Title</th>
<td>Sample Value</td>
</table>
</body>
Then Updating:
<table>
<tr>
<th class="label">Title1</th> <-------------- Updating the table value
<td>123</td>
</table>
Any suggestion will be really helpful.
If you need to constantly update the data on the page, without reloading it. Pay your attention to EventSource (js).
const source = new EventSource(url);
source.onmessage = function (e) {
handleResponse(e);
};
And on the java side it uses a controller that returns stream.
#RequestMapping(value = "/checkData", method = {RequestMethod.GET}, produces = "text/event-stream;charset=UTF-8")
...
return "data:" + data + "\n\n";
Related
been trying to get comfortable with Spring Boot/Thymeleaf/frontend development in general. I'm currently using a table on the frontend to display a list of objects from the backend, as well as a form to allow users to view properties of each item in the list.
I feel like the way I'm doing this is really weird and feel that there could be a better way. Would appreciate any tips/feedback, thank you.
HTML/Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Gambler Card List</title>
<link th:href="#{/css/styles.css}" rel="stylesheet" />
</head>
<body>
<h1>Gambler Card List</h1>
<div class="cardlist-wrapper">
<div class="cardlist-names">
<form action="/gambler/cardlist" method="get">
<table class="cardlist-table">
<tr th:each="card : ${cardList.getCardList()}">
<td>
<input th:class="card-btn"
th:attr="id=${{card.getId()} == {currentCard.getId()} ? 'selected' : ''}"
type="submit" th:value="${card.getName()}" name="cardName">
</td>
</tr>
</table>
</form>
</div>
<div class="cardlist-description">
<h4 th:text="${currentCard.getDescriptionTitle()}"></h4>
<p th:text="${currentCard.getDescription()}"></p>
</div>
</div>
</body>
</html>
Controller
#RequestMapping(value = "gambler/cardlist")
public String baseCardList(Model model,
#RequestParam(value="cardName", required=false) String cardName) {
model.addAttribute("currentCard", cardList.getCardByName(cardName));
model.addAttribute("cardList", cardList);
return "gambler/cardlist";
}
Output (need 10 rep to post image, so here's a link)
One potential improvement/simplification is to remove the form and replace the inputs with anchors. The anchors would look something like this (not tested!):
<a th:href="#{/gambler/cardlist(cardName=${card.name})}">
<button th:text="${card.name}"
th:classappend="${card.id == currentCard.id ? 'selectedButton' : 'deselectedButton'}">Card Name</button>
</a>
You can style selectedButton and deselectedButton as you wish.
I was going through spring MVC tutorials and came across ModelAndView.
My JSP view looks like this,
<%#taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%>
<html>
<head>
<title>Spring MVC </title>
</head>
<body>
<h2>Submitted Student Information</h2>
<table>
<tr>
<td>Name</td>
<td>${student.getName()}</td>
</tr>
<tr>
<td>Age</td>
<td>${student.getAge()}</td>
</tr>
<tr>
<td>ID</td>
<td>${student.getBranch()}</td>
</tr>
</table>
</body>
</html>
It worked when I set both attribute name and attribute value in controller like the following,
ModelAndView mv = new ModelAndView();
mv.setViewName("result");
Student student = new Student("arun2", "CSE", 22);
mv.addObject("student",student);
return mv;
Then I came across other overloaded method ModelAndView.addObject(Object attributeValue) and I tried setting only attribute value mv.addObject(student); But this time it doesn't show student details in the browser.
My questions:
Is it possible to access those values in JSP by just setting attribute value as i did second-time mv.addObject(student);.
If yes, How? If not, Why do we have such overloaded method? Why do we need to set only value if we can't access it in the view (JSP)?
I went through the javadocs, But didn't find anything that could make me understand.
Yes, you can do it like that and access the parameters,but need to pay some attention.
Check the API for addObject at ModelAndView,it will shows method as below:
Then,let's look at the definition of ModelMap.addAttribute(Object)
It shows using a generated name,the definition of generated name listed as below:
So,if you just want to use the mv.addObject(student) method,you can access data in your jsp page as below:
<%#taglib uri = "http://www.springframework.org/tags/form" prefix = "form"%>
<html>
<head>
<title>Spring MVC </title>
</head>
<body>
<h2>Submitted Student Information</h2>
<table>
<tr>
<td>Name</td>
<td>${student.name}</td>
</tr>
<tr>
<td>Age</td>
<td>${student.age}</td>
</tr>
<tr>
<td>ID</td>
<td>${student.branch}</td>
</tr>
</table>
</body>
</html>
If the object is a Group class, then you can get value via ${group.name}
And pay attention that the ModelAndView is from org.springframework.web.servlet.ModelAndView
Also,I suggest you use the EL Expressions to access data in your jsp page directly.
I want to display data from database in the browser with Spring MVC. Everything is alright, except my Thymeleaf template for each loop. Something is wrong there.
How can I display id data in ID row and name data in Name row iterating through the collection of objects with for each loop?
Source code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1">
<tr style="font-size: 13">
<td>ID</td>
<td>Name</td>
</tr>
<tr th:each="count : ${id}">
<td><p th:text="${count}" /></td>
<td><p th:text="${name}" /></td>
</tr>
</table>
</body>
</html>
Your question is not very clear, as you didn't specify your count object, and didn't show your controller.
Well supposing you have some entity Count with fields id and name, which you persist in the corresponding table of your database, and which you want to display in the Thymeleaf template.
To retrieve data from the database you need some Service or Repository class, that should have method that returns a List of your entities, example of such service method listAll():
public List<Count> listAll() {
List<Count> counts = new ArrayList<>();
countRepository.findAll().forEach(counts::add);
return counts;
}
Then you you need to set up the request mapping in your controller and add in that method an attribute to the model object, that will be a result of execution listAll() method. It may be done like:
#RequestMapping("/list")
public String countsList(Model model) {
model.addAttribute("counts", countService.listAll());
return "list";
}
Finally answering your question, your list.html template should contain the block:
<div th:if="${not #lists.isEmpty(counts)}">
<h2>Counts List</h2>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr th:each="count : ${counts}">
<td th:text="${count.id}"></td>
<td th:text="${count.name}"></td>
</tr>
</table>
</div>
Read more info in Thymeleaf Documentation - Iteration Basics section.
I have the following basic html table with a Java function to print only the table content However the Print button does nothing when clicked,I figure probably the java coding is the issue, however it is not working could I get a third pair of eyes to assist please
<html>
<body>
<table border="1" cellpadding="3" id="printTable">
<tbody><tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody></table>
<br />
<br />
<button>Print me</button>
<script>
function printData()
{
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click',function(){
printData();
})
</script>
</body>
</html>
When working with javascript, it is often useful to look at your browser's console. After opening this page, mine has the error:
ReferenceError: $ is not defined
$ is a global variable inserted by jQuery. Try adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
to the code. This will include the jQuery library.
The call to the javascript function is not correct. When you're using the '$' symbol it means that you're using JQuery. You have 2 options:
1 - Include the jquery library to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
2 - Call the javascript function directly on the button on the 'onclick' event. This is the best option in your case:
<button onclick="printData()">Print me</button>
Change this var divToPrint=document.getElementById("printTable");
to this var divToPrint=document.getElementById("<%=printTable.ClientID>");
and add jquery library <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I am trying to create grails app not using Scaffolding to understand it's "way of thinking" better. :)
I am stuck with edit/update method.
On "edit" button I open the same kind input form as when creating object.
All the fields are filled with info and id is passed in link.
On "Edit the msg" I want to update existing object, but all that I've got was either creating new or having error - Cannot set property 'sender' on null object
My "edit.gsp" looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h2>Edit this message</h2>
<g:if test="${flash.message}">
<div class="alert alert-error" style="display: block">${flash.message}</div>
</g:if>
<div class="createStuff" id ="inputs">
<g:formRemote url="[action: 'editSave']" update="allTheMessages"
name="updateStatusForm">
<table>
<tr>
<td>Sender:</td>
<td><g:textField name="sender" value="${message.author}"/></td>
</tr>
<tr>
<td>Message</td>
<td><g:textArea name="msg" value="${message.text}"/></td>
</tr>
<tr>
<td>Some status</td>
<td><g:textField name="status" value="${message.status}"/></td>
</tr>
<tr>
<td>Wanna publish?</td>
<td><g:select name="toPublish" from="${['Publish','Archive']}" keys="${[true,false]}"/></td>
</tr>
</table>
<g:submitButton name="Edit the msg"/>
</g:formRemote>
</div>
</body>
</html>
And my method in controller has varied:
def editSave() {
def message2save = Message.get(params.id)
message2save = new Message(text: params.msg, author: params.sender, status: params.status, toPublish: params.toPublish).save(insert: false, update: true) //1st way - still creates new Message - obviously because of "new Message"
message2save.sender = params.sender //part of 2nd way - in this case there appears NullPointerException mentioned above --> Cannot set property 'sender' on null object
message2save.save()
redirect(action:"index")
}
What am I doing wrong? How can I update existing record?
Huge thanks in advance. :)
GORM knows if you're updating a record when you successfully loads it from the database. This is done in your code:
def message2save = Message.get(params.id)
The problem is that you're not sending the id of your message in the forms. So you need to add:
<g:hiddenField name="id" value="${message.id}" />