Develop Reference

Save text from a href link threw javascript

I want to store a value to the cache using javascript when clicking an a href link. I'm setting up following code dynamicall
<a align="left" href="projectoverview.html">Test Manager</a>
So I want to save the text Test Manager to the cache, but I don't know how to catch this text when it's clicked. The code below is how that piece of code is setup. Do I need to add an onclick or something or is there a better way?
var text = '<a align=\"left\" href=\"projectoverview.html\">' + project['title']
+ '</a><p align=\"right\">';

If you want to pass data from page to page using javascript/jquery you can do so with sessionStorage. Below is just an example of how you would do it using jQuery.
$('a').each(function() {
$(this).on('click', function() {
var linkText = $(this).text();
// Save data to sessionStorage
sessionStorage.setItem('clickedLink', linkText);
});
});
Then on the next page you can call it by using the .getItem function like so.
$(function() {
var data = sessionStorage.getItem('clickedLink');
alert(data);
});
If implemented correctly the alert box will say "Test Manager".
You can read more about sessionStorage here.
EDIT:
I would add a special class to those links though because the code above will execute on any link you have on the page which may give you unwanted issues.

Refresh an arbitrary image with a button

I have an auto-generated form that also handily displays thumbnails. I want to add a button beside the image that will refresh it if it is updated. I want to take cached images into account.
I add a button easily enough:
// add a refresh button to image previews
$('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');
And since I'm okay if the refresh button refreshes all of the stale images I try to append a query string to the image src (deleting an old query string if it exists):
// attach refresher to button
$(".refresh-image-button").click(function() {
$('img[src*="/thumbs/"]').attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
});
However, I can't really do this because here $(this) doesn't refer to the matched image, and I can't do a split operation within this jquery match anyway.
How do I do it?
As a bonus if anyone has a ref to decent auto refresh image code, that would be helpful.
This builds on a simpler SO inquiry here.

Iterate through the collection:
$(".refresh-image-button").click(function() {
$('img[src*="/thumbs/"]').each(function() {
$(this).attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
});
});
http://jsfiddle.net/g68gxu93/1/

You could generate a variable with the new trailing parameter separately like :
$(".refresh-image-button").click(function() {
var newAttr = $('img[src*="/thumbs/"]').attr("src").split("?")[0] + "?ver=" + new Date().getTime();
$('img[src*="/thumbs/"]').attr("src", newAttr);
});
see JSFIDDLE

I ended up doing something almost precisely like #Moogs answer.
addRefreshButtons();
// NICEITIES
function addRefreshButtons() {
// add a refresh button to image previews
$("div.refresh-image").remove();
$('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');
// attach refresher to button
$(".refresh-image-button").click(function() {
refreshThumbnails();
});
}
function refreshThumbnails() {
$('img[src*="/thumbs/"]').each(function() {
var src = $(this).attr('src');
var newSrc = src.split('?',1)+'?'+Date.now()
$(this).attr('src', newSrc);
});
}

zClip don't work - multiple copy to clipboard JS

I try to make a copy to clipboard button but I don't know why I can't make it.
I load my page with ajax so I call a function to add the zclip to my button when I mouseOver the button. But when I click on it, nothing is happening.
Here are my codes:
JS :
<script type="text/javascript" src="<?php echo JS_DIR?>zclip.min.js"></script>
<script type="text/javascript">
function mouseOver(){
$('.copyMails').each(function (k,n) {
console.log("test");
var copyMails = $(this);
$(this).zclip({
path: '<?php echo JS_DIR?>ZeroClipboard.swf',
copy: function () {
var val = $(copyMails).attr('data-clipboard-text');
return val;
},
afterCopy: function () { console.log($(copyMails).data('clipboard-text') + " was copied to clipboard"); }
});
});
}
</script>
And my button:
<button onmouseover="mouseOver()" data-clipboard-text="<?php echo implode(',', $emails); ?>" class="copyMails" title="Copier les adresses emails">
Copier les adresses emails
</button>
Thanks in advance.

