In my current spring-boot project, I have one view with this html code:
<button type="button" class="btn btn-primary" onclick="upload()" th:utext="#{modal.save}"></button>
in the onclick attribute, the call for the function upload() should have one parameter, which value is stored in the thymeleaf variable ${gallery}.
Anyone can tell mehow to use the expression in the above command?
I already try this:
th:onclick="upload(${gallery)"
th:attr="onclick=upload(${gallery)"
None of this worked.
thymeleaf 3.0.10 th:onclick
thymeleaf variable not working
This should work:
th:attr="onclick=|upload('${gallery}')|"
I solve this issue with this approach:
th:onclick="|upload('${command['class'].simpleName}', '${gallery}')|"
This should work:
<button th:onclick="'javascript:upload(' + ${gallery} + ')'"></button>
In 3.0.10 version of Thymeleaf
use [[ ]] it's more easier , thymeleaf goes to inject the value in template
if the value is string no quote need
<button th:data-id="${quartzInfo.id}"
th:onclick="del(this,[[${quartzInfo.id}]]" type="button">
</button>
The older replies does not work in the new version of 3.0.10. Now you need:
<button th:data-id="${quartzInfo.id}"
onclick="del(this,this.getAttribute('data-id'))" type="button">
</button>
In fact this one is working too :
th:attr="onclick=${'upload('+gallery+')'}"
yes it's to late, but i hope this will help people who need it
try this
th:onclick="'upload('+${gallery}+')'"
If you are going to use attr, where there is a string the HTML will crash and you have to do the following, in case of string values.
th:attr="onclick=${'toggleContractLine('+ ''' + contract.id + ''' + ')'}"
Related
I am trying to set a background Image of a div with this code .But it is not working. If i use backgroundColor instead then it works fine .
Can anyone tell me whats wrong with this .
Sorry for noob question.
<button onclick="document.getElementById('ab').style.backgroundImage='url("pexel.jpg")'">Click me</button>
Syntax error, see below
<button onclick="document.getElementById('ab').style.backgroundImage='url(pexel.jpg)'">Click me</button>
Use 'url(pexel.jpg)' instead of 'url("pexel.jpg")'
The quotes in the url() assignment are what's causing the issue.
You need to escape them correctly.
<button onclick="document.getElementById('ab').style.backgroundImage='url(\'pexel.jpg\')';">Click me</button>
EDIT: I want to insert value="questions[questionNum]['choices'][i]", I do not know the syntax to do this.
I wish to change the value of buttons, using values from a multi level array. It worked with radio buttons, but I would like to use standard buttons this time.
$('#showChoices').append('<input type="button" id="buttons">' + questions[questionNum]['choices'][i] + '</input>');
This works but the following doesn't:
$('#showChoices').append('<input type="button" id="buttons" value='"questions[questionNum]['choices'][i]"'></input>');
JSBin of the first
Thanks
You just want to be able to set the value prop with JavaScript? You just need to add the value with string concatenation after value, just like in your first example.
$('#showChoices').append('<input type="button" id="buttons" value=' + questions[questionNum]['choices'][i] + '></input>');
Or if you want you could try template strings:
$('#showChoices').append(`<input type="button" id="buttons" value=${questions[questionNum]['choices'][i]}></input>`);
They use backticks instead of single or double-quotes and instead of concatination (with +'s) you just write the JavaScript directly in the string, sort of like in your example — but it needs to be wrapped in ${}
Try this :
$('#showChoices').append('<input type="button" id="buttons" value="'+ questions[questionNum]['choices'][i] +'"/>');
You need to add value using string concatenation. Also, id has to be unique so I have added index of choices to your id to make them unique.
var questions = {'questionNum' : {'choices' : ['foo', 'bar'] }};
for(var i = 0; i < questions.questionNum.choices.length; ++i) {
$('#showChoices').append('<input type="button" id="buttons'+[i]+'" value="' + questions.questionNum.choices[i] +'"></input>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='showChoices'></div>
Is this what you need
$('#showChoices').append('<input type="button" id="buttons" name="buttons" value='+butVal+'></input>');
You know, after answering this question, I can't help but feel we all had tunnel vision. Maybe it doesn't really matter but I feel like if you're using jQuery you should be using the attr() method rather than string concatenation in the first place. So:
$('<input type="button" id="buttons">').attr('value', questions[questionNum]['choices'][i]).appendTo('#showChoices');
Is actually what I'd probably write. (I changed append to appendTo` to allow me to chain both properties allowing just one line.
I also noticed: the input element shouldn't be closed — it's a "self closing" tag meaning you don't add a </input> at the end.
And as you asked elsewhere: yes, for reabability's sake I would save all that code to a variable. So:
const choice = questions[questionNum]['choices'][i]; // maybe even break this down into several variables. It's quite deep
$('<input type="button" id="buttons">').attr('value', choice).appendTo('#showChoices');
This question already has an answer here:
Passing parameters to Javascript from jsp
(1 answer)
Closed 7 years ago.
I'm having a jsp page which displays a grid, containing data from the database. For each and every record I'm having an action called editRecord() which is a button in the jsp page. I'm having the editRecord function within a separate javascript file which has id(id of the record) as the parameter.
What I need to know is, if I'm having something like this in my jsp for my button:
<button id="reviewEdit" type="button"
class="edit-btn pull-right margin-left10 recos"
onclick="editPersonalDetail()">
<span class="fa fa-edit margin-right3"></span>
<fmt:message key="review.grid.btn.edit"/>
</button>
How should I pass the record id as the parameter within the onclick function? If needed can post the function as well.
Any help would be appreciated.
In a JSP you can just simply print the variable as a literal:
editPersonalDetail(<%=record.getId()%>);
This is a JSP expression shorthand, do not confuse it with scriptlets (which are bad). Of course, the code inside the JSP block will be different.
You can also use the JSTL c:out:
editPersonalDetail(<c:out value="record.id"/>);
One simple way is you can pass the value for your record id as:
onclick="editPersonalDetail('"+ <%= your_jsp_variable %> +"')"
The other way you can use JSTL library.
Another option is to do it through javascript.
$(".use-address").click(function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".nr").text(); // Find the text
// Let's test it out
alert($text);
});
http://jsfiddle.net/UW38e/1264/
Another way is to keep variables in hidden inputs.
So in jsp you have this:
<input id='record_id' type='hidden' value='<%= record.getId() %>' />
and in javascript you get it like this:
var record_id = document.getElementById("record_id").value;
or use jQuery:
var record_id = $("#record_id").val();
If you are passing the value that is present in the model, then you could try this..
onclick="editPersonalDetail(' + modelname.columnname +')"
check whether it works.
Just use JSTL.
<button id="reviewEdit" type="button"
class="edit-btn pull-right margin-left10 recos"
onclick="editPersonalDetail('<c:out value="${record.id}"/>')">
<span class="fa fa-edit margin-right3"></span>
<fmt:message key="review.grid.btn.edit"/>
</button>
<button value="Cancel" class="commonBtn commonBtn-small cancelBtn "
onclick="cancelEvent(<script>document.write(cancelButtonAction);</script>);" tabindex="11" type="button"><script>document.write(cancelButtonAction);</script></button>
1) <script>document.write(cancelButtonAction);</script> this is fine work and resolve the value but
2)onclick="cancelEvent(<script>document.write(cancelButtonAction);</script>);" this is not working single and double quotes also apply on it but still not working.
any one can solve this.
onclick="write(cancelButtonAction)"
I believe this should work..
I need to print a button to a div that would pass a variable MyVar(string), or, to be precise, it's value, as a parameter to a function addfr(). The code:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr(\""+MyVar+"\")\">Add as friend</button>";
Instead of the expected
<button onclick="addfr("MyVar")">Add as friend</button>"
I get:
<button onclick="addfr(" MyVar")"="">
What is happening here? Any ideas how to fix this?
Edit: The final solution is, for those interested:
<button onclick=\"addfr(""+MyVar+"")\">Add as friend</button>
It needs to be HTML escaped. Try using " in place of \".
You can use single quotes instead:
document.getElementById("somediv").innerHTML="<button onclick=\"addfr('"+MyVar+"')\">Add as friend</button>";