So i'm trying to set an image src attribute dynamically via javascript like so:

var url = 'query.php?m=traffic&q=getgraph&id='+pipeId+'&start=-3h';
console.log(url);
$('#3h').attr('src',url);

The problem is, it shows up like so query.php?m=traffic&q=getgraph&id=1&start=-3h in the console, the the actual set src for the #3h image element is query.php?m=traffic&q=getgraph&id=1&start=-3h

And then, of course, it doesn't work. How do I avoid jQuery's attr() methods' character escaping? Any other suggestions on how should I achieve my goal are very wele as well.

So i'm trying to set an image src attribute dynamically via javascript like so:

var url = 'query.php?m=traffic&q=getgraph&id='+pipeId+'&start=-3h';
console.log(url);
$('#3h').attr('src',url);

The problem is, it shows up like so query.php?m=traffic&q=getgraph&id=1&start=-3h in the console, the the actual set src for the #3h image element is query.php?m=traffic&q=getgraph&id=1&start=-3h

And then, of course, it doesn't work. How do I avoid jQuery's attr() methods' character escaping? Any other suggestions on how should I achieve my goal are very wele as well.

• javascript
• jquery
• dom
• escaping

• 7 & is HTML for & (while & is HTML for Start an entity). So why "of course, it doesn't work"? This is expected behaviour and it should work. What URL do you see in the access logs for the server? What URL do you see requested for the image in Firebug or another network monitoring tool? The character escaping is done internally by DOM, not by the jQuery wrapper. (Actually, it is done on the way out when serialise back to HTML) – Quentin Commented Feb 18, 2011 at 17:05
• @David Dorward: I meant "it doesn't work" by testing it out by pasting blahblahblah./… (it doesn't work like that) and blahblahblah./… (this one does work) – donk Commented Feb 18, 2011 at 18:42
• 2 So to test it you copied an HTML attribute and tried to use it as a URL? That won't work. You need to convert the HTML into text to get a URL out (and converting to text will turn & back to &). – Quentin Commented Feb 18, 2011 at 19:31

5 Answers 5

If it doesn't work, it's not due to the ampersands being escaped. As an attribute in an HTML element, all XML entities need to be escaped:

--+-------
< | &lt;
> | &gt;
" | &quot;
& | &amp;

As an example, if I had index.php?foo=bar&buzz=baz, and I wanted to have an a element target that page, I would need to set the anchor like so:

<a href="index.php?foo=bar&amp;buzz=baz

The href would get decoded as: index.php?foo=bar&buzz=baz

I'll see if I can't find the relevant documentation for you.

The only issue that I see in your code is that your ID attribute is starting with a number, which is invalid in HTML4.

$('#3h') // invalid for HTML4

You should change the ID on the element to begin with a letter, like h3

$('#h3') // valid ID for HTML4

For me it's working:

http://jsfiddle/y249K/

You can escape the data before writing it to an attribute. Try out this fiddle

 $('#3h').attr('src', escape(url));

then

unescape($('#3h').attr('src'))

You could avoid using jQuery for this and use native JavaScript/DOM functions instead:

document.getElementById('3h').src = url;