We Keep Coding

How to display a progress / please wait type component while waiting for a long POST request

I am building a web app that includes some features that can take a few seconds to complete such as importing 2000+ entities after clicking on a link.
One such feature first has the user choose a CSV file, uploads it to the server and then iterates through it line by line to create the associated entities and save them in the database.
Here is an example of how the JSP page looks :
JSP
<form method="POST" enctype="multipart/form-data" action="<c:url value="/import/importFormulary" /> " class="form-style-7">
<ul>
<li>
<label> File : </label>
<input type="file" name="file" accept=".csv"/>
</li>
</ul>
<input type="submit" value="Upload and Import" />
<input type="reset" value="Reset" />
</form>
I would like the submission of this form to trigger some sort of "please wait" overlay on the page. Something like this would be REALLY nice : http://tobiasahlin.com/spinkit/
I understand the "waiting for localhost" message is the controller doing its thing in the background which means the page this form is on is technically not active anymore. Knowing that fact, i'm struggling to figure out how to implement this. I have a place in my app where i do an AJAX request every second to refresh the content of a table and I have a feeling this is a direction to explore in order to achieve the result i want but seeing an example of a similar thing being done would be very helpful.
How does one show a spinning circle of please wait on the current page while waiting for the underlying controller to finish processing?

I settled with something like this, courtesy of font awesome :
<a th:href = "#{'/export/formularyAdd/' + ${facility.id}}" class="btn btn-outline-info eBtn"
title="Export Formulary Add Messages" onclick="showPleaseWait()">
Wrote this function in an included JS file :
function showPleaseWait()
{
$('.modal').modal('show');
}
<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 200px;">
<span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>
<p class="please-wait-message">Please wait</p>
</div>
</div>
</div>
The following import is on my page :
<link rel="stylesheet" th:href="#{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>
And finally this maven import :
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.7.0</version>
</dependency>
This lets the controller do its thing and displays the progress spinner until the page is redirected.

styles not applied on validation form using thymeleaf and bootstrap

Trying to add text with a style on error validation in a bootstrap form
This is part of the form:
<label th:text="#{name}"
class="col-form-label col-form-label-sm"></label>
<input
type="text" class="form-control form-control-sm"
th:field="*{name}" />
<span
th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="invalid-feedback">Here there is an error</span>
I get the message on validation error, but without styles.
If I debug I see the class with the style:
<span class="invalid-feedback">Here there is an error</span>
I have tried with severals styles like help-block but no way.
I'm using bootstrap4.0.0-alpha.6
Any idea?
Thanks

