Many Pies

Many Pies

Monday, January 26, 2009

Using Javascript to modify text on a NetCommunity donation part

(Long heading, but informative for the very few that need to know.)

Update: Later versions of NetCommunity allow you to edit almost all of the text on a donation form so this isn't needed.
There's a better way of getting that magic page prefix in my more recent NetCommunity javascript post.
Later versions of NetCommunity include jquery libraries on the page, so you can use those. They are neater and provide better cross browser support. As this script isn't in current use I'm not rewriting it. However you can replace
 document.getElementById(xyzPrefix + 'something').textContent = GADText;
with
 $('#'+xyzPrefix + 'something').val(GADText);

Assisted by information from Michael Williams and Micah Wittman I have written a bit of Javascript to modify the gift aid declaration text on a Donation part. We need to do this because people can donate directly to some of our workers, and if they are a close relative as defined by the HMRC, this cannot be gift aided. "Close relative" means children, grandchildren, parents, grandparents, siblings or the spouses of these.

Here's the page:
Give to support Bible Translation

Here's the script:

<script type="text/javascript">                        
<!--//--><![cdata[//><!--
function xyzModifyGAD()
{
    var xyzPrefix = '';
    var xyzPrefix1 = 'PC909_'; //prefix of donation fields on the PRIMARY donation form
    var xyzPrefix2 = 'PC1052_';  //prefix of donation fields on SOME OTHER donation form
    var GADText = 'I would like Wycliffe UK to reclaim tax on all donations I have made for this tax year and the six years prior to the year of this declaration, (but no earlier than 6/4/2000) and all donations I make from the date of this declaration until I notify you otherwise, as Gift Aid donations. (Under Gift Aid regulations you are not allowed to give a gift, via a charity, to a close relative. "Close relative" means children, grandchildren, parents, grandparents, siblings or the spouses of any of these.)';
    try{
        //Assume PRIMARY donation form
        xyzPrefix = xyzPrefix1;
        //Set Gift Aid declaration text. It doesn't have a unique id, so we find the checkbox, go up to the parent
        // and then go to the second (0 based) of the children. This will break if Blackbaud change the donation part

        //For Firefox, Safari etc.
        document.getElementById(xyzPrefix + 'chkGiftAid').parentNode.childNodes[1].textContent = GADText;
        //For IE
        document.getElementById(xyzPrefix + 'chkGiftAid').parentNode.childNodes[1].innerText = GADText;
    }catch(e){
        //Caught exception, so assume secondary donation form (doesn't currently exist)
        try{
            xyzPrefix = xyzPrefix2;
            //For Firefox, Safari etc.
            document.getElementById(xyzPrefix + 'chkGiftAid').parentNode.childNodes[1].textContent = GADText;
            //For IE
            document.getElementById(xyzPrefix + 'chkGiftAid').parentNode.childNodes[1].innerText = GADText;
        }catch(e){}
    }
}

function runit(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(xyzModifyGAD);
}
runit();
//--><!]]>
</script>


Highlights:
  • This script lives in a Formatted Text and Images part below the donation form.
  • The function at the bottom is used because javascript outside a function sometimes doesn't run. 
  • It registers our update function so that it gets called when the "add to cart" button is clicked.
  • As the comment says, we can't get directly to the text we want, so we find a nearby checkbox and go up and down again in the DOM.
In the course of doing this I developed a
Checklist for debugging Javascript in NetCommunity
  • Use validator.w3.org to check for basic mistakes, though NetCommunity generates lots of its own invalid HTML.
  • Display IE to check for script errors (icon at bottom left indicates invalid script)
  • In firebug, if line number isn't green then it's not valid Javascript.


Script processed by Quick Escape.

3 comments:

Anonymous said...

Thanks for sharing you're final results, Paul!

Anonymous said...

Could you post the URL so we can see it in action?

Paul Morriss said...

Give to Vision 2025