Interesting html glitch in jquery variable with characters like &, /, etc.???

Question

Hi,

I'm trying to add html around div contents that my jquery function returns after the ajax request. It does work and adds a little of the html code I've added but upon submitting the "new" modified data with the addtnl html... it strips out this "&aoe=1&q=90" and other parts of the html code that include the & symbol and //?

var url_contents = $('#url_contents').html();
var url_image = $("#imagesz").find('img').attr('src');
var addtnl = '<br\/><table width="100%" border="0" cellspacing="0" cellpadding="0">tr><td valign="top" align="left">' + url_contents + '<\/td><td valign="top" align="right"><img src="http:\/\/mydomain.com\/thumb\/?src=' + url_image + '&aoe=1&q=90" border="0" style="max-width:125px;"><\/td><\/tr><\/table>';

Have never tried this before but it needs to be setup this way so images are cached on my server and not pulled from the websites my function fetches data from. Not quite sure what I'm doing wrong?

Answer 1

try changing the & to &:

var url_contents = $('#url_contents').html();
var url_image = $("#imagesz").find('img').attr('src');
var addtnl = '<br /><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" align="left">' + url_contents + '</td><td valign="top" align="right"><img src="http://mydomain.com/thumb/?src=' + url_image + '&amp;aoe=1&amp;q=90" border="0" style="max-width:125px;"></td></tr></table>';

by the way: i don't think you need to escape the forward slashes (/): instead of \/, you can just write /.

Answer 2

Perhaps you need to call encodeURI on the image source attribute

' ...<img src=' + encodeURI('http://mydomain.com/thumb/?src=' + url_image + '&amp;aoe=1&amp;q=90') + ' border="0" style... '

Answer 3

You need to URL encode the values in the parameters, then you need to HTML encode the entire URL. If there is no characters that need HTML encoding in the src value, you only need to HTML encode the & characters:

...<img src="http://mydomain.com/thumb/?src=' + encodeURI(url_image) + '&amp;aoe=1&amp;q=90" border="0" style="max-width:125px;">...