Jump to:

5542 Posts in 1739 Topics by 1225 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Onclick - how do I get this allowed?

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3634 Views
  • Fabie
    Avatar
    Community Member
    28 Posts

    Onclick - how do I get this allowed? Link to this post

    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

  • UncleCheese
    Avatar
    4085 Posts

    Re: Onclick - how do I get this allowed? Link to this post

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

  • Fabie
    Avatar
    Community Member
    28 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    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!

  • Tomae
    Avatar
    Community Member
    14 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    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 !

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    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

  • MarijnKampf
    Avatar
    Community Member
    164 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    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?

  • MarijnKampf
    Avatar
    Community Member
    164 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    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');
       });
    });

  • neilcreagh
    Avatar
    Community Member
    94 Posts

    Re: Onclick - how do I get this allowed? Link to this post

    Thank you Fabie, great post!

    3634 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.