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   3729 Views

Avatar
Fabie

Community Member, 28 Posts

15 January 2009 at 7:13pm

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

Forum Moderator, 4093 Posts

16 January 2009 at 4:22am

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

Community Member, 28 Posts

19 January 2009 at 8:17pm

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

Community Member, 14 Posts

2 July 2009 at 5:17pm

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

Community Member, 901 Posts

2 July 2009 at 6:38pm

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

Community Member, 164 Posts

16 July 2009 at 8:38pm

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

Community Member, 164 Posts

16 July 2009 at 10:42pm

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

Community Member, 95 Posts

27 November 2010 at 12:17am

Thank you Fabie, great post!