Javascript quote escape giving bugs - javascript

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>";

Related

Why doesn't my JavaScript statement change the background image properly?

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>

Using thymeleaf variable in onclick attribute

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 + ''' + ')'}"

Resolve JavaScript variable inside Jsp function calling

<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..

How to trigger jquery input file?

I am trying to trigger input tag to select a file by a button click though jquery. code example like the following
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
${'input_file').select("http://www.someimage.com/image.gif");
}
After hours of research, I still have not got the solution how I could make this happen.
Appreciate for any suggestion or solution
Thanks you
I was going to suggest:
$("#input-file").trigger("click");
but then I remembered there are security restrictions which prevent triggering and setting the values of file input dialogs.
There are some ways around it though, take a look at this question: https://stackoverflow.com/a/3030174/992435
You have typos in your codes... correct as follows;
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('#input_file').val("http://www.someimage.com/image.gif");
}
Use Val in place of Select
You missed a # sign in the function
You missed a quote in the file input tag
You used a curly brace instead of a bracket
There were a couple of things wrong with your snippet. You were not using script tags, you had forgotten the '#' before ID selectors and you had a curly bracket after the dollar sign.
<input type="file" id="input_file/>
<button onclick="select_file()"/>
<script>
function select_file() {
$('#input_file').select("http://www.someimage.com/image.gif");
}
</script>
Although the way you are approaching your problem technically works, I would never recommend it since it can lead to unmaintainable code. A better approach would be something like:
<input type="file" id="input_file/>
<button class="changeInputButton" />
<script>
$('.changeInputButton').on('click', function () {
$('#input_file').val("http://www.someimage.com/image.gif");
});
</script>
You should use
<input type="hidden" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('input_file').val("http://www.someimage.com/image.gif");
}
The input type of file is used mainly for local file system files.
EDIT: Sorry about the typos

How can I use a multiline value for an HTML tag attribute? (i.e. how do I escape newline?)

How do I include a newline in an HTML tag attribute?
For example:
<a href="somepage.html" onclick="javascript: foo('This is a multiline string.
This is the part after the newline.')">some link</a>
Edit: Sorry, bad example, what if the tag happened to not be in javascript, say:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
Edit 2: Turns out the newline in the string wasn't my problem, it was the javascript function I was calling. FWIW, "
" can be used for newline in an HTML attribute.
From what I remember about the HTML standard, character entities work in attributes, so this might work:
<sometag someattr="This is a multiline string.
This is the part after the newline." />
I'm not sure if the "newline" you want ought to be
(\n) or
(\r\n), and I'm not sure if browsers will interpret it the way you want.
Why do you need it? What specific problem are you trying to solve by adding a newline in an HTML tag attribute?
To include a multiline value, just continue the text of the html attribute on the next line in your editor e.g.
<input type="submit" value="hallo
hallo">
will put the second hallo under the first
As a general rule newlines in attributes are preserved so your second example would work fine. Did you try it? Can you give a specific example where you are having problems with it?
As test take a look at this:-
<a href="somepage3.html" onclick="javascript: alert(this.getAttribute('thing'))" thing="This is a multiline string.
This is the part after the newline.">some link</a>
The alert include the newline in the attribute.
<a href="somepage.html" onclick="javascript: foo('This is a multiline string. \
This is the part after the newline.')">some link</a>
Javascript needs a backslash at the end of the new line in a string.
i'm not certain, but you can try \r or \n
javascript: foo('This is a multiline string.\rThis is the part after the newline.')
or
javascript: foo('This is a multiline string.\nThis is the part after the newline.')
Usually, line breaks in HTML source code display what you intended in the result.
(Depends on the editor of course)
Since it's in Javascript, you would use "\n" if inside double-quotes (not positive about single-quotes, I've been in PHP a lot lately.
Honestly, it's worth mentioning that you should use Events and a delegator instead of placing a javascript event directly on the element.

Categories

Resources