javascript: url in jquery html() in onmouseover in a href - javascript

This url throws a missing ) after argument error. It is being dynamically generated by PHP. I cannot figure out the correct sequence/placement of single and double quotes to render it.
Cards
The particular effect desired is to onmouseover insert an image into .menu-image li. All I can figure out is that the img src with the quotes (I've tried single and double) is not liked and throws the argument error.

Try escaping the incorrect quotes with \ or \\.
I.e. html('<img src=\'cards_1.png\' />');
Alternatively, you can just use ". An URL encoder should have done this for you automatically.
A very popular error btw. is to not encode every & in an URL as &. Browsers usually guess right what was intended though, so people never learn. But the link
example
is actually incorrect and should be
example
Now if you had been using an URL encoder instead of just "printing" the string, it should automatically have converted your double quote to & and probably saved you some headaches.

Looks like you need to escape the innermost single quotes like so:
<a href="cards.html" onmouseover="jQuery('.menu-image li').html('<img src=\'cards_1.png\' />');

You need to write this:
Cards
...otherwise your browser can't distinguish if the apostrophes belong to the <img tag or the html( command

Use encoded quotes for the <img/> tag:
Cards

Related

How do you use multiple quotes in javascript?

What do you do when you already have single and double quotes in a URL, but then you need to wrap that URL in quotes?
For example:
<script src="http://(some url text)xpath='//*[#id="node-1075"]/div/div[1]/div/div/p[2]'"></script>
The node ID is wrapped in quotes, if I put the URL alone in the address bar it works, but as soon as it gets wrapped in quotes it doesn't, I can't escape the quotes either or else it will fail, what do I do?
You should be able to replace the double quotes with: %22
And the single quotes with: %27
So your URL would be:
"http://(some url text)xpath=%27//*[#id=%22node-1075%22]/div/div[1]/div/div/p[2]%27"
Here is the complete list of ASCII Encoding http://www.w3schools.com/tags/ref_urlencode.asp
You need to escape them; usually you write (inside HTML files) double quotes first, then single quotes (the opposite in .js files, but that's my personal style); whenever you need the same in between you need to escape it.
Example:
document.getElementById("some").innerHTML = "<img src='something' onmouseover='change(\"ex1\")' />";
Notice that using the JavaScript escape character (\) isn't enough in an HTML context; you need to replace the double-quote with the proper XML entity representation, ".
Example:
Do It!
In your case, I would recommend to URL encode "the URL" though.

unescape in javascript not working when %26 ( & sign) is in value

I have the below code in my JSP. UI displays every character correctly other than "&".
<c:out value="<script>var escapedData=unescape('${column}');
$('div').html(escapedData);</script>" escapeXml="false" /> </div>
E.g. 1) working case
input = ni!er#
Value in my escapedData variable is ni%21er%40. Now when I put it in my div using
$('div').html(escapedData); then o/p on html is as expected
E.g. 2) Issue case
input = nice&
Value in my escapedData variable is nice%26. Now when I put it in my div using
$('div').html(escapedData); then also it displays below
$('#test20').html('nice%26');
However, when output is displayed in JSP, it just prints "nice". It truncates everything after &.
Any suggestions?
It looks like you have some misunderstandings what unescape(val)/escape(val) do and where you need them. And what you need to take attention of when you use .html().
HTML and URI have certain character that have special meanings. The most important ones are:
HTML: <, >, &
URI: /,?,%,&
If you want to use one of those characters in HTML or URI you need to escape them.
The escaping for URI and for HTML are different.
The functions unescape/escape (deprecated) and decodeURI/endcodeURI are for URI. But was you want is to escape your data into the HTML format.
There is no build-in function in_JS_ that does this but you could e.g. use the code of the answer to this question Can I escape html special chars in javascript?.
But as it seems that you use jQuery you could think of just using .text instead of .html as this will do the escaping for you.
An additional note:
I'm pretty sure that the var escapedData=unescape('${column}'); does not do anything. I assume that ${column} already is ni!er#/nice&.
So please check your source code. If var escapedData=unescape('${column}'); will look like var escapedData=unescape('ni!er#'); then you should remove the unescape otherwise you would not get the expected result if the ${column} contains something like e.g. %23.

How can I escape backslash while adding html markup using Jquery appentTo function

On the click of a button I am dynamically adding the following Div to my web page.
The problem is the image source cannot be found due to the incorrect path caused by the backslash just before "\Content". The backslash is already reserved to escape quotes.
How can I workaround this.
$("<div class=\"input-append\"><label style=\"background-color:#e0ffff\">" + artistVal + "</label><img onclick=\"RemoveArtist()\" id=\"removeartist\" src=\"\Content\bootstrap\img\cross-button.png\" /></div>").appendTo(addDiv);
I am getting an error 400 pulling the image added to the div
Request URL:http://myhost:53159/Content%08ootstrapimgcross-button.png
You can either use double backslashes (\\) in file paths, or use forward slashes (/). Using a forward slash is more reliable, since backslashes don't work correctly on all web servers.
Use slash instead of backslash for your src element. This way you avoid the escaping problem inside URLs

how to escape JavaScript code in HTML

I have some addHtml JavaScript function in my JS code. I wonder how to escape HTML/JS code properly. Basically, what I am trying right now is:
addHtml("<a onclick=\"alert(\\\"Hello from JS\\\")\">click me</a>")
However, that doesn't work. It adds the a element but it doesn't do anything when I click it.
I don't want to replace all " by ' as a workaround. (If I do, it works.)
I wonder how to escape HTML/JS code properly.
To insert string content into an HTML event handler attribute:
(1) Encode it as a JavaScript string literal:
alert("Hello \"world\"");
(2) Encode the complete JavaScript statement as HTML:
<a onclick="alert("Hello \"world\""">foo</a>
And since you seem to be including that HTML inside a JavaScript string literal again, you have to JS-encode it again:
html= "<a onclick=\"alert("Hello \\"world\\""\">foo<\/a>";
Notice the double-backslashes and also the <\/, which is necessary to avoid a </ sequence in a <script> block, which would otherwise be invalid and might break.
You can make this less bad for yourself by mixing single and double quotes to cut down on the amount of double-escaping going on, but you can't solve it for the general case; there are many other characters that will cause problems.
All this escaping horror is another good reason to avoid inline event handler attributes. Slinging strings full of HTML around sucks. Use DOM-style methods, assigning event handlers directly from JavaScript instead:
var a= document.createElement('a');
a.onclick= function() {
alert('Hello from normal JS with no extra escaping!');
};
My solution would be
addHtml('<a onclick="alert(\'Hello from JS\')">click me</a>')
I typically use single quotes in Javascript strings, and double quotes in HTML attributes. I think it's a good rule to follow.
How about this?
addHtml("<a onclick=\"alert("Hello from JS")\">click me</a>");
It worked when I tested in Firefox, at any rate.
addHtml("<a onclick='alert(\"Hello from JS\")'>click me</a>")
The problem is probably this...
As your code is now, it will add this to the HTML
<a onclick="alert("Hello from Javascript")"></a>
This is assuming the escape slashes will all be removed properly.
The problem is that the alert can't handle the " inside it... you'll have to change those quotes to single quotes.
addHtml("<a onclick=\"alert(\\\'Hello from JS\\\')\">click me</a>")
That should work for you.
What does the final HTML rendered in the browser look like ? I think the three slashes might be causing an issue .

pass string with spaces into javascript

i'm trying to pass a php defined string with spaces to a javascript function, so that i can append to a query string. However, the function only works when there are NO spaces, and does not even execute when there are spaces -- by testing with alert().
is there a way I can pass strings with spaces into javascript functions, so that i can eventually do an escape(), and then append to my query string? (using alert() in this example)
.php file
<a onClick=showUser('<?php echo $stringwithspaces; ?>')>click here</a>
.js file
function showUser(str)
{
alert (str);
}
if I could only do something like... onClick=showUser(escape('<?php echo $deptname; ?>'))... that would be awesome, but that didn't work. Any help would be much appreciated! Thanks!
The problem is you didn't quote the attribute value. You can leave quotes off of attribute values only if the value doesn't contain spaces, otherwise the HTML processor can't tell when an attribute ends. Even so, it's not recommended; you should always quote HTML attributes.
user
should work. The call to addslashes escapes quotes, which would otherwise cause another problem (ending the attribute or string argument of showUser too soon).
Yes you can you are missing " in you xml attribute field:
Each attribute must have a starting and an ending "
myField="blabla ..."
onClick="showUser(escape('<?php echo $deptname; ?>'))"
Try the Unicode escape sequence for a space character, '\u0020'.

Categories