I need to put a link out from a corporate site to a surveymonkey survey. Our site uses a proprietary CMS limiting me from adding any proper function or third party plugin.
After evaluating options like those exposed in this other question, I believe I call the correct javascript function but everytime I open my CMS, the link duplicates itself... leading me to think I've done something inapropriate.
Things look acceptable on the JSFiddle demo I put together for this question but I'm hoping you'd have a more elegant solution in mind so I could try options !
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + " target='_blank'>Test - survey</a>");
</script>
Try this - it will probably not do what you want in one go, but it will hopefully isolate your problem so that you can better pinpoint what's going wrong:
HTML:
<div id="link"></div>
Javascript:
var SURVEYID = 3
var a = document.createElement("a");
a.innerHTML = "Test - survey";
a.href = "www.surveymonkey.com/r/"
+ SURVEYID
+ "?url="
+ window.location.pathname
+ "&target=_blank"
document.getElementById("link").appendChild(a)
I'm afraid there can be multiple things going wrong, but I hope you can now distinguish between the various parts that your URL is built up from.
This is mostly just a theory because I don't know your CMS or how it works, but I'm assuming that the CMS is inlining the javascript, executing it, and retaining that as its content along with the script. This would create that duplication. The original intent of using document.write I would assume was to completely replace the content; but if it's inlined, it only appends. An external script would completely replace. See below:
All of this text is retained.
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>");
</script>
In this demo, we use document.body.innerHTML instead. This will replace the content completely.
None of this text will be retained.
<script type="text/javascript">
document.body.innerHTML = "<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>";
</script>
If true, complete replacement of the body content is your goal, innerHTML is probably what you need.
Edit + Warning:
This may make the page inaccessible from the CMS depending on how it's built. It may make editing the page impossible.
Edit
Here's a better solution. Just set the href of the anchor by first getting it by the ID. This was based off of Sven ten Haaf's Answer.
<a href="#" id="__smlink" target='_blank'>Test - survey</a>
<script>
document.getElementById('__smlink').href = "https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname;
</script>
Related
I am seeking to create a link on a joomla page that sends mail to a&b#blahblah.com. No matter how I try and do it the final page will attempt to send mail to
a& <script type='text/javascript'> <!-- var prefix = 'ma' + 'il' + 'to'; var path = 'hr' +
'ef' + '='; var addy60868 = 'b' + '#'; addy60868 = addy60868 + 'blahblah' + '.' + 'com';
document.write('<a ' + path + '\'' + prefix + ':' + addy60868 + '\'>');
document.write(addy60868); document.write('<\/a>'); //-->\n </script><script
type='text/javascript'> <!-- document.write('<span style=\'display: none;\'>'); //-->
</script>This email address is being protected from spambots. You need JavaScript enabled to
view it. <script type='text/javascript'> <!-- document.write('</'); document.write('span>');
//--> </script>
(I had to garble that a bit to make it fit) Hopefully it is clear that that is not what I am aiming for. I have looked at lots of ampersand related problems and they are to do with replacing with either & amp; or %26 but neither of these solves the problem. In my own limited understanding it looks like the joomla editor (JCK) interprets it one way and then the page itself another afterwards. Thank you for any help you can give.
I would suggest you to create or use a module for this task.
If you still want to do it manually, please try to set editor to "Editor - None" to the administrator user that you are using in order to work without an editor that may break your markup.
You also have to set: Global configuration -> text filters -> "No Filtering" to super users.
This isn't going to be the answer you want, but it it a bit long for a comment. Are you aware that unless users really work at their browser settings Chrome blocks mailto? You will be better off making a contact record for anyone you want to list the email for and use a pop up link to a contact form for that person. It's not the same as opening someone's email client but I suspect lots of users also don't have those correctly set up either.
Updated:
I'd like to append a self made "tweet this" button after blockquotes with jQuery. I figured out the following three steps are necesarry (some are already resolved thanks to the stackoverflow community):
[resolved] appending anything to the blockquote
[resolved] appending a working twitter share link to the blockquote
making sure it works with multiple blockquotes
The code I'm using at the moment is:
<script type="text/javascript">
var completeurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
completeurl = encodeURIComponent(completeurl);
var twshare = "https://twitter.com/share?url=" + completeurl;
var bq = $( "blockquote" ).text()
$("blockquote").append("<a href='" + twshare + "&text=" + bq + "'>Click to tweet</a>");
</script>
So the current state is: I'm stuck at #3, making it work with multiple blockquotes per page. Ideally it wouldn't be necesarry to manually assign IDs or something similar. So fully automated one #tweet this" button per blockquote. Is that possible?
Thanks!
Without seeing adequate markup, it is difficult to point where the problem is.
However, it works just fine.
See this fiddle: http://jsfiddle.net/JvT7h/2/
$("blockquote").append("<a href='http://twitter.com'>Click to tweet</a>");
Aside: append doesn't add an element after, but as a child inside.
Update:
As per your comments you need to customize the anchor link to be appended to multiple blockquotes depending upon the text of each blockquote.
See this updated demo fiddle: http://jsfiddle.net/abhitalks/JvT7h/3/
JQuery:
$("blockquote").each(function(){
var $link = $("<a />"),
linkText = "Click to tweet",
url = twshare + "&text=" + $(this).text();
$link.attr("href", url);
$link.text(linkText);
$(this).append($link);
});
You need to iterate over all blockquotes and then use $(this) to append the customized anchor.
I'm trying to teach myself jQuery and I'm a little stomped with the load() method. I'm working on eBay listings. Yes, I know includes are not allowed on ebay. However, there is a workaround that has been around for a few years and ebay doesn't seem to be cracking down on it.
var ebayItemID='xxxxxxxxxxxxxx'; // This is eBay code. I cannot edit it.
<h1 id="title"> TO BE REPLACED</h1>
$(document).ready(function(){
var link = "http://www.ebay.com/itm/" + ebayItemID + "?item=" + ebayItemID + &viewitem=&vxp=mtr";
var newTitle = $('#title').load(link + "#itemTitle");
$('#title').html(newTitle);
});
What's the point of this. I want to show the item title on the description, but I want to do so dynamically,
load will not work on different domains (ebay on your case)
load will set the content directly to your element. You can't assign it to a var.
If you would like to indicate you want to extract content from a specific element you need to add a space between your link and the element id:
You can find more info on the jQuery docs
$('#title').load(link + ' #itemTitle', function() {
alert('Load was performed.');
});
When you use load will place the returned html into the element(this case #title).
So you don't need to call html after it.
I'm working with a plugin that is only Javascript. I need to have it dynamically create a DIV element with an advertisement in it.
I can't figure out why this doesn't work:
$(this).append('<div class="overlay-background">Advertisement
<script type="text-javascript">
GA_googleFillSlot("blog_landing_right_rectangle_300x250");
</script>'
It results in the element created with "Hello World" but it does not execute the GA-googleFillSlot function.
appending HTML into the DOM does not cause the browser to evaluate any script tags in said appended HTML.
If you really wanted to, you could evaluate the javascript by using eval():
eval($(this).find("script").text());
I know this is an old question but I've had a similar problem today.
The solution was using createContextualFragment.
My code looks something like this:
var tagString = '<script async type="text/javascript" src="path_to_script"></script>';
var range = document.createRange();
range.selectNode(document.getElementsByTagName("BODY")[0]);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
This code works in my browser.
$('body').append('<script>alert("test");<' + '/' + 'script>');
so it might be that $(this) is what is actually causing your problem.
Can you replace it with 'body' and see if it works like that?
One workaround in your case could be to append a fake image with an onload event:
<img src="blank.gif" onload="GA_googleFillSlot('blog_landing_right_rectangle_300x250')" />
since your are in javascript, you can append and then execute the code:
$(this).append('<div class="overlay-background">Advertisement</div>');
GA_googleFillSlot("blog_landing_right_rectangle_300x250");
Please try:
s = '<' + 'script type="text-javascript">' +
'GA_googleFillSlot("blog_landing_right_rectangle_300x250");' +
'<' + '/' + 'script>';
$(this).append(s);
UPD: alas, this won't work, please use wless1's solution instead
Ok basically I have this javascript file http://assets.revback.com/scripts/share1.js that basically adds a bunch of share buttons via javascript.
What I want to do, is change the twitter image link to use an url shortener:
so instead of:
<a href=\"http:\/\/twitter.com\/home?status=Interesting Post:(UURRLL)\" title=\"Click to share this page on Twitter\"><img src=\"http:\/\/assets.revback.com\/scripts\/images\/twitter.png\" border=\"0\"\/><\/a>
I want to use
<a href="#" onClick="window.location='http://ko.ly?action=shorten&uri=' + window.location + '&dest=twitter.com/?status=Reading ';"><img src=http://assets.revback.com/scripts/images/twitter.png"><\/a>
but I need that bottom one, to be written with javascript friendly syntax. i.e. like in the top one, instead of http://, you have http://
Lose the onclick. There is no benefit to it whatsoever, since it just acts like a normal link (except much more broken). Now you don't have to worry about escaping JavaScript inside JavaScript and the consequent \\\\\\\\ madness.
var buttonhtml= (
'<a href="http://ko.ly?action=shorten&uri='+encodeURIComponent(location.href)+'&dest=twitter.com/?status=Reading">'+
'<img src=http://assets.revback.com/scripts/images/twitter.png">'+
'</a>'
);
(Note that the encodeURIComponent, which is essential to correctly inserting your current URL into another URL without breaking, is also protecting you from HTML-injection, since < and & characters get %-encoded. Without that safeguard, any page that includes your script has cross-site-scripting vulnerabilities.)
Better still, lose the HTML string-slinging altogether and use DOM methods to create your content. Then you don't need to worry about & and other HTML escapes, and you don't have to hack your HTML together with crude, unreliable string replacing. You seem to be using jQuery, so:
var link= $('<a>', {href:'http://ko.ly?action=shorten&uri='+encodeURIComponent(location.href)+'&dest=twitter.com/?status=Reading'});
link.append('<img>', {src: 'http://assets.revback.com/scripts/images/twitter.png'});
link.appendTo(mydiv);
ETA: I'd replace the whole markuppy mess with a loop and the data broken out into a lookup. ie. something like:
(function() {
var u= encodeURIComponent(location.href);
var t= encodeURIComponent(document.title);
var services= {
Facebook: 'http://www.facebook.com/sharer.php?u='+u,
Twitter: 'http://ko.ly?action=shorten&uri='+u+'&dest=twitter.com/?status=Reading',
StumbleUpon: 'http://www.stumbleupon.com\/submit?url='+u+'&title='+t,
// several more
};
var share= $('<div class="ea_share"><h4>Share this with others!</h4></div>');
for (var s in services) {
share.append($('<a>').attr('href', services[s]).attr('title', 'Click to share this on '+s).append(
$('<img>').attr('src', 'http://assets.styleguidence.com/scripts/images/'+s.toLowerCase()+'.png')
));
}
$('#question .vt').append(share);
})();
Try this
<a href="#" onClick="window.location='http://site.com?action=shorten&uri='+
window.location + '&dest=twitter.com/?status=Reading;'">tweet this</a>
<a href="#" onClick="window.location='http://site.com?action=shorten&uri=' + window.location.href + '&dest=twitter.com/?status=Reading ';return false;">tweet this
Change the href of the link in the onclick attribute:
tweet this
The default action (going to the page designated by the href attribute) will always still be executed unless the event handler onclick receives a return value of false. So, changing the href before it happens will cause it to go to the page you want it to as long as you don't return false.