Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS

Onclick - how do I get this allowed?


Reply

8 Posts   3659 Views

Avatar
Fabie

15 January 2009 at 7:13pm Community Member, 28 Posts

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

Avatar
UncleCheese

16 January 2009 at 4:22am 4085 Posts

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.
}

Avatar
Fabie

19 January 2009 at 8:17pm Community Member, 28 Posts

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!

Avatar
Tomae

2 July 2009 at 5:17pm Community Member, 14 Posts

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 !

Avatar
banal

2 July 2009 at 6:38pm Community Member, 901 Posts

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 :)

Avatar
MarijnKampf

16 July 2009 at 8:38pm Community Member, 164 Posts

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?

Avatar
MarijnKampf

16 July 2009 at 10:42pm Community Member, 164 Posts

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 [url=http://www.silverstripe.org/forum-module-forum/show/262719?start=0#post262729]jQuery and Prototype conflicts[/url]. 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');
   });
});

Avatar
neilcreagh

27 November 2010 at 12:17am Community Member, 94 Posts

Thank you Fabie, great post!