How can I display a string that contains HTML tags in Thymeleaf?
So this piece of code:
<div th:each="content : ${cmsContent}">
<div class="panel-body" sec:authorize="hasRole('ROLE_ADMIN')">
<div th:switch="${content.reference}">
<div th:case="'home.admin'">
<p th:text="${content.text}"></p>
</div>
</div>
</div>
//More code....
And at this line of piece of code ${content.text} it literally generates this on the browser:
<p>test</p>
But I want to show this instead on the browser:
test
You can use th:utext (unescaped text) for such scenarios.
Simply change
<p th:text="${content.text}"></p>
to
<p th:utext="${content.text}"></p>
I will suggest to also have a look into documentation here to know all about using Thymeleaf.
Related
So i have FormControl inside Repeating View and i set html for Repeating view as Wicket:container
I am trying to refresh formControl but because i am stripping wicket tags in output
it gives JS error.
i know wicket:container can not be refreshed. but i am not able to refresh control inside it. I tried setting
control.setOutputMarkupPlaceholderTag(true);
control.setOutputMarkupId(true);
And Html is Something like this
<form wicket:id="form">
<wicket:container wicket:id="repeatingContainer">
</wicket:container>
</form>
here is error i am getting
Cannot bind a listener for event "change" on element "id1a3" because the element is not in the DOM
i want to remove repeatingContainer html tag from output so it follows bootstrap form layout.
Update:
This code is inside the RepeaterView
<wicket:panel>
<div wicket:id="componentGroup">
<wicket:child/>
</div>
</wicket:panel>
This code wicket Child
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
ok so i am able to tackle this down.
I updated component Group div to wicket:container and leave the Repeater as div. So now i am able to refresh. and it works alright.
So this is how it will look like
<form wicket:id="form">
<div wicket:id="repeatingContainer">
<wicket:container wicket:id="componentGroup">
<div wicket:id="labelContainer">
<label wicket:id="label"></label>
</div>
<div wicket:id="controlContainer" class="control-container">
<input wicket:id="input"/>
</div>
</wicket:container>
</div>
</form>
I have the following html code:
<div id="ipsLayout_contentArea">
<div class="preContentPadding">
<div id="ipsLayout_contentWrapper">
<div id="ipsLayout_mainArea">
<a id="elContent"></a>
<div class="cWidgetContainer " data-widgetarea="header" data-orientation="horizontal" data-role="widgetReceiver" data-controller="core.front.widgets.area">
<div class="ipsPageHeader ipsClearfix">
<div class="ipsClearfix">
<div class="cTopic ipsClear ipsSpacer_top" data-feedid="topic-100269" data-lastpage="" data-baseurl="https://forum.com/forum/topic/100269-topic/" data-autopoll="" data-controller="core.front.core.commentFeed,forums.front.topic.view">
<div class="" data-controller="core.front.core.moderation" data-role="commentFeed">
<form data-role="moderationTools" data-ipspageaction="" method="post" action="https://forum.com/forum/topic/100269-topic/?csrfKey=b092dccccee08fdbc06c26d350bf3c2b&do=multimodComment">
<a id="comment-626016"></a>
<article id="elComment_626016" class="cPost ipsBox ipsComment ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone " itemtype="http://schema.org/Comment" itemscope="">
<aside class="ipsComment_author cAuthorPane ipsColumn ipsColumn_medium">
<div class="ipsColumn ipsColumn_fluid">
<div id="comment-626016_wrap" class="ipsComment_content ipsType_medium ipsFaded_withHover" data-quotedata="{"userid":3859,"username":"Admin","timestamp":1453221383,"contentapp":"forums","contenttype":"forums","contentid":100269,"contentclass":"forums_Topic","contentcommentid":626016}" data-commentid="626016" data-commenttype="forums" data-commentapp="forums" data-controller="core.front.core.comment">
<div class="ipsComment_meta ipsType_light">
<div class="cPost_contentWrap ipsPad">
<div class="ipsType_normal ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages" itemprop="text" data-role="commentContent">
<p> Hi, </p>
<p> </p>
<p> This is a post with multiple </p>
<p> lines of text </p>
and am trying to get the contents (in plaintext) of the post. The XPath I'm currently using:
//div[#id='ipsLayout_contentArea']/div[2]/div/div[4]/div/form/article/div/div/div[2]/div//text()
retrieves each line of each post (as delimited by <p></p>). How can I get the whole contents of the post (inside:
<div class="ipsType_normal ipsType_richText ipsContained" data-controller="core.front.core.lightboxedImages" itemprop="text" data-role="commentContent"> Post content </div>),
in plaintext (so that <p></p> is treated as a text (as well as other labels that the post might include))?
Edit:
I'm using the following XPath:
//div[#id='ipsLayout_contentArea']/div[2]/div/div[4]/div/form/article/div/div/div[2]/div
to retrieve the div that contains the body of the post.
// forumTemplate.getXpathElements().get(forumTemplate.XPATH_GET_THREAD_POSTS) = //div[#id='ipsLayout_contentArea']/div[2]/div/div[4]/div/form/article/div/div/div[2]/div
List<DomNode> posts = (List<DomNode>) firstPage.getByXPath(forumTemplate.getXpathElements().get(forumTemplate.XPATH_GET_THREAD_POSTS));
for (DomNode post : posts) {
// Retrieve the contents of the post as a string
String postContentStr = post.getNodeValue();
The variable postContentStr is always null. Why?
You specified //text(), that will get all text nodes under the specified path recursively. Depending of what you use, this could work better:
//div[#data-role='commentContent']
That will match the comment node you are trying to get. If you use code to evaluate, you can go from here. Don't match text() though, that will not match any of the <p> tags.
I have the following HTML-Code:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
</div>
And the following jQuery/Java-Code:
$(".slide-button").on('click', function() {
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
The toggle itself works perfectly. When I click on the slide-button the content will slide-down. However, after the slide-down animation is finished the content somehow "jumps up" to its final position.
How can I avoid this "jump" and get the content stays where it is after the slide-down animation is finished?
Thanks for any help :-)
I don't know exactly what your circumstances are, and whether you need <p>aragraph tags or not, but if you switch the <p> tags inside your "panels" to <span> tags it seems to fix your issue.
The HTML code I used which fixed the jump looks like this:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<!-- Here is the first change from a paragraph to a span tag -->
<span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<!-- Here is the second change from a paragraph to a span tag -->
<span>Test jquery menu2</span>
</div>
Also, just a friendly tip, Java is not the same as JavaScript. (: Keep that in mind when tagging your questions.
Source HTML look like this :
<script id="during-reserve-tpl" type="text/x-lodash-template">
<div class="gd-row">
<div class="gd-col gu16">
<div class="emailModule message module-tmargin">
<div class="error-msg"></div>
<div class="register brdr-btm">
<div class="jbv jbv-orange jbv-buy-big jbv-reserve">Buy Now</div>
</div>
<div class="topTextWrap brdr-btm tmargin20">
<div class="subHeading">
Only one phone per registered user
<p>
First come, first serve!
</p>
</div>
</div>
</div>
</div>
</div>
</script>
When I code : IWebElement buy = driver.FindElement(By.CssSelector(".jbv.jbv-orange.jbv-buy-big.jbv-reserve")); It says Element not found.
I tried putting By.ClassName with while spaces but it says, compound classes are not supported.
Is there any alternative to click it ?
driver.FindElement(By.cssselector("div.jbv.jbv-orange.jbv-buy-big.jbv-reserve"))
In the above example css selector looks for div tag with name and it will look for all the dot with space
Try this By.xpath("//*[contains(#class, 'jbv')]") if it works.
You can try either of these:
IWebElement buy = driver.FindElement(By.CssSelector("div.register>div"));
OR
IWebElement buy = driver.FindElement(By.CssSelector("div.register"));
In below XML I need to confirm "Internet" is there.
<section id="landing-content">
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<h1 class="theme--primary">Internet</h1>
</div>
</div>
</div>
</div>
I tried the following:
WebElement findInternet = driver.findElement(By.xpath("//h1"));
System.out.println(findInternet);
I think this will work for you:
WebElement findInternet = driver.findElement(By.cssSelector("h1.theme--primary"));
System.out.println(findInternet.getText());
Your xpath selector will probably work as well, the key thing you were missing is your println was printing the findInternet object. getText() will get the inner text of the selected element.`