I am quite new to Thymeleaf, I am trying to create a fragment and pass to it a variable in my Spring MVC application but I am stuck.
My code:
<div th:replace="fragments/utilities :: reviews(message=${reviews[0].review})"></div>
My fragments/utilities.html:
<div th:fragment="reviews(message)">
<div class="carousel-item">
<div class="border border-light rounded p-4 mb-3">
<div th:replace="utilities :: stars"></div>
<p th:text="message" class="mt-2"></p>
</div>
</div>
But it isn't working, I have also tried substituting th:replace with th:insert or th:include.
Note: I know for sure that reviews[0].review isn't empty
What am I missing?
The problem is with the way you want to display message
Instead of
<p th:text="message" class="mt-2"></p>
Try to use
<p th:text="${message}" class="mt-2"></p>
Related
I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>
I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.
Lets say now there is this rendered in the DOM:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
<img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
</div>
</div>
</div>
Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"
When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"
After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"
Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?
I would greatly appreciate any help! Thank you!
I'm not sure that i understood your problem right :
You need to get a spinner when the image is loading ?
Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".
It should look like this :
<div class="swiper">
<div class="swiper-wrapper">
<!-- Lazy image -->
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
</div>
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 trying to use ember-paper in my ember app but i can't float content to the right.
Example
What I want to achieve (from ember-paper official website)
My code
application.hbs
{{#paper-nav-container}}
{{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<div class="logo">
<strong>Paper</strong>
</div>
</div>
{{/paper-toolbar}}
{{#paper-content}}
{{#paper-list}}
{{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
{{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
{{/paper-list}}
{{/paper-content}}
{{/paper-sidenav}}
<div layout="column" tabindex="-1" role="main" flex>
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<span class="md-breadcrumb-page">Title</span>
</div>
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
{{outlet}}
{{/paper-content}}
</div>
{{/paper-nav-container}}
How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide
The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.
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;
}