I searched first but I found confusing answers since I'm new to Thymeleaf and amateurish at best at javascript.
I just want to know how to pass variable expressions into javascript functions, sort of like in JSP:
Button
Of course, this fails with Thymeleaf and passes the string ${contact.id} instead of its value, so how could I get the value of the variable expression instead?
The reason I want it this way is because it depends on the row which is being iterated by th:each.
If there's no other way except to use th:inline, then what's the best approach considering the above statement?
This one worked:
th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"
Thanks goes out to the thymeleaf forum:
http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html
In Thymeleaf version 2.1, I have not been able to get the accepted answer to work. I did find some guidance from a Twitter post from Thymeleaf. Rather than using th:onclick, you use th:attr and specify the onclick attribute therein.
th:attr="onclick='javascript:getContactId(\'' + ${contact.id} + '\');'"
You can not put javascript variables into onclick or other DOM attributes. The value of onclick or any other DOM attribute should be a constant string.
However, you can dynamically modify value of onclick attribute from javascript, like this:
yourDomElement.onclick = anyVariable;
You can do this like:
th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"
A more generic approach, if you need in JS something that isn't passed as a event handler parameter:
th:attr="data-myValueFromThymeleaf=${contact.id}"
Any attribute whose name is starting with data- is ignored by all browsers. So it won't affect the UI and you can easily read the value in javascript.
I prefer this because it's not ideal to put javascript code in html (see unobtrusive javascript)
I have asked the Thymeleaf project on twitter, and their answer is:
You can use both the "+" operator or literal substitutions. For example: <a th:href="|javascript:change('start','${taskId}')|">
For more info: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html
I have tried, and it works~
Related
So does NuxtJS have support for concatting a string literal with a dynamic variable, to bind a tag's href attribute? Their documentation seems to mention nothing about it.
Like:
<a :href="('https://customu.rl/' + getProfile.data.profile_data.username)"
The above seems to be rendering undefined.
Also tried this, no luck:
<a :href="'https://customu.rl/' + getProfile.data.profile_data.username"
Your second option seems to be right.
I think your property getProfile.data.profile_data.username returns undefined.
I created a simple example where you can see the functionality you require.
Let me know if it helps.
I'm trying to add variable inside th:onsubmit with
th:onsubmit="return confirm('Hi '" + ${user.name} + "')"
but it always get me error like
Malformed markup: Attribute "+" appears more than once in element
also i can't find onsubmit example on thymeleaf official document
There is nothing special about onsubmit which is why there is nothing in the official documentation about it -- you're simply not formatting the expression correctly. I would format the expressions like this:
th:data-username="${user.name}"
onsubmit="return confirm('Hi ' + this.getAttribute('data-username'))"
(To avoid security errors, Thymeleaf may prohibit you from concatenating strings directly in your JavaScript, which is why I'm separating it out to it's own attribute.)
You can use a function in your onsubmit event, and assign the Thymeleaf expression to a variable within that function.
Example (using onclick in my case):
<yourtag ... onclick="runMyFunction();"></yourtag>
...
<script th:inline="javascript">
function runMyFunction() {
var user_name = [[${user.name}]];
console.log(user_name);
}
</script>
This uses Thymeleaf's JavaScript inlining syntax [[${...}]].
Note that in this case, the event does not have to be th:onsubmit - just onsubmit.
I want to login a website with javascript and i dont know it is allowed. I use javascript code in url and it gives me Invalid left-hand side in assignment
at :1:10 error.
javascript:document.getElementById("OtherUsername")="myid";document.getElementById("OtherPassword")="mypassword";$("#btnSend").click();
As Vinod stated, you are trying to assign myid (a string) to document.getElementById("OtherUsername"), an object. That won't work. You need to assign it to document.getElementById("OtherUsername").value
This should work:
javascript:document.getElementById("OtherUsername").value="myid";document.getElementById("OtherPassword").value="mypassword";$("#btnSend").click();
The last bit $("#btnSend").click(); will only work if they have jQuery active on that site, or if you include it through use of a plugin somehow.
you can not Assign a value to a dom element
if OtherUsername element and OtherPassword element is a form you can follow my code
document.getElementById("OtherUsername").value="myid";
document.getElementById("OtherPassword").value="mypassword";
$("#btnSend").submit(); //btnSend should be the from id
I'm trying to define the following line as a variable in Jquery by using
var attributeID = $("#element_to_pop_up").attr("attrId");
The link I am using is and attrId is a variable
<a id="element_to_pop_up" attrId="variable">Link</a>
Basically, I am trying to define the value of my attribute "attrId" as a variable.
One more thing to note This is within a FreeMarker template so FreeMarker is already giving me my variable value. I don't have to do an onclick to get the value.
Is there a better way of doing this?
HTML5 supports the notion of data attributes for application-specific uses. So a better approach is to name all your attributes with the data- prefix:
<a id="element_to_pop_up" data-attrid="variable">Link</a>
To include the information that #chris97ong added, the way to access this variable data using jQuery is:
var x= $('#element_to_pop_up').data('attrid');
function eegetdropdownvalue_str(ctl){return ctl.selectedIndex>=0&&ctl[ctl.selectedIndex]?ctl[ctl.selectedIndex].value:''}
The above function is called with
co.p1A10=eegetdropdownvalue_str(document.formc.p1A10);
I want to switch the call over to jQuery to drop the document.form reference however doing this
co.p1A10=eegetdropdownvalue_str($('p1A10'));
Does not reference the control correctly - How should I do this?
There's two things wrong with your code.
First, $('p1A10') references nothing.
jQuery selectors work almost identically (if not completely identically) to the way css works.
So, just ask yourself how you would reference the object(s) in question in CSS and you're half way there.
I'm assuming that p1A10 is the name or id of an object. Since we're using CSS/jQuery syntax, this should be an id, although you can select by other attributes such as $("select[name='p1A10']") .
To reference an object by ID we use the # character (again, just like in CSS). So we can select your node via $('#p1A10').
The second problem is that your function is expecting a DOM object not a jQuery object. To keep your code intact, we need to say $('#p1A10')[0] where 0 is the first element within the collection of jQuery elements.
I've provided two examples to explain this a little better. One uses your existing infrastructure and one replaces it.
http://jsfiddle.net/TD6Uu/5/
Hope it helps.
Given a form with id formc and a select with name p1A10 you could e.g. use:
o.p1A10 = eegetdropdownvalue_str($('#formc select[name="p1A10"]').get(0));
If this doesn't do it, please provide use with the exact HTML structure