How to retrieve the value of thymleaf dynamic id value using jquery? - html

This is my dynamically changing thymleaf id. How do I refer that Id using jQuery
<div th:id="${answerList.answer_id} +'answer_id' " class="some class"></div>
I tried using this Jquery code it does not work for me. Please help me out
$('#answerList.answer_id' + 'answer_id').text();

You can do like:
<script th:inline="javascript">
$('#' + [[${answerList.answer_id}]] + 'answer_id').text();
</script>

Related

How to change th:attr to th:onclick in Thymeleaf

When I use the attribute th:attr everything is working.
But when I want to use th:onclick without th:attr, I have error.
What do I need to do to make it work well without th:attr?
<button th:each="user : ${users}"
th:if="(${user.id} == ${user.id})"
th:attr="onclick='changeUser(\''+ ${user.id} + '\', \''+ ${user.name} + '\');'">click on me</button>
I found that the problem is in Thymeleaf version.

HTML select value assign to html field

I need a little help (i can`t figure out). How i can put a selected HTMl field value to another HTMl field when i select some value from the first field.
Best regards
Trajce Gogov
One Javascript solution could be:
<script type="text/javascript">
var dropdownList = document.getElementById("dropdownList");
var dropdownListValue = document.getElementById("dropdownListValue");
if(dropdownList != null) {
dropdownList.innerHTML = dropdownListValue;
}
</script>
Not proof-tested so not entirely sure if working. However, make sure you put it at the bottom of your page to allow everything load up and run BEFORE the Javascript.
try this javascript :
<SCRIPT language="javascript">
function show(){
var combo=document.getElementById('combo1')
document.form.yourtextboxname.value = combo.value
</SCRIPT >
set your textbox name and dropdown/combobox name, and put onChange like :
<select name=combo1 onChange='show()'>

HTML onclick attribute with variable URL

Below code is for navigating to the Google Webpage when the element <li> is clicked.
<li onclick="window.location='http://www.google.com';" style="cursor:pointer;">Google</li>
Now I have another <li> which goes to different websites depending on a parameter. I tried this
<script>
document.write('<li onclick="window.location='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';" style="cursor:pointer;">Google</li>');
</script>
This isn't working fine. What am I doing wrong?
You don't want to use document.write. Instead you can change the attributes of the tags themselves. onClick is just javascript inside your code so you can replace variables
<li onclick="location.href='http://www.google.com/mmm/yyy/' + random_variable + 'ddd/eee';">Google</li>
It's a little messy. I'd personally do it with jQuery and a regular <a> tag
Javascript/jQuery
$(document).ready(function() {
$('#someid').click(function(e) {
e.preventDefault()
location.href= 'http://google.com/' + random_variable;
});
});
Or if your random variable is available onload you could just replace the href attribute
$(document).ready(function() {
$('#someid').attr('href','http://google.com/' + random_variable);
});
HTML
<li>Google</li>
var targetElement = document.getElementById("id");
targetElement.appendChild('<li>...</li>';
The first line find the existing element, where you want to insert the <li>.
The second line insert it.

Twitter / Facebook Share dynamic URL

I am trying to create a custom share link so on click it will share the current URL.
I understand this
<a href="http://twitter.com/share?text=An%20Awesome%20Link&url=http://www.google.com">
Share This on Twitter</a>
But is there any way to make it dynamic, so it will grab the URL of the page the user is on and share that, rather than a hard coded link.
Thanks
In Javascript you can use :
document.URL
It gives you the current url
https://developer.mozilla.org/en-US/docs/DOM/document.URL
and
document.title
for getting the title of this page
https://developer.mozilla.org/en-US/docs/DOM/document.title
with jQuery or javascript you can set the href attribute
http://docs.jquery.com/Attributes/attr
https://developer.mozilla.org/en-US/docs/DOM/stylesheet/href
Example:
$('a').on('click', function() {
$(this).attr('href',
'http://twitter.com/share?text='+document.title+'&url=' + document.URL);
});
Another way:
https://dev.twitter.com/docs/tweet-button
With jQuery:
$('a').on('click', function() {
document.location = 'http://twitter.com/share?text=' + document.title + '&url=' + window.location.href;
});
Use this
<a data-count='horizontal' expr:href='data:post.canonicalUrl' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on twitter</a>
Putting expr:href='data:post.canonicalUrl' does the trick.
nonetheless,twiiter gives you an option while generating buttons
(source: ctrlv.in)

Joomla and anchor links with target="_blank"

Using a Custom HTML module and have the following code:
<h2>info#studev.net</h2>
However after saving the module, the rendered code becomes:
<h2>
<script type="text/javascript">
<!--
var prefix = 'ma' + 'il' + 'to';
var path = 'hr' + 'ef' + '=';
var addy61999 = 'info' + '#';
addy61999 = addy61999 + 'studev' + '.' + 'net';
var addy_text61999 = 'info' + '#' + 'studev' + '.' + 'net';
document.write('<a ' + path + '\'' + prefix + ':' + addy61999 + '\'>');
document.write(addy_text61999);
document.write('<\/a>');
//-->\n </script>info#studev.net<script type="text/javascript">
<!--
document.write('<span style=\'display: none;\'>');
//-->
</script><span style="display: none;">This email address is being protected from spambots. You need JavaScript enabled to view it.
<script type="text/javascript">
<!--
document.write('</');
document.write('span>');
//-->
</script></span></h2>
Does anyone know why this is happening?
It is 'Content - Email Cloaking' plugin for protection email in joomla. This plugin changes each email in such way (with js). If you want, you can disable this plugin. But If you found such code with js in source of page it is normal.
/libraries/joomla/html/html/email.php - rule for 'email cloaking'
For anyone else trying to add attributes to anchors that are filtered by the Email Cloaking plugin, you can use this piece of jQuery to add your own attributes after the page has loaded:
HTML Example:
<h2 id="contactUsEmail">info#studev.net</h2>
You cannot put the ID in the anchor tag as the plugin removes this as it renders the page, so use the parent tags and then use ">" to identify a child element, in this case an anchor tag, as so:
jQuery(document).ready(function(){
$("#contactUsEmail > a").attr("target","_blank");
});
This target="_blank" to the anchor link, after the page has loaded, but keeping the Email Cloaking plugin still enabled