How to add a hyperlink to a Spring Data object with thymeleaf - html

I have something like this:
<td th:text="${e.name}">My Event</td>
I need to add a hyperlink to e.name but I can't figure out how, and I think my google skills may be lacking as well since I can't find anything on how to do it.
Thanks for any help.

Just as in a normal HTML document you'll need to wrap an anchor element around what you want to link. For instance like this
<a th:href="#{http://www.thymeleaf/documentation.html}"><td th:text="${e.name}">My Event</td></a>
Other variants can be found by reading the Thymeleaf Standard URL Syntax

It should look like this:
<td>My Event</td>
You can use th: attributes on any html tag.

Here's an example declaring everything in the href and using an expression to modify the wrapped text:
<td><a th:href="#{${obj.website}}" th:text="${#strings.abbreviate(obj.website,50)}" /></td>
One declares the text and the href inside of the anchor tag.

Related

my links using html aren't working?

So I'm working on a website
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
<p> - <a herf="Pages/PaintEverything.html">
Paint Everything
</a> - </p>
and the code here isn't working, none of the links work! I've coded a little program on my website, and this is supposed to take you to it, but it's not working, please help!
Use href instead of herf.
Paint Everything
HTML Tags
The correct way to include a link in your HTML is to use the href element (you mis-spelt it as herf.
Secondly, you cannot use href inside an img tag as it's not valid HTML. Instead, you should nest the img tag inside the link.
Update your code to this:
<a href="Pages/PaintEverything.html">
<img src="Images/PaintEverythingPreview.png">
</a>
<p>
Paint Everything
</p>
To validate (check) your HTML in the future, try the W3C Validator
error writing the attribute href.
Paint Everything
error in attribute href in img tag (not exists):
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
html tag reference: HTML tags list
Change herf to href and enclose the img in <a> tags to make the image a clickable link.
<img src="Images/PaintEverythingPreview.png">
Firstly you need to remove href from the image tag, since you cannot put a href in an <img> tag.
Secondly you need to check if the path/link to which you want to redirect to, is correct or not.
I have updated your code and let me know if this is what you are looking for.
<img src="Images/PaintEverythingPreview.png"><p> - Paint Everything - </p>

HTML and CSS href don't work

i made this page yesterday and href links doesn't work...
HTML and CSS source here: https://titanpad.com/jmAHmU3GyI
I may not understand exactly what you're asking, but the href attribute belongs inside an anchor tag, like so:
<td>Link</td>
Specification: http://www.w3schools.com/tags/att_a_href.asp
Demo: http://jsfiddle.net/0mtto06n/
You are using the href attribute on <li> elements which is unfortunatelly not going to work. To create links use Link text
Read more here:
about a tag

HTML tags with spaces

so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/

Form Within A Form & Table Not Appearing

I have a form within a table which is within another form. My problem is that the embedded form tag is not appearing - the input and iframe appears, but the form tags do not appear. The table and outer form appear. What's wrong?
<form>
<table id=\"mytableid\">
<tr class=\"form_row\">
<td align=\"right\">
Upload Photo:
</td>
<td align=\"left\">
<form action=\"/myuploadpath\" method=\"post\" enctype=\"multipart/form-data\" target=\"upload_target\" id=\"photo_url_upload_form\" name=\"venue_photo_url_upload_form\">
<input type=\"file\" name=\"photo_url\" id=\"photo_url\" size=\"40\" />
<iframe id=\"upload_target\" name=\"upload_target\" src=\"#\" style=\"width:0;height:0;border:0px solid #fff;\"></iframe>
</form>
</td>
</tr>
</table>
</form>
Putting a form inside another form is not valid HTML. When this happens each browser will do different things with the markup. Some ignore parts, some break, etc. Either way you shouldn't do this.
Edit
If you are using tables for layout purposes, you technically shouldn't be. They are only meant for tabular data. You should use divs/spans and CSS to create the look you want on your site. A great place to learn about this stuff is W3C Schools.
I assume you're using something like Firebug or the Chrome DOM Inspector to look at your DOM tree and you can't see the inner <form>. These tools inspect the DOM itself, not the HTML source. That is, they show you what the browser has interpreted from your HTML. The problem in this case is that nesting a <form> within another <form> is invalid, and hence the browser has ignored it and continued parsing the rest of the document.
Obviously, the fix is to ditch that outer form since it's not doing anything. If you have it there for styling purposes, perhaps use a <div> with a class.

Submit button doesn't work in IE

I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrameļ¼‰
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/