Develop Reference

Spring-Thymeleaf How to invoke with EL an action method from a Bean

I am using Spring/SpringMVC 5.x version, with Thymeleaf and Bootstrap on Tomcat server.
I need to ask something that maybe it might look to you very "st#pid" question.
In my html view I have the following button or a link:
<input type="button" .../>
<a .../>
I don't need to submit something, so I just use a simple button, so I think I don't need any form for it (except if I need for this).
In this html view (because of the thymeleaf library I added in the html tag), I need to add somehow,
(but I don't know how), to this button or in the link, an expression of Spring EL or Thymeleaf EL, so I can invoke a method from a
Spring bean, that I passed in the view, via a model which I added in my controller, e.g.:
${myBean.doSomething()
// or
${myBean.doSomething(parameters)
If this is not understandable I can update my question with some code (I believe that Spring developers
understand what I am talking about).
I don't know how to pass this expression. What attribute of button or link tag to use?
I used "action" attribute for the button:
<input type="button" th:action="${myBean.doSomething()".../>
or "href" attribute in the link tag:
<a th:href= "${myBean.getStringUrlAndDoSomething()"/>
Very significant info
When I started my tomcat running the page, the actions in the EL are run successfuly on the load of the page. When I pressed the button or the link nothing happened.
I know that I cannot use "onclick" attribute because there we write JS code.
But I need to run Java Spring code.
Any ideas about solving my problem?
Thanks in advance

I followed the advice of the #M.Deinum, #Wim Deblauwe, and I did not use
a button for this job. Button needs a form to work.
That is why I used a link, where the method from the bean is called like a charm, like
the following snippet:
<div class="blabla">
<div class="blablabla" th:text="|#{change_lang} EN/GR:|"></div>
<a class="bla" th:href="${localeService.switchLocale()}">
<div th:class="|${localeService.loadCss()}_blabla|"></div>
</a>
<span th:text="${#locale.getLanguage()}"></span>
</div>
And next is a snippet from the bean:
public String switchLocale() {
locale = LocaleContextHolder.getLocale();
if (locale.getLanguage().equals("en")) {
LocaleContextHolder.setLocale(EN_LOCALE);
return "?lang=el";
} else if (locale.getLanguage().equals("el")) {
LocaleContextHolder.setLocale(GR_LOCALE);
return "?lang=en";
} else {
return "";
}
}
So, the code from the bean IS invoked successfuly. I guess this is the solution to my issue.
Thanks a lot from the 2 people #M.Deinum, #Wim Deblauwe, who advised me.

Java Spring MVC PRG Pattern preserve Data on reload

i'm currently woking on a spring mvc project. I have a page with a form, which represents a configurator.
The user can choose some data in a bunch of select fields and proceeds to the next step, where he gets the same jsp-page but with some more fields, depending on his inputs he made. This will be repeated a few times until he gets his result on another page. Each time a POST will be performed.
Now if the user uses the back function of the Browser he doesn't get to the previous page, but to a browser default "broken page", where Chrome for example says something like "Please confirm resubmission of the form data...". To actually resubmit the data he has to press reload and confirm a popup.
The resubmission itself isn't really a problem, because the data does not get inconsistent, it just performs another call to the backend and receives the data it provides.
The real no-go is the fact that the user has to manually refresh the page and by chance gets confused by the default browser page.
I did some research and found out, that the PRG (Post-Redirect-Get) Pattern might solve this problem.
In fact i can now navigate through the browser or reload the page and does not get the popup or broken page - because it's now a GET request of course.
The problem now is, that if i navigate back, the last page does not contain the data it contained before, but is now empty because no data at all is existing.
I understand that it is now a GET request and no data gets posted, but i thought the previous page would be "reused", like shown here.
Now with the PRG-Pattern the handling of the application is even worse, because if the user reloads or navigates back, he basically has to start from scratch.
Did i misunderstood the meaning of this Pattern?
A quick look into some code, how i implemented this:
#PostMapping("/config")
public String handlePostRequestConfig(RedirectAttributes redirectAttributes, ProductForm productForm){
//Handle productForm and add additional content to it
if(noMoreStepsLeft){
return "redirect:/result";
}
redirectAttributes.addFlashAttribute("form", productForm);
return "redirect:/config";
}
#GetMapping("/config")
public String handleGetRequestConfig(Model model, #ModelAttribute("form") ProductForm productForm{
model.addAttribute("form", productForm);
return getJsp("product");
}
Inside JSP:
<form method="post" action="/config">
<c:foreach items="${form.selectFields}" var="selectField">
<input...>
</c:foreach>
<button type="submit">Submit</button>
</form>

In PRG, P is not the first step of user action flow. PRG is a part of the full flow.
The following shows a flow and how PRG fits in it:
User will hit a URL. For example: http://localhost:8080/myContextPath/config.
This will be handled using a GET handler:
#GetMapping("/config")
public String show(ModelMap model) {
// code
model.put("form", productForm);
return "product"; // returning view name which will be resolved by a view resolver
}
product.jsp:
<form commandName="form" method="post">
<c:foreach items="${form.selectFields}" var="selectField">
<input...>
</c:foreach>
<input type="submit" value="Submit"/>
</form>
This submit action will be handled by a POST handler:
#PostMapping("/config")
public String submit(#ModelAttribute("form") ProductForm productForm,
RedirectAttributes redirectAttributes){
// code, may be service calls, db actions etc
return "redirect:/config";
}
This redirect to /config will be handled again by /config GET handler. (Or you can redirect to any GET handler of course)

How to deal with 2 submit buttons in one form in struts2

I am developing an application using struts2. I was stuck at a point, where I have 2 buttons, in a single struts2 form. I want one of the buttons, not to call the default form action bean, despite call its own Jquery modal dialog based on this button ID. Each time I click the button, its calling the form action bean. How to get rid of this?

On form submit don't call action directly.
On clicking submit button call a JavaScript method and then inside method control the behavior.
<script>
/*
function doSomething() {
alert('Form submitted!');
//perform your expected behavior
} */
function fun1(){
//perform operation
}
function fun2(){
//perform operation
}
</script>
<form id="formid">
<input type="submit" value="Submit1" onclick="fun1();">
<input type="submit" value="Submit2" onclick="fun2();">
</form>

I have created a Jquery function for button2 using button id as a reference. This function is called upon clicking that. I have placed the below line of code in the first line of that function.
$('#button2id').click(function(event){
event.preventDefault();
});
The above line of code prevents calling the default form action, i.e.., struts2 action bean.

Dojo ajax call returns before Java code completes?

I have a problem with a Struts2 + dojo web application that I've inherited. The application works in IE9 and Firefox but does not work in Chrome.
Here is the submit button code:
<button dojoType="dijit.form.Button"
type="submit"
onclick="sendRuleForm('requestSubmitForm', 'resultDiv', 'RequestSubmit.action');">Submit</button>
Here is the javascript code for the sendRuleForm function above:
function sendRuleForm(formId, id, actionNm) {
var bindArgs = {
url: actionNm,
form: document.getElementById(formId),
handleAs: "text",
load: function(data) {
document.getElementById(id).innerHTML = data;
},
error: function(data) {
alert(data);
return;
}
}
dojo.xhrPost(bindArgs);
document.getElementById(id).innerHTML = ajaxLoader;
}
I noticed that if I set breakpoints in my Java code, the web page returns with an error even before the action even completes.
Chrome Developer Tools indicate a status of cancelled for the action/request ( What does status=canceled for a resource mean in Chrome Developer Tools? )
I am using an older version of dojo 1.3.1 but updating it to the latest version did not fix the problem.
Can anyone explain this behavior and let me know how I can go about fixing this?

You can rule out the ajax / javascript bit of this error. It is either
a bug in chrome (unlikely)
a bug in the struts page youre calling, may send back a weird HTTP response (check server logs)
there's a 'jitter' in form submission, where multiple requests are sent. im guessing, but maybe <button type="submit" and <input type="submit" is handled differently in chrome
What youre experiencing in the redirect to a different page is probably due to the fact that Struts Application receives a GET when you manually refresh the URL field in the new tab. Could also be due to a missing login-cookie or such.
To have a true response from the application, try put in the target attribute with your form and then submit in a normal fashion (without XHR).
<form action="RequestSubmit.action" method="POST" target="_debugwin">
<input type="submit" value="DebugSubmit" name="debugbutton" />
... remainder of form code
Also, your dijit Button has an overridable function 'onClick', note the camelCasing. Youre setting the DOM onclick event. In this case, youre click event may get handled by the browser immediately after the dojo.xhr fires (when function returns). See this Q: Preventing form submission with Dojo
Only way, however, for this to be the case - and at same time you seeing the 'Cancelled' error in debug window is, if the form is loaded in a (i)frame. Otherwise the full page would refresh and network monitoring would reset. As an easy, win-win workaround, adapt the onclick attribute as follows:
<button dojoType="dijit.form.Button"
type="submit"
onClick="sendRuleForm('requestSubmitForm', 'resultDiv', 'RequestSubmit.action'); /* NOTE */ return false;">Submit</button>

How do I inject another JSP page into a <div> when clicking a link?

I have two different divisions in a JSP page. One contains a menu of links, when clicked the div2 (id-content) loads different pages accordingly. I am doing something like -
<div id="menu">
<ul class="navbar">
<li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
</li></div>
and in the script I have something as -
<script language="JavaScript">
function changeContent() {
document.getElementById('content').load('Login.jsp');
}
</script>
I also tried -
document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">";
None of the ways worked. Please suggest how should I

Try jquery..
function changeContent() {
$('#content').load('Login.jsp');
}

The solution is to use Ajax, which will asynchronously retrieve your page content that can be pasted in with the innerHTML method. See my answer to a similar question of how an Ajax call works and some introductory links.
As to why your examples in your answer don't work, in the first case there is no load() method on an Element object (unless you've defined one yourself and not shown it). In the second example, as one of the question comments says, there is probably something causing a syntax error in the javascript.
As an FYI, when there is a syntax error in some javascript in a web page, the current expression being parsed and the rest of the <script></script> block will be ignored. Since this is inside a function declaration, that function will never get defined.
For instance, an embedded quote in the included page will end the string for the innerHTML assignment. Then the javascript parser will try to parse the remainder of the HTML causing a syntax error as the HTML will not be valid javascript.

We use jquery. Add a click event handler to the anchor elements. In the click handler call $('#content').load(your_url);. You might want to use the load(url, function() { ...}) version. More info here http://api.jquery.com/load/

Your initial page comes down from the server. It's displayed by the browser. When you click on a link (or a button) in the browser, you want to fill the second div with new HTML. This is is a perfect job for an AJAX request. What the AJAX object in the browser does, is to send a POST (or whatever) string to the server. And then the Ajax object receives the HTML response back from the server. And then you can display that response data which the AJAX object contains, anywhere you want.