Participant Center - modify an anchor for a specific event and not all

Timothy Wong · September 2017

Hi all,

I am attempting to change a message catalog text for a specific TeamRaiser Participant Center because we do not want to effect the rest of our events with changing the verbiage. I am aware that the PC uses YUI and can add javascript through custom.js, however I am wondering if anyone has overrode specific anchors in a specific participant center for a one and not the rest.

I was wondering if anyone had any working examples.

This is what I got to so far to modify the text in the sidebar in the custom.js of the LO Participant Center. I can not get the onclick functationality to work to go to the Email portion of the PC.

Y.use('jquery-noconflict', function() {

jQuery(function($){

$( "a#msg_cat_nav_email_team" ).replaceWith("<a>" + "Email Event Name Teammates" + "</a>");

});

});

https://www.screencast.com/t/W3NW1tAGthAG

This looks good but the 'onclick' functionality doesn't work and I have done other javascript to get the onlick to work but does not redirect.

Thanks in advance.

Tim

Romany Nassief · October 2017

Here is an updated version of your script that check for a specific event id and then change link text and onclick event to open email tab:


Y.use('jquery-noconflict', function() {
  if (YAHOO.Convio.PC2.Config.Teamraiser.getFrId() === "<YOUR SPECIFIC EVENT ID HERE>") {
    jQuery(function($) {
      $("a#msg_cat_nav_email_team").html("<b>Email</b> Event Name Teammates").click(function(e) {
        YAHOO.Convio.PC2.Utils.loadView('email', 'compose');
        e.preventDefault();
      });
    });
  }
});

Timothy Wong · October 2017

Hi Romany,

.html does not get read within the PC2 since there is a conflict is there. Is that normal or is that how the general PC was coded?

I found a work around to what I needed.

Y.use('jquery-noconflict', function() {

 jQuery(function($) {

 $("a#msg_cat_nav_email_team").replaceWith("<a>" + "Email Event Name Teammates" + "</a>");

 $("#subnav_team_email_link a").click(function(e) {

 YAHOO.Convio.PC2.Utils.loadView('email', 'compose');

 e.preventDefault();

 });

 });

});

Thanks,

Tim

Daniel Hartanto · October 2017

Another alternative would be to 'separate' the jQuery so it runs as stand alone side-by-side with the PC2 YUI instead of having it run within the YUI.

I found it that doing it that way has been the most stable approach coming from one that is more familiar with jQuery but not necessarily the YUI; also in the case that if you want to tap into later versioon of jQuery than otherwise version that default PC2 might be using with the YUI

To do this

add a call to the jQuery library within the <head> of the dashboard.html ideally just before the call to the custom.js
Then within custom.js, you can assign a variable for the jQuery.noConflict (i.e. var jQ = jQuery.noConflict(true); ) so that you can call your own jQuery version in without conflicting with the default jQuery that PC2 might be using -- in this case it will be jQ as shown on that example (i.e. jQ('#selector').html('...');)
You don't need to have a separate document.ready stage for the jQuery -- you can tap into the loadCustom function within that custom.js, and within this internal function so that yours will run after everything gets initiated on the PC2 (default initiation wise) YAHOO.Convio.PC2.Utils.require("pc2:registrationLoaded", "pc2:constituentLoaded", "pc2:configurationLoaded", "pc2:wrapperLoaded", function() {
// put your jQuery related function call here

jQ.('#selector').html('hello world');

myOwnFunction();

//..so on

});

That's all -- you should be able to perform all kind of jQuery related DOM API

p.s. Also FRID is actually part of the PC2 url parameter that you could retrieve using pure Javascript function; not to mention that you could also use the Teamraise "Homepage" page to insert hidden DIV that could hold S-tag mechanism counterpart to achieve that (grab URL parameter through S334, pass the login consID, first name etc through S1 tag). I also usually load a reusable pagebuilder to PC2 through the use of jQuery.load API to load it into a custom DIV placeholder that I added within the dashboard.html ... so the alternatives abound.

regards,

Daniel

Participant Center - modify an anchor for a specific event and not all

Comments

Categories