Volunteers as TR registrants - hiding some content with js / jquery

Tanna Lewis

Hi All,

I'm hoping someone out there who is js- or jquery-savvy can help me out with this problem.  


We've decided this year to have our volunteers for our Courage Classic Bicycle Tour register in the TR just like the riders would - along with other benefits, we are hoping to start a volunteer fundraising program.  But we also want to give volunteers who don't want to fundraise the ability to opt out.  We're handling this by giving the non-fundraisers a specific participant type.  


The problem we're running into is with the registration screen where the user chooses their participant type (screenshot attached).  We want to show the additional gift and fundraising goal-setting options on this page to all of our registrants except this group of non-fundraising volunteers.  Seems like it would be simple to have a click event or something similar to simply hide the relevant divs when the user chooses that registration option, but nothing I try is working.  I have zero training in js/jquery, so it is difficult for me to troubleshoot the problem, and it is possible I am making a simple mistake.  


The two most promising snippets of code are below, and the page can be accessed from http://support.childrenscoloradofoundation.org/site/TR?fr_id=1370&pg=entry&s_promoCode=volunteer, then "Register as an Individual," then "Join as a New Participant."  I don't think I can give a direct link to the page since we are using a promo code to separate the rider and volunteer options.


This seems logically to me like it should work, but nothing:


<span style="display:none;">

<script>

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

  jQuery(function($) {


//hide fundraising options for non-fundraising volunteer

        $("input[name="fr_part_radio"]").click(function () {

            if ($("#fr_part_radio_1491").is(":checked")) {

                $("#part_type_additional_gift_container").hide();

                $("#part_type_fundraising_goal_container").hide();

            } else {

                $("#part_type_additional_gift_container").show();

                $("#part_type_fundraising_goal_container").show();

            }

        });

 });

});

</script>

</span>



Meanwhile, this hides the divs if the non-fundraising volunteer option is the default selected on load, but then there is no change if a different radio button is selected - since I am having trouble with the click function above, I'm not sure how to move forward if an event handler is needed:


<span style="display:none;">

<script>

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

  jQuery(function($) {


//hide fundraising options for non-fundraising volunteer

   if($("#fr_part_radio_1491").prop("checked")){

       $("#part_type_additional_gift_container").hide();

       $("#part_type_fundraising_goal_container").hide();

   } else {

       $("#part_type_additional_gift_container").show();

       $("#part_type_fundraising_goal_container").show();

        }

 });

});

</script>

</span>



Greatly appreciate any advice!!!

Tanna  

Daniel Hartanto

Hi Tanna,


This could be 'binding' related issue affecting FUTURE elements (those elements created dynamically by the Javascript) post initial page load as likely the radio button of that participant types would be a good candidate due to its nature.


Couple things probably you might want to explore:


1. ) Have you try the on() method wrapping the 'click' listener within?

 $("input[name="fr_part_radio"]").on("click", function(){
    //hide function here if that fr_part_radio_1491 id is checked
});


2.) Other thing, if you notice those radio button has an onclick and onkeyup function pointing to the function called fr_part_radio_select(elem, useFlair) . This looks like a dynamically generated Convio default JS which you can't just modify that instance, but you could clone /  redefine the original function again with the same function name and append your hide function in it.  Normally browser will take the last one if you have two of the same function name instance. This is how the original function looks like (yellow highlighted), when you re-declare that at the bottom of your page (to ensure that's the last one), make sure you retain all this, plus the added line to perform your hide function (highlighted in green).

function fr_part_radio_select(elem, useFlair) {

    //YOUR MODIFIED LINES -- I believe that 1491 is of index 0 since it's the first radio button
    if(elem==0) {
      //hide those 2 fundraising containers here
     }
    // flair is default
    useFlair = useFlair === false ? false : true;
    var idx = 0;
    var any = 0; // variable to indicate if we have any visible addons, initially false
    if (document.show_addons[elem] != null && document.show_addons[elem] != undefined) {
        while (idx < document.show_addons[elem].length) {
            //alert('Radio should display addon id ' + document.show_addons[elem][idx]);
            showElementWithEffects('addon_container_' + document.show_addons[elem][idx], useFlair);
            any = 1; // found a visible addon, set flag to true
            idx++;
        }
        idx = 0;
        while (idx < document.hide_addons[elem].length) {
            //alert('Radio should hide addon id ' + document.hide_addons[elem][idx]);
            hideElementWithEffects('addon_container_' + document.hide_addons[elem][idx], useFlair);
            idx++;
        }
        // test flag to see if we have any visible addons, if so show the header, otherwise hide it
        if (any > 0) {
            showElementWithEffects('addon_section_header', useFlair);
            showElementWithEffects('addon_section_message', useFlair);
        } else {
            hideElementWithEffects('addon_section_header', useFlair);
            hideElementWithEffects('addon_section_message', useFlair);
        }
        selectType(elem);
    }
}


3.) If you rather not be that intrusive approach wise as mentioned on #2, other thing I could think of is the use of persistent timer through setInterval that will check whether that radio button is checked, and if so hide the goal and fundraise option  (since you can detect on initial whether something is checked or not, I believe, the timer could check whether that thing is checked periodically like every second to hide / show -- I know this might sound cheesy but might still be useful if all else failed.