In case you are still interested.
Bootstrap's current validation docs give you three approaches: client-side custom validation, browser defaults and server-side validation.
From your post I will assume you're using server side, meaning that you are sending the data to be validated in your server code for then showing the error fields when the form is re-rendered.
In that case, remember that for bootstrap's styles to kick in, a certain html structure is expected from your code, example:
<input th:field ="*{email}" type="email" class="form-control"
th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid"
required>
<div class="invalid-feedback">
<p th:each="error: ${#fields.errors('email')}" th:text="${error}">Invalid data</p>
</div>
(I believe a span tag will work too for <div class="invalid-feedback">)
That is a minimal necessary structure for the error styles to work. What happens:
Initially, invalid-feedback is assigned display: none
The form is submitted, if it has an error it'll be re-rendered and it's up to the developer to provide a mechanism which will include is-invalid in the class attribute of every <input class="form-control"/> with an error. In the previous code, th:classappend="${not #lists.isEmpty(#fields.errors('email'))} ? is-invalid" is responsible for that to happen. (I'm new to Spring and Thymeleaf, so there could be a neater code for this)
Declaration .form-control.is-invalid~.invalid-feedback in _forms.scss will kick in and assign display: block to <div class="invalid-feedback">, thus showing each field's error message (s).
That should be enough to show the error (s) under each field and highlight them in red.
HIH

Is it possible to include format of a thymeleaf fragment

I'm looking for a way to include the structure of a thymeleaf fragment into a page.
What i mean by that is as follows:
The fragmend defined as follows:
<div class="container" th:fragment="container">
<div class="row">
{the content of the page continues here}
</div>
</div>
The page template:
<div th:replace="fragments/main:: container">
{I can continue here for eq, <div class="col-md-5"></div>}
</div>
I dont't know if this is possible but i'm looking for a way to do this.

Due to layout dialect of Thymeleaf, this can be done by adding
<th:block layout:fragment="content"/> to desired layout and using this as parent element in your view.

Selecting Nth-of-type in selenium

I'm trying to use By.cssSelector to grab the nth dom element with class c3 with a structure like this:
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
<div class="c1">
<div class="c2">
<div class="c3">...</div>
</div>
</div>
Testing my CSS selectors, I'm becoming increasingly confused.
This selector selects the 2nd instance of c2/c3 correctly:
.c1:nth-of-type(2)
while:
.c2:nth-of-type(2)
.c3:nth-of-type(2)
select nothing.
Even worse, translating this into selenium, I seem to consistently find nothing for all 3 versions. There are plenty of alternative ways to select these elements (I'll probably just do XPATH), but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?
This has been in Chrome (29/30) and Firefox (24/25)

I'm not enirely sure which one you want to select, but you should play around more with the :nth-* pseudo-classes. Here is a CSS selector that selects all 3 c3's using nth-child()
div.c1 div.c3:nth-child(1)
Like i said, you haven't really specified which one you want to select.
but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?
One thing to keep in mind, is all of the :nth-*() pseudo-classes are dependent on their parents. Let me translate your selector:
.c1:nth-of-type(2)
Find anything with a class of c1 that is a second child.
In your case, <body> was most likely the parent, so...
<body>
<div .c1 />
<div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
<div .c1 />
</body>
Now let me explain why your other selectors are not working.
Both .c2:nth-of-type(2) and .c3:nth-of-type(2) are looking at the parent's as well. since you are specifying a parent, it's expecting <body> as the parent. In your case, <body> isn't the parent.. the <div .c1 /> is. In reality, that selector is looking for the DOM -
<body>
<div .c1 />
<div .c2 /> // this **would** be the second nth-of-type, but it's not really this way.
<div .c1 />
</body>
Play around with the different css selectors and pseudo-classes at http://cssdesk.com it's very helpful to actively experiment on your own. you'll figure it out.

JSF: conditionally render a list item (<li>)

I just inherited a project implemented in JSF. I have the following code which looks fine in Chrome, but Firefox renders the borders on the "empty" list items:
<ul>
<li><a href="/home">Home</li>
<li>
<s:link view="/signup.xhtml" rendered="#{someCondition}">Sign Up</s:link>
</li>
<!-- etc... -->
</ul>
Which ends up looking like:
Is there a JSF tag to conditionally render the <li> ?

If you do it as in #CoolBeans example, you will get a <span> around your <li>. In some cases it might disrupt your layout, besides you don't really want an extra tag under <ul>. To get rid of it, use <ui:fragment rendered="#{condition}" /> around your item instead of <h:panelGroup>.
Also you can use style attribute to hide an item:
<li style="display: #{condition ? 'list-item' : 'none'};" />

No li is vanilla html, not a jsf component.
You can hack it by putting a <h:panelGroup /> around the li element and setting the rendered property on it.
ie.
<h:panelGroup rendered="#{someCondition}">
<li>
<s:link view="/signup.xhtml">Sign Up</s:link>
</li>
</h:panelGroup>
Another option is to use <f:verbatim rendered="#{someCondition}" >, but keep in mind that it has been deprecated in JSF 2.0.

You could also use the core JSTL library:
<c:if test="#{someCondition}">
<li>
<s:link view="/signup.xhtml">Sign Up</s:link>
</li>
</c:if>
I think using this core tag makes the code easier to understand than using the panelGroup tag.