We Keep Coding

Current location path as a url parameter

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>

Javascript/jQuery prepend images

I'm a student, and new to JS and jQuery. I'm trying to make a little facebook-like project, because I can put a lot of different things in that. Right now the HTML is just static, but as soon as i have more knowledge, I plan to make it user-generated.
I have the different 'Facebook' posts. each post is an article, and the whole is in a section titled 'newsfeed', the articles have this syntax:
<H1>, with the full name, given a class with their abbreviated name.
<p>, with their 'status update'. after this i append an <ul> with javascript, containing <li>s with like, comment and share.
I then added some jQuery/JS code to add a profile picture
profilePics = function () {
var name = $('article h1').attr('class');
name = capitalizeFirstLetter(name);
console.log(name);
var path = '../media/profile/' + name + '_Square_0.png';
console.log(path);
$('article h1').prepend('<img src="' + path + '" alt="image of ' + name + '">')
};
When I run this, it shows the alt-text of the image, indicating it can't open the image. My problem exists out of two parts:
I triple-checked the path, so basically the only thing that could be wrong with it is that i don't go to the correct parent-directory. Do i start counting position from the JS file or the directory it's in?
I want to add a different picture for each (not determined how much) post. Right now it looks at the first post for the class, and then adds it to ALL posts

To add different picture on any <h1> you have to loop over them. And your http image path must by absolute, not relative.
profilePics = function () {
var imgPath = '/http-img-path/from/web-root/';
$('article h1').each(function() {
var name = $(this).attr('class');
$(this).prepend("<img src='"+imgPath + name + "_Square_0.png' alt='image of "+name+"'");
});
};

How to provide different URLs for two clickable elements on the same page?

I have two clickable elements in HTML like this:
HTML
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
They belong to the page with url say:
http://foobar/examples.html
They have onclick listeners attached to them that retrieve some data from the server and display it on the webpage
Javascript
node1.click(function () {/*Displays table1*/})
node2.click(function () {/*Displays table2*/})
I want to change the URL for the two clicks just so that if I open the URL in a fresh tab, I get the node element clicked and the data visible. For example, conceptually, the following URL should point to the node1 clicked and data for it visible:
http://foobar/examples.html##fileName1 (does not work, but you get the idea)
I do not want to change the URL in accordance with what has been explained here as I do not want to create an HTML page for every fileName (it is an increasing list). Anchors don't help either as they just open http://foobar/examples.html and none of the nodes clicked . Neither is the answer to this question very clear to me. Can someone please help?

The first link you gave for changing the URL is what you want. However, you don't change the HTML page - you can add URL variables. For example:
http://www.example.com/mypage.html?node1=1&node2=1
Then you need to write a Javascript function at the top of your document to read the URL variables, and display the nodes that are set to 1 (or whatever value you choose) when the document has been loaded. For an example of how to read URL variables, see this answer.

You could give your nodes identifiers, like:
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
You would need to adjust the file names to be valid IDs.
Add the following JS:
var nodeId= window.location.hash;
$(nodeId).click();
You could then use:
http://foobar/examples.html#fileName1 (where fileName1 is adjusted as for IDs).

Jquery .html and .load

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.

How do I make this link work in javascript

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.