My app is being built with Spring Boot using a MVC pattern, and as template viewer I use Thymeleaf.
I'm generating a dynamic list with Javascript in a form, which I need to collect as a List with the controller.
I have tried to solve it with a #RequestParam, but generating the list with Javascript, as far as I'm concerned, I can't set the Thymeleaf tags.
This is the list:
<ul id="addItemList">
<li class="list-group-item" id="group" name="group" value="Outdoors">Outdoors</li>
<li class="list-group-item" id="group" name="group" value="Entertainment">Entertainment</li>
</ul>
Any indication on which approach I should take, would be much appreciated.
Thanks in advance.
Create a Model having a List as property, and pass it as #ModelAttribute in your controller.
In the end I solved this issue with ajax. I had a button to add an element to the list, which was being made with Javascript. I added a jQuery $.post function to save the item, each time that a new one was added to the list by selecting that button. I didn't find the way to move the whole list from javascript, to the Spring Controller.
Follow the process:
Get the list from controller using ajax
Parse the data then generate li with the retrieved values and update the html of id addItemList
Related
In my Spring Boot project, I am iterating a Thymeleaf list like below:
<div th:each="filename: ${files}">
<div class="bold badge badge-primary" th:text="${filename}"></div>
</div>
Question: I am clueless on how can assign badge-primary and badge-secondary (bootstrap4.5) classes to alternate list items while iterating through them?
In simple words, first list item should have badge-primary class, second list item badge-secondary and so on.
Is it possible? If yes, then how? Thanks.
When using th:each, Thymeleaf offers a mechanism useful for keeping track of the status of your iteration: the status variable. Per Thymeleaf documentation example, your code may look like the following ...
<div th:each="filename,iterStat: ${files}">
<div class="bold badge badge-primary" th:class="'bold badge'" th:classappend="${iterStat.odd}? 'badge-primary' : 'badge-secondary'" th:text="${filename}"></div>
</div>
I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.
I'm having problems the default Html.ValidationSummary() in MVC 3.
As default it adds this code:
<ul>
<li style="display:none"></li>
</ul>
And that empty <ul> causes space I would like to get rid of.
Is there some way to work around this problem? Make it toggle some div around it or similar?
how about conditionally showing ValidationSummary
if(!ViewData.ModelState.IsValid)
{
#Html.ValidationSummary()
}
important if you do this you won't be able to use client-side javascript validation (as the div wont be present)
You can create your own validation summary, for example, like here: Custom ValidationSummary template Asp.net MVC 3
I have a list of elements that I pass as an argument into the render method. I have no experience in HTML though and was wondering how I'd print all elements in the list?
I assume that you are using playframework 1.x
if you call render(myElements) from your controller, an myElements is a list of strings, it will look something like this in your view.
...
<ul>
#{list myElements, as:'elem'}
<li>&{elem}</li>
#{/list}
</ul>
...
I will advice you to read the documentation on playframework.org. It is really good and easy to read. You will probably learn a lot. If you want to learn html, I think w3schools.com is a good starting point.
if using play 1.2.x with Groovy templates:
<ul>
#{list items:myList, as:'element'}
<li>${element.name}</li>
#{/list}
</ul>
I want to refresh with ajax just a part of a site.I searched protorypjs and i found ajax.updater but i am having trobule making it work.
this is part of my page
<li id="Home">Home</li>
Can anyone tell me how i can implement this : Ajax.Updater(container, url[, options]) ?
and make it work?
I linked prototype.js in the html.
One solution to update content is by using
$('#refreshMe').innerHtml(_new_ajax_content_);
where element is i.e. a
<div id="refreshMe">
If you want more specific help, you should post more information/code from your project.
thank you for the help. i made it work
here is what i wanted to do :)
<li id="Servicii"><a href=# onclick="new Ajax.Updater('container', 'servicii.html',
{asynchronous:true});">Servicii