Let us know.


regards,

Daniel


ADD ON EDIT / P.S.


This probably won't answer the "presentation" / "rendering" thing, but have you checked the available setting within the TeamRaiser, under  each Participant Type when you edit that  6. Manage Participant Types > a.Identify Type > #5. Fundraising Enabled, if you uncheck that for the associated Participant Type instance, it says it will ignore any fundraising related action that user might perform despite they are still seeing those fields. Below is the excerpt:

 5.     Fundraising Enabled:

Determines if these participants will be raising money for this TeamRaiser event and have access to fundraising tools, like the Participant Center (Note: The Fundraising field itself will always display on registration forms, but any goal entered in the field will be ignored if this option is not enabled.)

  [ ] Yes, this participation type involves raising money 

Tanna Lewis

Daniel Hartanto:

Hi Tanna,


This could be 'binding' related issue affecting FUTURE elements (those elements created dynamically by the Javascript) post initial page load as likely the radio button of that participant types would be a good candidate due to its nature.


Couple things probably you might want to explore:


1. ) Have you try the on() method wrapping the 'click' listener within?

 $("input[name="fr_part_radio"]").on("click", function(){
    //hide function here if that fr_part_radio_1491 id is checked
});


2.) Other thing, if you notice those radio button has an onclick and onkeyup function pointing to the function called fr_part_radio_select(elem, useFlair) . This looks like a dynamically generated Convio default JS which you can't just modify that instance, but you could clone /  redefine the original function again with the same function name and append your hide function in it.  Normally browser will take the last one if you have two of the same function name instance. This is how the original function looks like (yellow highlighted), when you re-declare that at the bottom of your page (to ensure that's the last one), make sure you retain all this, plus the added line to perform your hide function (highlighted in green).

function fr_part_radio_select(elem, useFlair) {

    //YOUR MODIFIED LINES -- I believe that 1491 is of index 0 since it's the first radio button
    if(elem==0) {
      //hide those 2 fundraising containers here
     }
    // flair is default
    useFlair = useFlair === false ? false : true;
    var idx = 0;
    var any = 0; // variable to indicate if we have any visible addons, initially false
    if (document.show_addons[elem] != null && document.show_addons[elem] != undefined) {
        while (idx < document.show_addons[elem].length) {
            //alert('Radio should display addon id ' + document.show_addons[elem][idx]);
            showElementWithEffects('addon_container_' + document.show_addons[elem][idx], useFlair);
            any = 1; // found a visible addon, set flag to true
            idx++;
        }
        idx = 0;
        while (idx < document.hide_addons[elem].length) {
            //alert('Radio should hide addon id ' + document.hide_addons[elem][idx]);
            hideElementWithEffects('addon_container_' + document.hide_addons[elem][idx], useFlair);
            idx++;
        }
        // test flag to see if we have any visible addons, if so show the header, otherwise hide it
        if (any > 0) {
            showElementWithEffects('addon_section_header', useFlair);
            showElementWithEffects('addon_section_message', useFlair);
        } else {
            hideElementWithEffects('addon_section_header', useFlair);
            hideElementWithEffects('addon_section_message', useFlair);
        }
        selectType(elem);
    }
}


3.) If you rather not be that intrusive approach wise as mentioned on #2, other thing I could think of is the use of persistent timer through setInterval that will check whether that radio button is checked, and if so hide the goal and fundraise option  (since you can detect on initial whether something is checked or not, I believe, the timer could check whether that thing is checked periodically like every second to hide / show -- I know this might sound cheesy but might still be useful if all else failed.


Let us know.


regards,

Daniel


ADD ON EDIT / P.S.


This probably won't answer the "presentation" / "rendering" thing, but have you checked the available setting within the TeamRaiser, under  each Participant Type when you edit that  6. Manage Participant Types > a.Identify Type > #5. Fundraising Enabled, if you uncheck that for the associated Participant Type instance, it says it will ignore any fundraising related action that user might perform despite they are still seeing those fields. Below is the excerpt:

 5.     Fundraising Enabled:

Determines if these participants will be raising money for this TeamRaiser event and have access to fundraising tools, like the Participant Center (Note: The Fundraising field itself will always display on registration forms, but any goal entered in the field will be ignored if this option is not enabled.)

  [ ] Yes, this participation type involves raising money 

Dan,

THANK YOU!!!  I had tried .on( "click", function()... with a slightly different version of the code which was ineffective when I tested it, so I had overlooked trying it this way. That small tweak you suggested above in #1 above is working perfectly.  I seriously can't thank you enough - you are too awesome!!!!

Tanna


Oh yeah, and for your PS, thank you for checking in on that part of the equation too - I had indeed set it that way, but as you mentioned, it still shows those fundraising questions regardless - it would be great if it was built into the product that the "fundraising enabled" setting would also automatically hide those irrelevant fundraising questions if unchecked, right!?

Daniel Hartanto

You are always welcome Tanna always happy to help!


p.s. agree, let see if Convio would implement that hide someday for usability purpose


regards,

Daniel