I have a problem with rendering the Pageable response (using Thymeleaf 2.0.19) content to be displayed in rows of <div class="span3">. The row values are dynamic from Spring 3 MVC controller.
Below is the UI code i need to display product images in rows with each row containing 4 cols of span3.
UI snippet to display the product images in 4 cols per row.
<div class="container">
<div class="row-fluid" th:remove="all-but-first">
<div th:each="asset,assetIter : ${page.content}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${assetIter.index}%4 == 0" class="span3">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<span><img src="../abc.png" /></span>
<div class="caption">
<p>Label1 : <span th:text="${asset.id}">Id</span></p>
<p>Label2: <span th:text="${asset.name}">Name</span></p>
<p>Label3: <span th:text="${asset.category}">Category</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
I tried one of the post responses from "Younghan Kim" posted at in thymeleaf, how can write th:each to combine rows and columns?, however i need to display the values from within the page response object which is however String values in the response above.
So, how do i display the above code as rows with 4 cols. Please provide inputs and let me if i am missing out on something as i am new to thymeleaf impl.
Also the UI pagination is implemented on server side as mentioned in the blog below:
http://www.jiwhiz.com/post/2013/2/Implement_Bootstrap_Pagination_With_SpringData_And_Thymeleaf
Related
I have a controller, which is composed of many other partial views. I wanted to use a particular section of that controller in another controller. I am able to see the design but unable to load items in it.
Let say I have one controller named "Products" within Product view folder I have _items.cshtml. I wanted to use this _items.cshtml in another controller called "placeTheOrder".
In particular section of div in placeTheOrder view I referred to #Html.Partial("~/Views/Products/_items.cshtml"). Even after doing so it is unable to load the content from _items.cshtml into placeTheOrder.
What am I doing wrong.
_items.cshtml view
<div id="accordionProduct" class="span-6 last prod-acc">
#Html.Partial("~/Views/product/_ezCpSearchBar.cshtml")
<div id="filterPanel" class="span-6 last filter-panel">
<div class="span-6 last">
<div class="filter-panel-head">
<h1>Filter</h1>
</div>
</div>
<div class="span-6 last">
<div class="filter-panel-body">
<div class="filter-panel-prop"></div>
</div>
</div>
</div>
<div id="accordionProductInner" class="span-6 last prod-acc-body">
</div>
</div>
// this is the script are where the content gets loaded into the view
<div id="TemplateFilterItem" class="hidden"></div>
<div id="TemplateLastViewItem" class="hidden"></div>
This is the place where I have refered to it in another controller
<div class="span-6" style="background-color:#d4d4d4;padding:20px;">
#Html.Partial("~/Views/product/_items.cshtml")
</div>
You can use Html.Renderpartial in your view instead
Html.RenderPartial("~/Views/ControllerName/ViewName.cshtml", ModelData);
If you are using different model for both the views then you need to make ViewModel which will include required properties.
Hope this Helps
I have the following code in my View.
#model MovieApp.Models.HomeIndexViewModel
#foreach (var item in Model.Movies)
{
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src=item.posterPath id="picture1" class="img-responsive" />
</div>
</div>
</div>
}
I retrieve the image Url's on item.Posterpath as a string.
When I try to add my Url's on item.PosterPath as <img src=item.posterPath id="picture1" class="img-responsive"/>I can see that the item is not in scope.
My question is how i should iterate over my Model to stay in the scope and retrieve my paths?
have you tried src="#item.posterPath" ?
I'm working inside a templated system where i can implement code, but i can't modified the core of the file. My layer are stacked like this:
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
As you can see, my class all have the same name (layer1, layer2, etc...). I want to know if there's a way by using Javascript, Jquery or any other online client side library to modify the CSS class name so, for example, the first layer1 become level1 and the following layer1 become level 2?
Thank for your answer!
As other people already said, jQuery actually does what you want.
As long as you don't know the number of “layers” you have, you better find all elements by classname substring:
$('*[class^="layer"]')
Then you can get the list of the element classes and change old names to new ones.
Many different ways to do this:
Solution 1:
Use addClass() and removeClass()
$(".layer1").removeClass('old_class').addClass('new_class');
Replace old_class with your older class and new_class with your new class
Solution 2:
If you are able to get the element by ID
You can set the class by using .attr()
$("#id").attr('class', 'new_class');
an all around solution working with className :
var elem=document.querySelectorAll('[class^="layer"]') ;
for(i in elem){
x = elem[i].className;
var y=x.replace("layer" , "level");
elem[i].className=y||x;
}
Code sample
'someproc' is a custom processor which extends org.broadleafcommerce.common.web.dialect.AbstractModelVariableModifierProcessor from broadleaf platform.
<myproc:someproc /> // as a result is objectCreatedInProcessor
<div th:classappend="${objectCreatedInProcessor==null?'null':'not_null'}></div>
<div th:classappend="${objectAddedToModelAndView==null?'null1':'not_null_1'}></div>
<div th:each="someVar : ${someVars}">
<div th:classappend="${objectCreatedInProcessor==null?'null':'not_null'}></div>
<div th:classappend="${objectAddedToModelAndView==null?'null1':'not_null_1'}></div>
</div>
<div th:classappend="${objectCreatedInProcessor==null?'null':'not_null'}></div>
<div th:classappend="${objectAddedToModelAndView==null?'null1':'not_null_1'}></div>
As a output result will be :
<div class='not_null'></div>
<div class='not_null_1'></div>
<div>
<div class='null'></div>
<div class='not_null_1'></div>
<div class='null'></div>
<div class='not_null_1'></div>
<div class='null'></div>
<div class='not_null_1'></div>
</div>
<div class='not_null'></div>
<div class='not_null_1'></div>
supposing we have three items into $someVars list.
The question is, why is $objectCreatedInProcessor beeing made NULL into th:each loop. And why variable $objectAddedToModelAndView isn't made NULL, and is accessible into th:each loop?
What I'm doing wrong? Is something what I miss?
EDIT1 : Closed conditional expression. This wasn't the reason of the problem, it was only a bad code sample.
EDIT2 : Closed classes into result display.
EDIT3 : Forogot to mention that $someVars is a variable added from a controller to spring ModelAndView.
It appears as if you are not properly closing the conditionals on your ternary functions. Add a } after the null and before the ? on each line.
Here is an example ternary from the docs for reference
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
Which is the best way to load text into a webpage using ASP.NET
I have 3 records in a MS SQL database table. Each record would correspond to a paragraph in a webpage.
Table:
The HTML code for the About us page would look like this (note I put the corresponding paragraphs) :
<div id="content-1b">
<div id="content-1-1b">
</div>
<div id="content-1-2b"><p class="none">paragraph 1</p>
<p class="nonetop">paragraph 2</p>
</div>
</div>
<div id="content-3b"><p class="nonetop">paragraph 3</p>
</div>
Regards,
Tea
Declare these Divs as server controls by giving an unique Id a d runat=server so that you can access the object back in code behind.
These divs are equavilent to HTMLGenericControl so you can just say divid.innerHTML = content.
Or you can also use a repeater and bind to your div
Setting your divs or paragraph tags as runat="server" with an ID will allow you to access innerhtml/text
HTML:
<div id="content-1b">
<div id="content-1-1b">
</div>
<div id="content-1-2b"><p class="none" id="p1" runat="server">paragraph 1</p>
<p id="p2" runat="server" class="nonetop">paragraph 2</p>
</div>
</div>
<div id="content-3b"><p id="p3" runat="server" class="nonetop">paragraph 3</p>
</div>
Running code like: (assuming your content is in a datatable and that you want the first item (0) from each row)
For each row as Datarow in dt
p1.InnerHtml += Row.Item(0).ToString
Next
Will loop through your datatable, get the first column from each row and append the text to the paragraph tag.
Update:
For Single Content
If your SQL returns 3 rows, 1 for each area you want to fill simply do:
Assuming dt is the datatable you are filling and that the first column of each row is your content.
p1.InnerHTML = dt.rows(0).Item(0)
p2.InnerHTML = dt.rows(1).Item(0)
p3.InnerHTML = dt.rows(2).Item(0)