excuse my English.
How do I remove at once the texts located within the divs?
example:
line1 - <div id = "test"> 12345 </ div>
line2 - <div id = "test"> 23564 </ div>
line3 - <div id = "test"> ABCFDS </ div>
line4 - <div id = "test"> CDFGH </ div>
line5 - <div id = "test"> 12S4G </ div>
Must be like this:
line1 - <div id = "test"> </ div>
line2 - <div id = "test"> </ div>
line3 - <div id = "test"> </ div>
line4 - <div id = "test"> </ div>
line5 - <div id = "test"> </ div>
How I do this by using the regular expression in notepad?
Find : (<\s*div[^>]*>).*?(<\s*/\s*div\s*>)
Replace : \1\2
DEMO
Related
I'm learning java and I'm practicing with thymeleaf. I made an little app where I have a list of persons (arraylist). I can add a person through a form but also edit a person from the list to update the person's firstname, lastname or birthdate through a form. Here is my problem I want when I edit a person to have its default values(firstname, lastname, bithdate) on the update form so that we can then change only the fields of interest. I have this code:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Update Person</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Update a Person:</h1>
<!-- some tests I made to test if the value appears in the field -->
<!-- <input type="text" name="id" th:value="${person.id}" /> -->
<!-- <input type = "text" name = "firstName" th:value = "${person.firstName}" /> -->
<!-- <input type = "text" name = "sometext" th:value = "hello world" /> -->
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
<br/>
<!-- Check if errorMessage is not null and not empty -->
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
...
</div>
</body>
</html>
None of my default values appears in the fields except for the id. Whether I use th:field="{id}" or name="id" th:value="${person.id}". Both synthax work but the others (ie: th:field="{firstName}" or name = "firstName" th:value = "${person.firstName}" same goes for lastname and birthdate), nothing works. I even tried th:value = "hello world" (commented in the above code), it does appear! So why my person firstname, lastname, bithdate don't appear? What is wrong? My person.list html works though:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Person List</title>
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}"/>
</head>
<body>
<h1>Person List</h1>
Add Person
<br/><br/>
<div>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Edit</th>
<th>Delete Name</th>
</tr>
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
<td><a th:href="#{/updatePerson/{id}(id=${person.id})}">
<span>
<img src="https://img.icons8.com/clouds/40/000000/edit.png">
</span>
</a></td>
<td>
<form th:action="#{/deletePerson}" th:method="POST">
<input type = "hidden" name = "firstName" th:value = "${person.firstName}" />
<input type = "hidden" name = "lastName" th:value = "${person.lastName}" />
<input type = "hidden" name = "id" th:value = "${person.id}" />
<input type = "hidden" name = "birthDate" th:value = "${person.birthDate}" />
<button type = "submit" >
<span>
<img src="https://img.icons8.com/metro/26/000000/delete.png" />
</span>
</button>
</form>
</td>
</tr>
</table>
</div>
<div>
<form th:action="#{/changeDao}" th:method="POST">
<select name="daoChoice">
<option th:value="none" disabled>Choisissez votre Dao</option>
<option id="jdbc" th:value="JDBC">Jdbc</option>
<option id="memory" th:value="MEMORY" th:selected="${isMemory}">Memory</option>
</select>
<button type="submit">Valider</button>
</form>
</div>
<div>
<form th:action="#{/excelLoad}" th:method="GET">
<button type="submit">Local Load</button>
</form>
</div>
<div>
<form th:action="#{/UploadFile}" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td><label>Upload and Add to the table</label></td>
<td><input type="file" th:value = "file" th:name="file" /></td>
</tr>
<tr>
<td><input type="submit" value="Upload" /></td>
</tr>
</table>
</form>
</div>
<div>
<form th:action="#{/exportToExcel}" th:method="POST">
<button type="submit">Export to Excel</button>
</form>
</div>
</body>
</html>
Above my personList.html, person's firstName lastName and birthdate is printed correctly with this code:
<tr th:each ="person : ${list}">
<td th:utext="${person.firstName}">...</td>
<td th:utext="${person.lastName}">...</td>
<td th:text="${#temporals.format(person.birthDate,'dd-MM-yyyy')}">...</td>
but why in my update form this is not working ?
I'm a newbie in java programming and also in thymeleaf (also newbie), so I'd really appreciate some explanations along some tips! thanks a lot!
I found it with another post where there was a simple explanation about the key/value pair in modelAddAttribute:
You can access variables value by ${key}.
Example
model.addAttribute("key", value);
Understanding that I found my mistake in my controller:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("person", person);
return "updatePerson";
}
Before it was:
#RequestMapping(value = { "/updatePerson/{id}" }, method = RequestMethod.GET)
public String showUpdatePersonPage(#PathVariable("id") int id, Person person, Model model) {
person = personDao.findPerson(id);
model.addAttribute("personToModify", person);
return "updatePerson";
}
And in my html the code was:
<form th:action="#{/updatePerson/{id}(id=${person.id})}"
th:object="${person}" method="POST">
First Name:
<input type="text" th:field="*{firstName}"/>
<br/>
Last Name:
<input type="text" th:field="*{lastName}" />
<br/>
Date of Birth (DD/MM/YYYY):
<input type="date" th:field="*{birthDate}" />
<br/>
ID:
<input type="text" th:field="*{id}" />
<br/>
<input type="submit" value="Update" />
</form>
So that was because the key name used "personToModify" couldn't be found in the html as the object name used wasn't properly named:
th:object="${person}"
I can't see your Person class or controller but, for example, keeping it clean, you can create PersonForm class which can look like (might need to change Date)
import java.util.Date;
public class PersonForm {
private String firstName;
private String lastName;
private Date birthDate;
public PersonForm() {
}
public PersonForm(Person person) {
this.firstName = person.getFirstName();
this.lastName = person.getLastName();
this.birthDate = person.getBirthDate();
}
As you can see, it has fields which needs to populated and you set them in constructor, you can also apply validation annotations here if needed.
In your controller you would need to retrieve Person and using it, create and add PersonForm as model attribute. i.e.
#GetMapping("/person/edit/{id}") // you might not use id, might be username
public String editPerson(#PathVariable Long id, Model model) {
Person person = personRepository.getOne(id); // or service
PersonForm personForm = new PersonForm(person);
model.addAttribute("personForm", personForm);
// other stuff
// return html
}
and then change th:object="${person}" to th:object="${personForm}"
Now all th:field="*{firstName}" and others should be populated.
For example - return the 1st element that has class = "title".
The result in this case should be div3.1
Should only use vanilla JS.
<body>
<div class="container">
<div class="abc"> div1</div>
<div class="abc"> div2
<div class="abc">div2.1
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, ipsum?</p>
</div>
<div class="abc">div2.2</div>
<div class="abc">div2.3</div>
</div>
<div class="abc"> div3
<div class="title">div3.1</div>
<div class="title">div3.2
<img src="" alt="">
</div>
</div>
</body>
I don't know about recursively, but querySelector() does just that. It will find the first element that matches the given parameter. The parameter is a CSS selector, so:
id: #abc
class: .abc
attribute: [abc]
tag: div
There's the old school way as well using getElementsByClassName():
var abc = document.getElementsByClassName('abc')[0];
The getElementsByClassName() returns a HTMLCollection/NodeList of all elements with a given className, using the bracket notation ([0]) suffix insures that it only returns the first element of the NodeList.
Demo
var title1 = document.querySelector('.title');
var title2 = document.getElementsByClassName('title')[0];
console.log(title1.textContent);
console.log(title2.textContent);
<body>
<div class="container">
<div class="abc"> div1</div>
<div class="abc"> div2
<div class="abc">div2.1
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, ipsum?</p>
</div>
<div class="abc">div2.2</div>
<div class="abc">div2.3</div>
</div>
<div class="abc"> div3
<div class="title">div3.1</div>
<div class="title">div3.2
<img src="" alt="">
</div>
</div>
</div>
</body>
I'm afraid you provided too little details in your question. If you want to find element with specified class, you can use document.querySelector method.
You can't "recursively" search whole DOM (starting from certain node I'm assuming?), but you can search specific DOM "branch" (element and its parents, up to document body). You can use function like:
function findElementWithClass(sourceElement, className){
var element = sourceElement; //selected DOM node
while(element !== document.body){
if(element.classList.contains(className)){
break;
}
element = element.parentNode;
}
return element;
}
After while loop you can make additional check if element you wanted has been found - if not, you can return false or do whatever you like.
JS Fiddle link: https://jsfiddle.net/8o9jzt8h/
I've a view which displays a list of custom tweeter feed like widgets. Following is the template for the widget:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.ziplly.app.client.widget.TweetWidget.Style"
src="tweetwidget.css">
</ui:style>
<ui:with type="com.ziplly.app.client.resource.ZResources" field="resources"/>
<g:HTMLPanel ui:field="tweetPanel" addStyleNames="{style.tweetPanel}">
<div class='{style.tweet_block}'>
<div class='{style.tweet_image}'>
<b:Image ui:field="authorImage" />
</div>
<div class='{style.tweet_content_section}'>
<div class="{style.tweetActionDropdown}">
<b:Dropdown text="edit">
<b:NavLink ui:field="editTweetLink">Edit</b:NavLink>
<b:NavLink ui:field="deleteTweetLink">Delete</b:NavLink>
<b:NavLink ui:field="reportSpamLink">Report Spam</b:NavLink>
</b:Dropdown>
</div>
<div class="{style.tweet_content}">
<span class='{style.tweet_text}' ui:field="tweetContentSpan" />
<b:TextArea ui:field="tweetContentTextArea"
addStyleNames="{style.tweetContentTextArea}" />
<g:HTMLPanel ui:field="tweetEditButtonPanel">
<b:Button type="PRIMARY" size="SMALL" ui:field="saveBtn">save</b:Button>
<b:Button size="SMALL" ui:field="cancelBtn">cancel</b:Button>
</g:HTMLPanel>
</div>
<div class='tweet_actions'>
<div>
<div class='{style.tweet_action_link}'>
<g:Anchor ui:field="likeTweetLink" addStyleNames="{style.smalltext}">Like</g:Anchor>
</div>
<div class='{style.tweet_action_link}'>
<g:Anchor ui:field="commentLink" addStyleNames="{style.smalltext}">Comment</g:Anchor>
</div>
<div class='{style.tweet_sender_link}'>
posted by
<g:Anchor ui:field="authorProfileLink">
<span class="smalltext" ui:field="authorName" />
</g:Anchor>
on
<span ui:field="timeCreated" />
</div>
</div>
</div>
</div>
</div>
<g:HTMLPanel addStyleNames="{style.people_liked_section}" ui:field="tweetLikePanel">
</g:HTMLPanel>
<div class="{style.commentSectionDiv}">
<g:HTMLPanel addStyleNames="{style.tweetCommentSection}" ui:field="tweetCommentSection">
</g:HTMLPanel>
<g:HTMLPanel>
<b:TextArea ui:field="commentInputTextBox" addStyleNames="{style.commentInputTextBox}" />
<div class="{style.commentInputActionSection}">
<b:Button type="PRIMARY" size="SMALL" ui:field="commentBtn">comment</b:Button>
<b:Button size="SMALL" ui:field="cancelCommentBtn">cancel</b:Button>
</div>
</g:HTMLPanel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
I'm using something like following to populate the view:
final long time1 = System.currentTimeMillis();
for (final TweetDTO tweet : tweets) {
final long time11 = System.currentTimeMillis();
final TweetWidget tw = new TweetWidget();
tw.setWidth(tweetWidth);
final long time12 = System.currentTimeMillis();
tw.setPresenter(presenter);
tw.displayTweet(tweet);
final long time13 = System.currentTimeMillis();
communityWallPanel.add(tw);
final long time14 = System.currentTimeMillis();
System.out.println("Time to create tweet widget: " + (time12 - time11) + " to render: " + (time13 - time12) + " to addToPanel: " + (time14 - time13));
tweetWidgetMap.put(tweet.getTweetId(), tw);
}
final long time2 = System.currentTimeMillis();
System.out.println("Time to render wall: " + (time2 - time1));
On an average I'm seeing about 300+ milli seconds to render each widget on the page. Out of the 300 ms, 280+ is taken to create that template. It seems unreasonably long time for creating a widget from template. Any help will be appreciated.
I am developing a webpage with typo3 and tt_news, i edited the tt_news_template_v3 so the news appear in the way I want. I edited the TEMPLATE_LIST3 in this way:
<!-- ###TEMPLATE_LIST3### begin
This is the template for the list of news in the archive or news page or search
-->
###NEWS_CATEGORY_ROOTLINE###
<!-- ###CONTENT### begin
This is the part of the template substituted with the list of news:
-->
<!-- ###NEWS### begin -->
<article class="box">
<span class="news-list-date" style="margin-left:80%">###NEWS_DATE###</span>
<div class="image-border">
<a href="#" class="image image-left">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</article>
<!-- ###NEWS### end-->
<!-- ###NEWS_1### begin -->
<div class="row" style="margin-top:15px; display: inline-block; width:100%">
<div class="6u">
<section class="box tbox">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<div class="image-border">
<a href="#" class="image image-full">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</section>
</div>
<!-- ###NEWS_1### end-->
<!-- ###NEWS_2### begin -->
<div class="6u">
<section class="box tbox">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<h3 class="subtitulos">###NEWS_SUBHEADER###</h3>
<div class="image-border">
<hr class="cl-right" />
###NEWS_IMAGE###
</div>
<p>###NEWS_CONTENT###</p>
<!--<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>-->
<p class="button">
<!--###LINK_ITEM###--> Ver Más <!--###LINK_ITEM###-->
</p>
</section>
</div>
<!-- ###NEWS_2### end-->
<!-- ###CONTENT### end -->
</div>
this is my typoscript:
###tt_news
plugin.tt_news.pageBrowser {
maxPages = 10
showPBrowserText = 0
showResultCount = 0
showFirstLast = 0
browseBoxWrap.wrap = ds|end
dontLinkActivePage = 1
pagefloat = right
showRange = 0
disabledLinkWrap = <li>|</li>
inactiveLinkWrap = <li>|</li>
activeLinkWrap = <li style="margin-right:5px;">|<li>
LinksWrap =
showResultsWrap = |
showResultsNumbersWrap =<li>|</li>
browseBoxWrap = <div style="text-align:center">
browseLinksWrap = |
}
plugin.tt_news.usePiBasePagebrowser = 1
#-----------------------------------# idioma e imagenes tt_news#-----------------------------------
plugin.tt_news {
displayList {
content_stdWrap.crop = 300 | ...
image.file.maxW = 87
image.file.maxH = 59
image.file.width = 87c
image.file.height = 59c
image.altText.field = imagecaption
image >
image.stdWrap.cObject = IMAGE
image.stdWrap.cObject.file = GIFBUILDER
image.stdWrap.cObject.file {
XY = 87,59
10 = IMAGE
10 {
offset = 0,0
file {
import=uploads/pics/
import.data = field:image
import.listNum = 0
import.override.field = image
maxW = 87
maxH = 59
width = 87c
height = 59c-0
}
}
}
}
_LOCAL_LANG.default {
pi_list_browseresults_first = Primera página
pi_list_browseresults_last = Última página
pi_list_browseresults_page = Página
pi_list_browseresults_prev = < Anterior
pi_list_browseresults_next = Siguiente >
}
}
plugin.tt_news.newsFiles.stdWrap.HTMLparser.tags.img.fixAttrib.width.set = 16
plugin.tt_news.newsFiles.stdWrap.HTMLparser.tags.img.fixAttrib.height.set = 18
#page.includeCSS {
#file1 = fileadmin/templates/webuax/css/uax.css
#file1.media = screen
#}
plugin.tt_news.enableConfigValidation = 0
## Hide the "no news id given" & "no news in this list
## messages, they might scare people
plugin.tt_news._LOCAL_LANG.es.noNewsIdMsg =  
plugin.tt_news._LOCAL_LANG.es.noNewsToListMsg =  
##para que coja los 3 layouts de noticias de la portada
plugin.tt_news.alternatingLayouts = 3
plugin.tt_news._LOCAL_LANG.es {
more =
}
plugin.tt_news._LOCAL_LANG.en {
more =
}
but the ###NEWS_IMAGE### dont work, it renders like this:
<img src="" width="" height="" border="0" alt="">
If I use the single view news, its works, rendering this
<img src="uploads/pics/imagenew.png" width="120" height="120" border="0" alt="">
Anybody knows how to solve it?
thanks in advance
I answer my own question:
The problem was in the resizing of the images, so I installed the JB GD Resize extension, and now it works like a charm
I guess image.stdWrap.cObject = IMAGE does not work - or import=uploads/pics/ is wrong. So, why do you want to use GIBUILDER? There is no need to (i guess).
Your first configuration
image.file.maxW = 87
image.file.maxH = 59
image.file.width = 87c
image.file.height = 59c
looks correct - it should work. So just remove the GIFBUILDER-stuff. I would not expect image.stdWrap to work. It depends on the extension, if "image." is a real IMAGE object. Often it is not!
anyone know any plugin for any program (eg dreamweaver, notepad + +), which organizes the tags and aligns it all?
eg:
before:
<body>
<div>
<ul>
<li> </ li>
<li> </ li>
<li> </ li>
</ ul>
</ div>
</ body>
then:
<body>
<div>
<ul>
<li> </ li>
<li> </ li>
<li> </ li>
</ ul>
</ div>
</ body>
Thanks guys
One solution is to use Notepad++ plugin TextFX HTMLTidy.
Unfortunately in recent releases of Notepad++ this plugin is not set up correctly for some reason, but check the solution by Noah here: Notepad++ HTML Tidy for instructions on how to get it up and running: