I am trying to insert an email link using jquery, but if the email body has a & in it, it will not work.
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
The part that is breaking it is &img=. I've tried using & but that didnt work either. Any suggestions?
Note: If there is no &, everything works fine.
You can try this, hope it works
'%26img='
Without knowing what is in js_images[getImg], it's hard to say what is going wrong.
One thing to keep in mind is that you should always encode components before creating a URL. For example:
var x = encodeURIComponent(js_images[getImg].title)
$('#em_button').html('<a href="mailto:?subject=A Photo: '+ x +'&body...')
Furthermore, if you're creating something like a link, you might want to make things clearer by writing it as follows:
var url = 'mailto:subject=A Photo: ' + encodeURIComponent(js_images[getImg].title) +
'&body=I thought you would like this photo: ' + encodeURIComponent(thisPage) +
'&id=' + encodeURIComponent(getGall) +
'&img=' + encodeURIComponent(js_images[getImg].filename);
var src = encodeURIComponent(homeUrl) + '/' +
encodeURIComponent(tUrl) + '/img/email.png'
var $a = $('<a/>', {
href: url
});
var $img = $('<img/>', {
src: src,
title: 'Email this photo'
});
$a.append($img);
$('#em_button').html($a);
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
If you just append the URL parameters and the body text into one string, the & from inside the body text would be parsed as URL argument. In PHP i would use urlencode to encode occurrences of such characters into %xx-values.
Looking at the answer of Константин Рекунов, I would assume you could use encodeURIComponent to encode the body contents.
encodeURIComponent( thisPage + '?id=' + getGall + '&img=' + js_images[getImg].filename )
See: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent
You could avoid that problem by using URL rewriting on your server for the image files.
Instead of:
thisPage + '?id=' + getGall + '&img=' + js_images[getImg].filename
…it might be:
thisPage + '/' + getGall + '/img/' + js_images[getImg].filename
I think your problem is you have a second ? in your query string.
You should substitute the second ? with &. Also all your & should be written as &
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
Instead of using "&" try using &
use +encodeURIComponent('&')+
Related
I have the following line of code,
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
I essentially want the "data.response.results[i].webUrl" to replace the url string, but I'm not quite sure how to escape the quotes properly.
You can escape quotes by replacing them with \"
or just use single quotes - '
So "<div><a href="url">" becomes
"<div><a href=\"url\">" or "<div><a href='url'>"
a single quote ' and a string concatenator +
$("#busdata").append("<div><a href='"+ data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");
Your syntax is wrong. You need to escape quotes. Change your <a href="url"> to <a href=\"url\"> like this:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
Or if you feel that's a bit tough, you can exchange the quotes, ' for ":
$("#busdata").append('<div>' + data.response.results[i].webUrl + "</div>");
Else, if you are trying to add the URL from the response:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
if url is a variable
$("#busdata").append("<div><a href='" + url +"'>" + data.response.results[i].webUrl + "</a></div>");
and if you want to write by yourself
$("#busdata").append("<div><a href='url'>" + data.response.results[i].webUrl + "</a></div>");
You can store it in variable instead :
var url = data.response.results[i].webUrl;
$("#busdata").append("<div>" + url + "</div>");
Hope this helps.
Simply do it following my example:
var a = $('<a />', {
href: 'url here',
text: 'text here'
}); $('body').append(a);
You could do this :
$("#busdata").append("<div><a href='"+data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");
Since you are using double quotes for the string to append, you can use single quotes around the variable in the href attribute and then add that variable.
This is most easily achieved by not building HTML by smashing strings together in the first place.
$("#busdata").append(
$("<div />").append(
$("<a />").attr("href", data.response.results[i].webUrl)
)
);
Escaping quotes is not necessary
$("#busdata")
.append("<div><a href="
+ data.response.results[i].webUrl
+ ">"
+ data.response.results[i].webUrl
+ "</a></div>"
);
so how can I quote a java script function parameters in Razor's Html.Raw helper?
In order to be able to invoke defined js function it looks like I need to have parameters single-quoted..
while output of NON escaped parameters:
#Html.Raw("<a onClick='copyRowValues(" + name + ", " + localTable + ", " + sqlName + ");' > " + name + " </a>");
translates like:
<a onclick="copyRowValues(ASN, ASN, ASN_RECORD_ID);">
which looks nice, but when those parameters for copyRowValues(...) js function are not single quoted, function is not being called.
so when I add single-quotes like this:
#Html.Raw("<a onClick='copyRowValues('" + name + "', '" + localTable + "', '" + sqlName + "');' > " + name + " </a>");
that produces:
<a 'asn_record_id');'="" 'asn',="" asn',="" onclick="copyRowValues(">
escaping with # or \ just didn't work for me.
Thank you for straightforward solution!
Does using double double-quotes work? e.g.
#Html.Raw("<a onClick=""copyRowValues('" + name + "', '" + localTable + "', '" + sqlName + "');"" > " + name + " </a>");
Why not solution without Html.Raw() ? It's somehow obsollete approach to use it for generating the output html.
Try something like this:
<a onclick="copyRowValues(#name, #localTable, #sqlName)">#name</a>
Hope it helps.
I read quite some articles and tried some approaches, but couldn't get it to work.
htmlCode += '<button id="' + addButtonId + '" title="' + addButtonTitle + '" class="button" onclick="getProductUrl(' + url + '); return false;"><span><span>' + addWithButonTitle + '</span></span></button>';
and the function itself:
getProductUrl: function(url) {
return setLocation('\'' + decodeURIComponent(url) + document.getElementById('qty_field').value + '\'');
},
Apparently, the string value of the url is not treated as a string. I get an error of missing bracket here: getProductUrl(http:^//...rest of the url. Of course the problem is not in the bracket, but in the fact that the // are treated as a start of a comment.
So the thing that I have to do is to pass this url string value CORRECTLY as a string.
I tried first decoding and then passing (because decodeURIComponent(url) should return string. Also I tried String(url) and url + "". Also somehow escaping the special characters: url.replace('/','\/') or even the /g thingy, which didn't work at all.
So, all these approaches were unsuccessful. I would really appreciate a hint or a solution here.
Try this one
onclick="getProductUrl('" + url + "');"
For your updated line of code:
htmlCode += '<button id="' + addButtonId + '" title="' + addButtonTitle + '" class="button" onclick="getProductUrl(\'' + url + '\'); return false;"><span><span>' + addWithButonTitle + '</span></span></button>';
I search to detect in a string if the content is just a text or if it's an image URL. I base my detection with the filetype, but I don't know how to detect multiple file types…
var wrapper = (content.indexOf(".jpg", ".jpeg", ".gif", ".png", ".bmp") != -1)
? '<img src="' + content + '" />'
: '<span>' + content + '</span>';
I know this syntax for indexOf is wrong, but in an ideal, that's what I search!
I would go with a cleaner solution - no slice/indexOf or anything like that involved: It tests all elements of the ext array against the content and returns the elements, which match. Since there should be only one match, you just need to check the first element.
var content = "/test.png",
ext = [".jpg", ".jpeg", ".gif", ".png", ".bmp"],
res,wrapper;
res = ext.filter(function(el){return content.match(el)});
wrapper = res[0] ? '<img src="'+content+'" />' : '<span>'+content+'</span>';
See Array.prototype.filter on MDN for more explanation. As with Fabrizio's solution this solution might break too, if you have filenames with several . /test.png.jpg (whatever the reason for that might be).
just use indexOf over an array
var wrapper = ([".jpg", ".jpeg", ".gif", ".png", ".bmp"].indexOf(content.slice(-4)) > -1)
? '<img src="' + content + '" />'
: '<span>' + content + '</span>';
content.slice(-4) return last 4 characters of content
On older browser you will need to use a polyfill for indexOf,
see https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf
I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...
The javascript that adds the tooltip to each image is as follows...
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
return '<img src="' + url[0] + '" width="75" height="75" alt="" />';
};
url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source
the above javascript gives me the following error
missing ) after argument list
how can i escape single and double quote properly...Please help me...-
I think the onmouseover portion is wrong, and you want:
onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"
Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.
p.s. I fixed your <img> tag - I think in general <img> tags should be self-closing <img... />, not <img...></img>.
Assuming the HTML " entity gets interpreted properly (and reformatting so people can see what's going on.):
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
// wrapping attributes in double-quotes, so use double-quote
// entity within attribute values:
return '<a href="' + url[4] + '" ' +
'onmouseover="Tip(\'<img src="' + url[5]+'"/><br/>' +
'<b>' + url[1] + '</b><br />' +
'Category:' + url[6] + '<br/>' +
'Views:' + url[2] + '<br/>' +
'Uploaded by:' + url[3] + '\')" ' +
'onmouseout="UnTip()">';
};
Note: you should probably entity-encode all the < to < inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip