Hello, i am in a bit of a pickle. I absolutely need to be able to add onlick elements such as onclick="pageTracker._link(this.href); return false;" to track in Google analytics.

However, SS won't "eat" it - any way to allow it to be done?

Trawled the archives and old forum, the IRC but no luck this time :(

Cheers

Fabie

You shouldn't be using onclick attributes, as it mixes javascript with HTML. Do it unobtrusively in an external script.

$('my-tags').click(function() {__pagetracker... });

or if you don't have a js framework,

window.onload = function(() {
find anchor tags..
set their onclick attributes to whatever function you want.
}

Thanks UncleCheese! I ended up having some help from the SilverStripe IRC and I thought I would share the results here, for the non jQuery techies like me. It is actually quite simple, now that I know how to do it.

1. download the latest jQuery library from here: http://jquery.com/ on the big download button (it's just one file)!

2. upload that file to mysite/javascript

3. go to mysite/code and select your template (eg. page.php) and add it as a requirement like this: Requirements::javascript("mysite/javascript/jquery.yourlibrary.js");

5. Create the query such as:

$(document).ready(function() {
alert('This is being called on load');
$('a.gafollow').click(function() {
alert('This is being called on click, with href set to '+this.href);
pageTracker._link(this.href);
});
});

and save it in a file and call it jquery.onload.js in mysite/javascript

6. go to mysite/code and select your template (eg. page.php) and add it as a requirement like this: Requirements::javascript("mysite/javascript/jquery.onload.js");

7. add the gafollow class to all the outbound links you want the link function to apply to

8. Test to see if you see both alerts

9. Delete both alerts and you are done.

Hope that helps someone!

hi Fabie... it works for me........ thnxx .......

mine was a show hide function............

heres the code............

$('a.gafollow').click(function() {

showhide();
});

var show=1;
function showhide(){
var x=document.getElementById('showdiv');

if(show==1)
{
x.style.display='block';
show=2;
}
else if(show==2)
{
x.style.display='none';
show=1;
}
}

thanx again Fabie............. nicely explained........

Cheers !

Hey Fabie

You should put this on http://ssbits.com or the SilverStripe Docs (under recipes). That way it would help all the people that think "onclick" is still the way to go :)

For some reason I can't get it to work. I've followed the instructions above and I'm using the following function:

$(document).ready(function() {
	alert('This is being called on load?!?!');
	$('a').click(function(event) {
   	alert('This is being called on click');
	});
}); 

It shows me the alert "This is being called on load?!?!" but then I get the following javascript error:

Error: $("a") is null
Source File: http://localhost/mysite/javascript/jquery.registrationform.js?m=1247733349
Line: 4

Anyone any ideas to what I'm doing wrong?

Found out what was going wrong. I was trying to get it to work on a page with a form (it worked fine on other pages). I remembered a post about jQuery and Prototype conflicts. The simple solution was to add a call to jQuery.noConflict(); and change the code accordingly:

jQuery.noConflict();

jQuery(document).ready(function() {
	alert('This is being called on load?!?!');
	jQuery('a').click(function(event) {
   	alert('This is being called on click');
	});
}); 

Thank you Fabie, great post!