I could not get this to work on my server, I downloaded the ZeroClipboard.swf from zclips website and would not work. I noticed that the swf on zclips website in not the one that they use for their examples. So I created a hyperlink to http://www.steamdev.com/zclip/js/ZeroClipboard.swf and clicked "save link as" compared the size to the one I had downloaded originally and it was bigger. So I put the new one from the link above onto my server and it worked perfectly.
I think if you downloaded the swf from zclips website directly from their download link, this is your problem as it was mine. Try saving my link as a file and then uploading it to your server.

There is an error in your example, at least with what's provided. Trying it in a fiddle prouces your mouseOver function being undefined.
I assume your intent is to copy the data to the clipboard when they click the button, and setup the clipboard when the mouseover event is triggered, correct? If that's the case, your best bet would be to create a single event for this, delegating it to your class of button(s). This way, it's not continuing to configure the clipboard plugin, every time an element is hovered over, for all elements matching your selector.
Here's an example of the code, but I don't believe you can include the SWF path as an external resource within the fiddle so it's not fully functional. So I have put together a version of the code I feel is close. Please give it a try.
JSFiddle: http://jsfiddle.net/adx93ave/3/
$(function () {
$(document).on("mouseover", ".copyMails", function (evt) {
var $btn = $(this);
$btn.zclip({
path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
copy: $btn.data("clipboard-text"),
afterCopy: function () {
console.log($btn.data('clipboard-text') + " was copied to clipboard");
}
});
});
});

Javascript code to Jquery code not working

I have an image that is changed when I click on several links. The following javascript code works well :
<img src="myImage.png" id="mainImg" />
Report1
Report2
But I'm trying to change the code to use Jquery code instead. It calls the same server code as the javascript example. No errors are generated & a png is streamed back. But the image is not updated on the html page. To make things worst, the html moves to the top of the page. In the working javascript code, the image would fresh with a nice ajaxy feel where only the image would change & the rest of the page would not move. My Jquery code is below :
<img src="myImage.png" id="mainImg" />
Report1
Report2
<script type="text/javascript">
$(document).ready(function(e) {
$("#report1_id").click(function(e) {
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
$("#report2_id").click(function(e) {
alert("This Is Report2");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport2.do?"+d.getTime());
});
});
</script>
Can anyone see what I'm doing wrong? Any help would be appreciated.

From your code, the image src should change, but maybe it doesn't change to what you'd like. Make sure that http://localhost/convertToReport1.do returns exactly what you need (ideally, you can specify that in the question itself).
The page jump happens because of the anchors href attribute. Either remove it, or prevent the default anchor behaviour in your click handler function, like this:
$("#report1_id").click(function(e) {
e.preventDefault(); // <--- this is the key, return false would also work at the end
alert("This Is Report1");
d = new Date();
$("#mainImg").attr("src", "http://localhost/convertToReport1.do?"+d.getTime());
});
See it in action here: http://jsfiddle.net/egvac61c/

Jquery change text to URL with one click

I'm working with Google Sites right now. I've added an HTML Box to my page and added my script. What the script should do is, that when I click on a text, that this text changes its displaytext and adds an href to it. The text is in a table in a "td" with the class "hey". My first function was this
function showitnow() {
var div_data = "<br> <br> <a href='https://www.google.com'>Test</a>";
$(".hey").html(div_data);
}
$(".hey").click(function() {
showitnow();
});
I've copied this function from here. When I click on the field with the class "hey", it only changes my text to "Test". The site knows, that "Test" is a link, but the href went missing, so nothings happens when you click on it. After that I've tried to use the setAttribute and setProperties functions, that were mentioned here on the forum, but they also didn't work. I've noticed, on some versions of Jquery, that when I click on the text, the Firebug console says "Rejecting .setAttribute".
My Question is, are these functions forbidden on Google Sites or is there another way to add a Link and change the display text?
I'm using Version 1.10.1 of Jquery.

try this
$(".hey").click(function() {
var div_data = "<br> <br> <a href='https://www.google.com'>Test</a>";
$(this).append(div_data );
});

Try this:
$(document).ready(function(){
$(".hey").click(function() {
var div_data = '<br> <br> Test';
$(".hey").html(div_data);
});
})
JSFIDDLE DEMO